どうも、こんにちは！橋尾渡（@hashio_wataru）です！
今回は「AddQuicktag」の使い方とCSSでカスタマイズする方法について説明していきたいと思います！「AddQuicktag」と言えば自分で設定したHTMLのタグを素早く記事に挿入することができるプラグインですね。
記事作成画面のメニューに「Quicktags」という項目ができ、そこから入れることができちゃいます。
メニューバーにないタグを追加してどんどん使いやすくしちゃいましょう！そうすれば能率もあがりストレスも減ると思われます。
では、「AddQuicktag」をインストールしていきましょう！
AddQuicktagをインストールする
まずはプラグインの新規追加画面に移動しましょう。そして「AddQuicktag」と検索して出てきたら「今すぐインストール」を押します。
そしてプラグインのインストールが完了したら「有効化」を押してください。そうすれば「AddQuicktag」を使えるようになります。
一応、プラグインリストに追加されているか確認しておきましょう。ありましたね。
インストールしただけでは記事編集画面に「Quicktags」のメニューが追加されないので設定画面に移動してタグを追加していきます。
AddQuicktagの設定画面
では、プラグインリストの中にある「設定」押してください。するとこのような画面がでてきましたね。
このエリアでタグの追加と削除をすることができます。
ここで大まかに項目の説明をしておきましょう。
項目の説明
ボタン名
ここに好きなボタンの名前を入れてください。なるべくわかりやすい名前にしておきましょう！例えば「緑色の囲い」とかですかね。
※必須項目
ラベル名
ラベルとは名称などの意味がありますね。ここに詳しい説明文などを入れてあげましょう。特に必要ないのであればそのままで大丈夫です。
開始タグ
ここにHTMLの開始タグを入れてやります。ちなみにここでCSSのクラスを追加することが可能です。
※必須項目
終了タグ
終了タグは開始タグにスラッシュを入れた文字になります。見本としては「</a>」「</pre>」などです。
アクセスキー
これはショートカットキーのようなものでIEのブラウザでしか使う事ができません。なので特に設定する必要はないでしょう。
順番
順番とはそのままの意味ですね、0~999で好きな順番を設定してやります。自分の使いたい順番でタグの設定をしておきましょう。特に気にしないのであればそのままで大丈夫です。
タグを追加して使えるようにするまで
書き込む必要がある項目がわかりましたね？次に一番重要なタグの追加について説明していきます。これはとても簡単です、上記した必須項目に必要な文字をいれてやるだけです。
僕の場合
- ボタン名：緑色の囲い
- 開始タグ：<div class=”kakoi”>
- 終了タグ：</div>
と記述しました。
それと、右側にあるチェックボックスですが一番右にある四角を押して全てにチェックを入れておきましょう。そして保存したら設定完了です。
※このチェックが入っていないと記事投稿画面に「Quicktags」がでてこなくなりますので必ずチェックしてください。
以上の設定が終わったらさっそく記事編集画面を見てみましょう。あれれ？おかしいですね…？どこにも「Quicktags」が見当たりません。
大丈夫です、安心してください。実はここのボタンを押せばツールバーが開いて多くの設定が可能になります。
ここまでが設定から使えるようにするまでになります。続きまして、タグにCSSのクラスを設定して装飾する方法を説明していきます。
タグにCSSのクラスを入れて装飾する方法
上のほうでも見たと思いますがもう一度装飾した形をご覧ください。
CSSで装飾するとこのように文章にメリハリをつけ、訪問者を退屈させない工夫ができます。
ちなみにCSSとはカスケーディング・スタイルシートと読みます。
Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイル シートの、具体的な仕様の一つ。
wikipedia
では、管理画面の左にあるメニューを見てください。そして「外観」を選び「テーマの編集」を押します。
すると、訳のわからない文字がたくさんでてきましたね。ここは「スタイルシート」という編集画面でCSSのコードを記入していく場所です。
先程、設定画面で「<div class=”kakoi”>」と書いて保存しましたね。その”kakoi”という文字を使ってスタイルシートに記述していきます。
では実際にコードを書いていきます。サンプルコードを載せておきますのでコピーして貼ってみましょう。
|
1 2 3 |
.kakoi{ border: 2px solid green; } |
スタイルシートに記述できたら保存を押して設定を反映させてやりましょう。
※CSSで記述する際に「.」コンマの記号を先頭に入れるので注意してください。
では記事編集画面に戻り装飾したい文字を選択して「Quicktags」でタグを付けてあげましょう。そして記事を見てみます。
するとCSSで装飾した通り、緑色の枠線が付きましたね。これが「green」ではなく「red」と記述すれば枠線が赤色になります。
このように自分の好きなスタイルを設定して記事を華やかにすることができます。そうすることによって記事が読みやすくなり、どこになにがあるのか一目でわかるようになります。
まとめ
どうですか、「AddQuicktag」の便利さが伝わりましたかね、CSSで装飾することによってブログに温かみが生まれます。なのでどんどんカスタマイズして個性を主張していきましょう！
と、いうことでそろそろ「AddQuicktag」についての記事を終わりたいと思います。ありがとうございました。
