WordPressのテーマには、CSSファイルにさまざまな”class”属性や”id”属性が用意されています。

これらをどう活用するかが美しいサイトを作っていくポイントになるようです。

特に、有料テーマを購入した場合、これらを活用しないと宝の持ち腐れになってしまします。

例えば、前の記事でご紹介したように、この賢威ではさまざまなアイコンなどが用意されています。

賢威6.0アイコン表示

しかし、このような場合、いちいちタグを手書きで修正しなければなりません。

例えば、上の画像の一番上の場合、ソースに下記のように直接書かなければならず、とても面倒です。

<p class=”caution1″>先頭にCHECK！という画像が付いた状態で表示されます。</p>

このような手間を大幅に軽減してくれるのが「AddQuicktag」です。

「AddQuicktag」のインストール方法

• 「プラグイン」－「新規追加」を選択します。
• 「AddQuicktag」で検索します。
• 検索結果に表示された「AddQuicktag」の「今すぐインストール」をクリックします。
• 「プラグインの有効化」をクリックします。
• ダッシュボードの「設定」の中に「AddQuicktag」という項目が表示されていれば完了です。

AddQuicktag

「AddQuicktag」の設定方法

• 「設定」－「AddQuicktag」を選択します。

AddQuickTag設定画面

• 「ボタン名」「ラベル名」には自分で区別しやすい名称を記入します。
• 「開始タグ」「終了タグに登録したいタグを入力します。

※下記で紹介した記述例の場合

「賢威6.0」の”class”属性を有効活用してアイコン・ランキング・チェックリスト表示する方法

<p class=”caution1″>先頭にCHECK！という画像が付いた状態で表示されます。</p>

「開始タグ」<p class=”caution1″>に「終了タグ」に</p>を入力します。

• 必要に応じ、「アクセスキー」「順番」を入力します。
• 「ビジュアルエディタ」や他のにチェックボックスにチェックを入れ保存します。

※この初期設定は面倒ですが、使いたいidやclass分を入力しておくと、後が楽になります。

「AddQuicktag」の使い方

• 「新規投稿」ページを開くと、ビジュアルエディタ上に「Quicktags」というプルダウンが追加されます。

※「Ultimate Tinymce」との組み合わせ

AddQuickTagプルダウンメニュー

• タグで囲みたいテキストを選択し、「Quicktags」からタグを選択します。

AddQuickTagビジュアルエディタ

• テキスト表示で確認すると、登録したタグで囲まれています。
• テキスト編集画面でも、登録したタグのボタンが表示されています。

AddQuickTagテキスト編集画面

スポンサードリンク

インターネット・コンピュータ ブログランキングへ