公式プラグイン「タグ」で現在表示されているタグをハイライト

更新
2013年03月04日(月)

公式プラグイン「タグ」をコピペでカスタムし、現在表示されているタグをハイライトする方法です。当サイト作者が作成したcustomtemplate と customtemplate-3c (ver1.5.0)についてです。

カスタム前後の比較

  1. コピペでOKです。

  2. 仕上がりはこんな感じです。タグのcustomtemplateを表示している場合です。

    130303plugin-tag-1.png

メリット

  1. 現在表示されているタグの背景色がハイライトされ、読者のユーザビリティ向上を期待できます。

プラグインのHTMLを編集

  1. 管理画面でプラグインの設定をクリックします。

    130303plugin-recent-1.png
  2. 切り替わった画面にある【HTMLの編集】をクリックします。

    130303plugin-tag-2.png
  3. テキストボックスが展開され、次のコードが表示されます。

    <p class="plugin-tag" &align>
      <!--ctag-->
        <a href="<%ctag_url>"><%ctag_name></a>&nbsp;
      <!--/ctag-->
    </p>
    130303plugin-tag-3.png
  4. 次のコードに変更します。下図で反転している部分が変更後です。

    <p class="plugin-tag tell-this-page" &align>
    <!--ctag-->
    <a href="<%ctag_url>" class="tag-<%ctag_name>"><%ctag_name></a>&thinsp;
    <!--/ctag-->
    <!--カスタム参考ページ:http://customtemplate.blog112.fc2.com/blog-entry-98.html-->
    </p>
    130303plugin-tag-4.png
  5. カスタマイズ(HTMLを編集する場合はこれを選択してください)を選択し、 設定 をクリックで完了です。

    130303plugin-tag-5.png

その他のタグにも背景色を設定

  1. 上記コードの代わりに次のコードに変更します。

    <p class="plugin-tag entry-utility tell-this-page" &align>
    <!--ctag-->
    <a href="<%ctag_url>" class="tag-<%ctag_name>"><%ctag_name></a>&thinsp;
    <!--/ctag-->
    <!--カスタム参考ページ:http://customtemplate.blog112.fc2.com/blog-entry-98.html-->
    </p>
  2. 文字が若干小さくなり、他のタグにも背景色がつくようになります。

    130303plugin-tag-6.png

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)