ブログや記事を書く際に同じCSSを使用したいけど「いちいち書くのめんどくさい」とか「クラス名なんだっけ」とかなったことありませんか？今回はそんな悩みを解決するためクリックタグと素晴らしいWordpressのプラグイン「AddQuickTag」の使い方と使用例を解説します。※これはビジュアルエディタではなくテキストエディタで記事を書いている人向けの記事になります。
クイックタグとは
テキストエディタを使用するさいに、赤枠で囲ってある部分のボタンをクリックすると自動でタグを挿入してくれる機能です。デフォルトでは「b」、「i」、「ul」とかが登録されています。これを使用するだけでもだいぶ記事投稿は効率化できるのですが、今回はこのクイックタグに自分の好きなタグ、頻繁に使用するタグを追加していきます。
プラグイン AddQuicktag
僕もプライベートと仕事両方で使用しているこの「AddQuicktag」というプラグイン。簡単に自分好みのタグをクイックタグに追加できるのでかなり重宝しています。
インストール
WordPressでプラグイン新規追加のページに行き「AddQuicktag」と検索窓に入力すると下記のようなプラグインが表示されると思うので、インストールというボタンを押してください。※僕はインストール済みなので「インストール済み」のボタンが表示されてます。
次にプラグインの一覧に行き、AddQuicktagのところで有効化をクリックしプラグインを有効化してください。
既に有効化されてる場合はそのままで大丈夫です。
これでプラグインのインストールと有効化は終わりですので、つぎに設定していきます。
AddQuicktag 使い方と基本設定
・設定
インストールし、プラグインを有効化したら左サイドメニューの「設定」にAddQuicktagという項目が追加されると思うので、そこをクリックしてください。または、プラグイン一覧からAddQuicktagの「設定」というとこをクリックでもOKです。
設定といってもあとは自分の好きなタグを追加していくだけなのですが、追加の仕方を説明します。
ボタン名：テキストエディタで表示される名前（わかりやすい名前をつけましょう）
ラベル名：ボタンの説明（ここは入力してもしなくてもどちらでもかまいません）
開始タグ：タグの開始部分になります。例 <p>,<div>,<ul> など
終了タグ：閉じタグになります。例 </p>,</div>,</ul> など
アクセスキー：「ALT」＋「設定したキー」でタグを呼び出せる機能ですがIEにしか対応していないみたいです。
順番：クリックタグでの表示順（特に設定しなくても大丈夫です）
チェックボックス：どの場所に設定したタグを表示させるか。（自分で好きなとこをえらんでください。わからない人はとりあえず全選択でかまいません）
上記が入力すべき項目ですがわかりましたでしょうか？
次は僕が使用しているサンプルを紹介しますので、使用してみてください。ラベル名やアクセスキーは設定しなくてもいいので今回は省きます。
使用例
ボタン名： <alert>
開始タグ： <span class=”alert”>
終了タグ： </span>
ボタン名： <h3>
開始タグ： <h3>
終了タグ： </h3>
ボタン名： mokuji
開始タグ： <div class=”mokuji_wrapper”><h3>目次</h3><ul class=”mokuji”><li></li></ul></div>
終了タグ：空にしてます。
ボタン名：引用
開始タグ： <blockquote href=”” rel=”nofollow”>
終了タグ： <cite><a href=”” target=”_blank”></a></cite></blockquote>
こんな感じで使用しているのですが、あとは自分のお好みでCSSを書いてあげれば終了です。こちらで色々な見出しのCSSのサンプルを書いているのでCSSをコピーして、Addquicktagに任意のクラス名で登録して、そのクラス名でコピーしたスタイルをスタイルシートに書けばOKです。
記事を書く際によく使うものはここに追加して記事作成の効率化を図りましょう。
