公式プラグイン「カテゴリ」にサムネイルを表示、コピペでOK

公式プラグイン「カテゴリ」をコピペでカスタムし、サムネイルを表示する方法です。当サイト作者が作成した次のテンプレートについてです。

カスタム前後の比較

  1. コピペでOKです。

  2. 仕上がりはこんな感じです。

    130331plugin-cate-eyec-1.png
  3. 愛猫チェリッシュでは、実際の様子も確認できます。

メリット

  1. カテゴリごとにサムネイル画像を設定できます。ただし、「category-1s.jpg」というような名前の画像ファイルをアップロードしている場合に限ります。

  2. 各サムネイルをホバーすると、そのカテゴリ名が表示されます。

プラグインのHTMLを編集

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

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

    130331plugin-cate-eyec-2.png
  3. 展開されたテキストボックス内のコードすべてを次のコードに変更します。

    <ul id="plg-c" class="main_menu ofh">
    <!--category-->
      <!--category_sub_begin-->
      <!--/category_sub_begin-->
      <!--category_nosub-->
        <li class="main_list" &align>
      <!--/category_nosub-->
      <!--category_parent-->
        <li class="main_list" &align>
      <!--/category_parent-->
      <!--category_sub_hasnext-->
        <li class="sub_list" &align>
      <!--/category_sub_hasnext-->
      <!--category_sub_end-->
        <li class="sub_list_end" &align>
      <!--/category_sub_end-->
    <a id="plg-c<%category_no>" name="plg-c<%category_no>" href="<%url>blog-category-<%category_no>.html" title="<%category_name>"><script type="text/javascript">eyecatcher(<%category_no>,'c',100,100);</script><span class="plg-c-name ofh"><%category_name> (<%category_count>)</span></a>
      <!--category_nosub-->
        </li>
      <!--/category_nosub-->
      <!--category_sub_hasnext-->
        </li>
      <!--/category_sub_hasnext-->
      <!--category_sub_end-->
        </li>
      <!--/category_sub_end-->
    <!--/category-->
    </ul>
    <!--カスタム参考ページ:http://customtemplate.blog112.fc2.com/blog-entry-116.html-->
    <script type="text/javascript">document.getElementById('plg-c').className='main_menu ofh plg-c-ec';</script>
  4.  設定 をクリックします。

このページに関して

  1. 予告なく変更する場合があります。

  2. このページに限りませんが、記載内容の正確性は保証いたしかねます。

  3. 今後のテンプレート改訂時には上記説明と相違があるかもしれません。ご了承願います。

以上です。

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