公式プラグイン「最新記事」「最新コメント」の各リストの装飾を編集

テンプレートのCSS編集でプラグイン内リストの装飾をカスタムする方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. テンプレートのCSS編集でプラグイン「最新記事」や「最新コメント」内の各リストの装飾を編集します。

  2. テンプレートのHTMLやプラグインは編集しません。

Before and After

  1. 各リストに区切りを入れるために点線などで装飾する例を挙げます。

  2. 下図は、テンプレートのバージョンごとの比較です。左は過去バージョン、中央が2012年10月20日現在の最新バージョン、右がカスタム後です。

    121020-css-sidebar-li-7.png
  3. あくまでも一例ですので、点線を破線にしたり、線の色を濃くしたり薄くしたりもできます。

テンプレートのCSSを編集

テンプレートやバージョンにより異なります。

customtemplate と valid-seo-2c (2カラムのテンプレート)

  1. customtemplate ver1.3.0valid-seo-2c ver1.2.0 は次のコードを探します。下図で反転している部分です。

    #sidebar li{margin-left:1em;}
    121020-css-sidebar-li-1.png
  2. customtemplate ver1.2.0valid-seo-2c ver1.1.2は次のコードを探します。下図で反転している部分です。

    #sidebar li{list-style-type:none;margin-left:1em;}
    121020-css-sidebar-li-2.png
  3. 次のコードに変更します。変更後は下図のようになります。

    #sidebar li{margin-left:1em;padding-bottom:3px;margin-bottom:3px;border-bottom:1px dotted #bbb;}
    121020-css-sidebar-li-3.png

valid-seo-3c (3カラムのテンプレート)

  1. valid-seo-3c ver1.2.0 は次のコードを探します。下図で反転している部分です。

    #sidebar li,#sidebar2 li{margin-left:1em;}
    121020-css-sidebar-li-4.png
  2. valid-seo-3c ver1.1.2 は次のコードを探します。下図で反転している部分です。

    #sidebar li,#sidebar2 li{list-style-type:none;margin-left:1em;}
    121020-css-sidebar-li-5.png
  3. 次のコードに変更します。変更後は下図のようになります。

    #sidebar li,#sidebar2 li{margin-left:1em;padding-bottom:3px;margin-bottom:3px;border-bottom:1px dotted #bbb;}
    121020-css-sidebar-li-6.png

ヒント

  1. 変更後のコード内にある dotteddashed にすれば破線になります。#bbb#888 などにすれば濃くなります。

今後のテンプレート改訂時には

  1. customtemplateはver1.3.1以降、valid-seoシリーズはver1.2.1以降は、このページで述べたカスタムを施しておく予定です。

以上です。

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