WordPressCocoon

【Cocoon】サイドバーのアーカイブでドロップダウンをカスタマイズ

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はリクエストいただいたので、サイドバーの月別アーカイブをドロップダウンにした場合のカスタマイズをやってみます。

ブラウザ特有のデザインをリセットして、シンプルな表示になるようにしました。

他のテーマでもCSSのセレクタ(idやclassなど)を変更するだけでそのまま使えます。ではやってみましょう!

Cocoonでサイドバーに月別アーカイブを表示

まずは念のためサイドバーの設定方法から紹介します。

管理画面のメニューから「外観>ウィジェット」を開いて、「アーカイブ」をサイドバーウィジェットなどに追加します。

今回はドロップダウンのカスタマイズなので、「ドロップダウン表示」のチェックを入れます。投稿数はお好みで。

「タイトル」の部分が見出しになりますが、見出しのカスタマイズは別記事で書いています↓

ドロップダウンのカスタマイズCSS

あとはCSSを追加するだけです。コードはこちら↓

#sidebar select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  border: 1px solid #333; /* ボーダーの指定 */
  border-radius: 40px; /* 角丸の指定 */
  padding: 6px 14px; /* 余白の指定 */
  font-size: 14px; /* 文字サイズ */
  color: #333; /* 文字色 */
}
#sidebar select::-ms-expand {
  display: none;
}
#sidebar .widget_archive {
  position: relative;
}
#sidebar .widget_archive::after {
  font-family: FontAwesome;
  content: '\f0d7'; /* アイコンの指定 */
  position: absolute;
  bottom: 0px; /* アイコンの位置 */
  right: 12px; /* アイコンの位置 */
  color: #333; /* アイコンの色 */
}

8行目の「border-radius: 40px;」の部分を削除すると四角になります。数字を小さくすると、四角に近い角丸にすることができます。

アイコンはFont Awesomeで表示しているので、21行目の「content: ‘\f0d7‘;」の赤字部分を変更すれば好きなアイコンにできます。

アイコンのコード確認はこちらから↓

Font Awesome Icons
Font Awesome, the iconic font and CSS framework

あとはカラーなどお好みで変更してくださいませ。ではまた〜♪

WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

  1. ひろひろ より:

    DICEさん、できました。
    本当に参考になりました。
    窓の大きさとか文字の位置や大きさを検索窓と同じように合わせたり、
    バックの色を変えたりと、少し時間は掛かりましたが、
    DICEさんのおかげでブログを作るのが楽しくなりました。
    ありがとうございました。

    PS) ところで、今までDICEさんがサイドに作ったfollow me、category、keyword等その全てがマウスホバーした際には色が変わったりする変化のある凄いものばかりですが、今回の検索窓の虫眼鏡の色が変わる設定はなくて少し寂しいなと思いました。いやいや今のままでもどこの検索窓よりもカッコイイですが。
    また色々学びのある記事の公開楽しみにしています。

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