スポンサーリンク

Cocoon CSSコピペで一発!アーカイブをかわいくカスタマイズ

Cocoon
スポンサーリンク
本ページにはプロモーションが含まれています。

Cocoonのカスタマイズにハマりすぎて抜け出すことができないタロです。

今回はCocoonアーカイブをお洒落にカスタマイズしてみたので、カスタマイズ用のCSSを紹介します。

お洒落な仕上がりになっているのでぜひ真似してみてください♩

スポンサーリンク

完成イメージ

下記のようなお洒落なアーカイブをCSSのコピペだけで実現します。

次に手順の確認をします。

アーカイブのカスタマイズ手順

カスタマイズ手順は以下の通り。

  • STEP01

    CSSのコピペ
    style.css にコードをコピペ

CSSを style.css にペタッ!と貼り付けるだけでOKです。

※サイドバーやフッターにアーカイブの設定は忘れずにしておいてください。

style.css にコードをコピペ

下記のCSSを style.css にコピペします。

アイコンは「Font Awesome 5 Free」を使っています。

/* ウィジェット アーカイブ
-------------------------------------------------- */
.widget_archive ul li {
  /*親カテゴリ*/
  padding-left: 10px;
  border-bottom: 1px dotted rgba(125, 125, 125, 0.2);
  /*カテゴリ間の下線種類*/
}

.widget_archive ul li a {
  /*リンク*/
  font-size: .95rem;
}

.widget_archive ul li a .post-count {
  /*記事数*/
  border: 1px solid rgba(221, 221, 221, 0.867);
  /*囲い*/
  border-radius: 5px;
  /*ボーダーの丸み*/
  font-size: .8em;
  /*数字サイズ*/
  padding: 1px 10px;
  /*囲いの大きさ*/
}

.widget_archive ul li a:before {
  /*アイコン*/
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  /*種類*/
  color: #ff9f67;
  /*色*/
  margin-right: 6px;
  /*アイコンと文字の距離*/
  font-weight: bold;
}

.widget_archive ul li a:hover {
  /*ホバー*/
  background: transparent;
  margin-left: 5px;
  /*hover時動く幅*/
  background-color: #efefef;
}

.widget_archive ul li a:hover .post-count {
  border-color: #ffb47f;
  /*囲線色*/
  background: #ff9f67;
  /*背景色*/
  color: #fff;
  /*文字色*/
  transition: .4s;
  /*変化スピード*/
}

CSSのコピペ後はアーカイブにCSSが適用されているか確認してください。

読むな危険!Cocoon カスタマイズを一挙公開中

このブログでも実装しているCocoonカスタマイズを大公開!!

デザインには正解がないためやればやるほど沼にハマってしまいます。

ですので、Cocoon ユーザーは絶対に読まないでください。

タイトルとURLをコピーしました