コンパクト月別アーカイブ(共有プラグイン)をCSSで装飾する方法

更新
2012年12月04日(火)

当サイト作者が作成したfc2blog共有プラグイン「コンパクト月別アーカイブ ver1.0.0」をCSSで装飾する方法です。

概要

  1. プラグイン内の一意のIDを基点にしてCSSで装飾をカスタムします。

  2. ブログ管理画面のCSS編集だけでカスタムできます。

テンプレートのCSSを編集

説明付きCSSコード

  1. 121129plugin-compact-monthly-archive-1.png

    装飾前の参考画像は左のとおりです。

  2. CSS編集の一番下あたりに、次のコードを追加します。追加後の参考画像を下に載せています。

    /*▼ プラグイン「コンパクト月別アーカイブ」の設定 開始 ▼ */
    
    /*年*/
    #plugin-compact-monthly-archive dt {
      margin-left:    0px;             /*プラグイン内の左端からの距離*/
      margin-bottom:  0px;             /*月部分との距離*/
      border-top:     1px dotted #aaa; /*上線*/
      border-bottom:  0px dotted #aaa; /*下線*/
      padding-top:    3px;             /*上線と年の距離*/
      padding-bottom: 0px;             /*下線と年との距離*/
    }
    #plugin-compact-monthly-archive dt:first-child {
      border-top:     0px;             /*一番上の年の上線を消す*/
    }
    
    /*1年ごとの月部分表示領域*/
    #plugin-compact-monthly-archive dd {
      margin-left:    5px;             /*プラグイン内の左端からの距離*/
    }
    
    /*各月ごと*/
    #plugin-compact-monthly-archive dl a {
      padding-right:  0px;             /*次の月との距離*/
    }
    
    /*著作権表示*/
    .plugin-customtemplate {
      color:#ccc;                      /*"plugin by"の文字色*/
    }
    
    /*
    ※ ★デフォルト設定の簡易解説★
    ※
    ※ 年に上線が表示される
    ※ ただし、一番上の年は上線を非表示にしている(IE6を除く)
    ※
    ※ ★カスタム例★
    ※
    ※ ・線の太さ
    ※ 1pxを3pxに変更すると文字通り3pxになる
    ※
    ※ ・線の種類
    ※ dotted → 点線
    ※ dashed → 破線
    ※ solid  → 実線
    ※
    ※ ・線の色
    ※ #aaa を 好きなカラーコードに変更する
    ※ 「カラーコード」で検索すると幸せになれる
    ※
    ※ ★cf. http://customtemplate.blog112.fc2.com/blog-entry-65.html ★
    ※
    */
    
    /*▲ プラグイン「コンパクト月別アーカイブ」の設定 終了 ▲ */
    121129plugin-compact-monthly-archive-2.png
  3. ニーズに応じて、CSSを適宜カスタムできます。

説明なしCSSコード

  1. 上記コードの説明部分を省き、CSSの書き方も短縮(ショートハンド)したコードは次のとおりです。

    /*pluginコンパクト月別アーカイブ用*/
    #plugin-compact-monthly-archive dt{margin:0;padding:0;border:0;border-top:1px dotted #aaa;}
    #plugin-compact-monthly-archive dt:first-child{border-top:0;}
    #plugin-compact-monthly-archive dd{margin-left:5px;}
    #plugin-compact-monthly-archive dl a{padding-right:0;}
    .plugin-customtemplate{color:#ccc;}
  2. 説明付きと説明なしの両方のコードを追加する必要はないです。どちらかのコードのみ追加します。

備考

  1. グローバルナビゲーションにコンパクト月別アーカイブを表示する場合は、次の記事が参考になります。

  2. 2012年11月29日に共有化申請、12月3日昼ごろには承認されていました。

以上です。

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