AddQuicktagをCSSでカスタマイズしてブログを魅力的にする方法

シェアボタンを押して情報を共有しましょう。

スクリーンショット_022516_072722_PM

ども!ども!ども!どうも、こんにちは!橋尾渡です!

数日前、地元の先輩に飯を誘われ面白い話をたくさん聞いちゃいました♪その中でも面白かったのがマッサージ店の依存についてですかね。

掻い摘んで言うとマッサージ店の凝りをほぐす作用は麻薬のようなもので一時的にしか効果がなく、また凝りをほぐして気持ちよくなるため定期的に通うようになってしまうって話ですね~!これを聞いた時は「なるほど~!」ってなりましたw

さて、マッサージ店の話はおいといて、本題に入りましょう!

今回は「AddQuicktag」の使い方とCSSでカスタマイズする方法について説明していきたいと思います!「AddQuicktag」と言えば自分で設定したHTMLのタグを素早く記事に挿入することができるプラグインですね。

例えばこんな感じで囲いを作ることが可能になります。どうですか?使いたくなったでしょう?とっても便利なんですよこれ。

記事作成画面のメニューに「Quicktags」という項目ができ、そこから入れることができちゃいます。

スクリーンショット_022516_080658_PM

メニューバーにないタグを追加してどんどん使いやすくしちゃいましょう!そうすれば能率もあがりストレスも減ると思われます。

では、「AddQuicktag」をインストールしていきましょう!

スポンサーリンク
レクタングル(大)広告

AddQuicktagをインストールする

まずはプラグインの新規追加画面に移動しましょう。そして「AddQuicktag」と検索して出てきたら「今すぐインストール」を押します。

スクリーンショット_022516_082224_PM

そしてプラグインのインストールが完了したら「有効化」を押してください。そうすれば「AddQuicktag」を使えるようになります。

スクリーンショット_022516_082816_PM

一応、プラグインリストに追加されているか確認しておきましょう。ありましたね。

スクリーンショット_022516_084818_PM

インストールしただけでは記事編集画面に「Quicktags」のメニューが追加されないので設定画面に移動してタグを追加していきます。

AddQuicktagの設定画面

では、プラグインリストの中にある「設定」押してください。するとこのような画面がでてきましたね。

このエリアでタグの追加と削除をすることができます。

スクリーンショット_022516_090109_PM

ここで大まかに項目の説明をしておきましょう。

項目の説明

ボタン名

ここに好きなボタンの名前を入れてください。なるべくわかりやすい名前にしておきましょう!例えば「緑色の囲い」とかですかね。

※必須項目

ラベル名

ラベルとは名称などの意味がありますね。ここに詳しい説明文などを入れてあげましょう。特に必要ないのであればそのままで大丈夫です。

開始タグ

ここにHTMLの開始タグを入れてやります。ちなみにここでCSSのクラスを追加することが可能です。

※必須項目

終了タグ

終了タグは開始タグにスラッシュを入れた文字になります。見本としては「</a>」「</pre>」などです。

アクセスキー

これはショートカットキーのようなものでIEのブラウザでしか使う事ができません。なので特に設定する必要はないでしょう。

順番

順番とはそのままの意味ですね、0~999で好きな順番を設定してやります。自分の使いたい順番でタグの設定をしておきましょう。特に気にしないのであればそのままで大丈夫です。

タグを追加して使えるようにするまで

書き込む必要がある項目がわかりましたね?次に一番重要なタグの追加について説明していきます。これはとても簡単です、上記した必須項目に必要な文字をいれてやるだけです。

僕の場合

  • ボタン名:緑色の囲い
  • 開始タグ:<div class=”kakoi”>
  • 終了タグ:</div>

と記述しました。

スクリーンショット_022516_100922_PM

それと、右側にあるチェックボックスですが一番右にある四角を押して全てにチェックを入れておきましょう。そして保存したら設定完了です。

スクリーンショット_022516_095414_PM

※このチェックが入っていないと記事投稿画面に「Quicktags」がでてこなくなりますので必ずチェックしてください。

以上の設定が終わったらさっそく記事編集画面を見てみましょう。あれれ?おかしいですね…?どこにも「Quicktags」が見当たりません。

スクリーンショット_022516_101757_PM

大丈夫です、安心してください。実はここのボタンを押せばツールバーが開いて多くの設定が可能になります。

スクリーンショット_022516_103438_PM

ここまでが設定から使えるようにするまでになります。続きまして、タグにCSSのクラスを設定して装飾する方法を説明していきます。

タグにCSSのクラスを入れて装飾する方法

上のほうでも見たと思いますがもう一度装飾した形をご覧ください。

CSSで装飾するとこのように文章にメリハリをつけ、訪問者を退屈させない工夫ができます。

ちなみにCSSとはカスケーディング・スタイルシートと読みます。

Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイル シートの、具体的な仕様の一つ。
wikipedia

では、管理画面の左にあるメニューを見てください。そして「外観」を選び「テーマの編集」を押します。

スクリーンショット_022516_104359_PM

すると、訳のわからない文字がたくさんでてきましたね。ここは「スタイルシート」という編集画面でCSSのコードを記入していく場所です。

スクリーンショット_022516_104616_PM

先程、設定画面で「<div class=”kakoi”>」と書いて保存しましたね。その”kakoi”という文字を使ってスタイルシートに記述していきます。

スクリーンショット_022516_105649_PM

では実際にコードを書いていきます。サンプルコードを載せておきますのでコピーして貼ってみましょう。

スタイルシートに記述できたら保存を押して設定を反映させてやりましょう。

スクリーンショット_022516_110537_PM

※CSSで記述する際に「.」コンマの記号を先頭に入れるので注意してください。

では記事編集画面に戻り装飾したい文字を選択して「Quicktags」でタグを付けてあげましょう。そして記事を見てみます。

スクリーンショット_022516_111807_PM

するとCSSで装飾した通り、緑色の枠線が付きましたね。これが「green」ではなく「red」と記述すれば枠線が赤色になります。

スクリーンショット_022516_112032_PM

このように自分の好きなスタイルを設定して記事を華やかにすることができます。そうすることによって記事が読みやすくなり、どこになにがあるのか一目でわかるようになります。

まとめ

どうですか、「AddQuicktag」の便利さが伝わりましたかね、CSSで装飾することによってブログに温かみが生まれます。なのでどんどんカスタマイズして個性を主張していきましょう!

と、いうことでそろそろ「AddQuicktag」についての記事を終わりたいと思います。ありがとうございました。

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告
AddQuicktagをCSSでカスタマイズしてブログを魅力的にする方法
この記事をお届けした
HASHIO_LOGの最新ニュース情報を、
いいねしてチェックしよう!

シェアボタンを押して情報を共有しましょう。

フォローする

関連記事