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

Cocoon

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の種類(プロパティ)

マージンとパディング

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

プロパティプロパティの内容
marginボックスの4方向のマージンをまとめて設定
margin-bottom下側のマージンの設定
margin-left左側のマージンの設定
margin-right右側のマージンの設定
margin-top上側のマージンの設定
paddingボックスの4方向のパディングをまとめて設定
padding-bottom下側のパディングの設定
padding-left左側のパディングの設定
padding-right右側のパディングの設定
padding-top上側のパディングの設定
タイトルとURLをコピーしました