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

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

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

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

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

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

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

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

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

【Cocoon】サイドバーの見出しデザインをカスタマイズ

...

web-ashibi.net

2018.04.22

ドロップダウンのカスタマイズ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

fontawesome.com

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