Cocoon CSSでアーカイブ欄をカスタマイズ

Cocoonは非常に便利なWordPressのテーマで、そのまま使用しても非常にお洒落ですっきりしたデザインに仕上がっています。これにさらに自分の個性を少しだけプラスするだけで、更にカッコイイサイトにすることができます。今回はCocoonテーマのアーカイブ欄をカスタマイズする方法を紹介します。

記事数に枠をつけてみる

通常は記事数の数字が記載されているだけですが、この数字に囲をつけてみましょう。次のコードをCSSに追加（コピー＆ペースト）します。

.widget_archive ul li a .post-count {
  padding: 1px 12px;/*枠の大きさ*/
  font-size: 0.9em;/*フォントサイズ*/
  border-radius: 6px;/*枠の角の半径*/
  border: 1px solid rgba(0, 255, 0, 1.0);/*枠線の赤緑青の色指定、透明度*/
}

ナビゲーションメニューの[外観]の中の[カスタマイズ]をクリックします。

下のような画面になったら、メニューから[追加CSS]をクリックします。

なんらかのカスタマイズをしている場合は、カスタマイズ用に記述したCSSコードが表示されます。何もカスタマイズしていない場合は、何も表示されません。

先ほどのコードをコピー＆ペーストすると、アーカイブ欄の記事数に枠が表示されるようになります。

マウスを重ねると項目をずらして着色させる

アーカイブの項目にマウスを重ねると、項目をずらして着色されるようにしてみましょう。ナビゲーションメニューの[外観]の中の[カスタマイズ]をクリックし、メニューから[追加CSS]をクリックします。

次のコードをCSSに追加（コピー＆ペースト）します。アーカイブの項目にマウスを重ねると、項目がずれてオレンジに着色されます。

.widget_archive ul li a:hover {
  background-color: #ffcc55;/*背景色*/
  margin-left: 8px;/*ずらす量*/
}

参考：CSSの種類（プロパティ）

マージンとパディング

マージンとはボックスの外側の余白のことで、パディングとはボックスの内側の余白のことです。