Cocoonのサイドバーをカスタマイズ!FontAwesomeアイコンを表示!

スポンサーリンク
cocoonのサイドバーカスタマイズCocoon
スポンサーリンク

WordPressテーマ「Cocoon(コクーン)」は、非常にシンプルでソースコードが見やすいため、カスタマイズがしやすいテーマです。

 

今回はCocoonの「サイドバー」のカスタマイズ方法についてご紹介します。カスタマイズの内容はサイドバーの見出しデザインの変更やFontAwesomeアイコンの表示です。

 

CSSをコピペするだけですので、初心者の方でも簡単にカスタマイズできます。参考になれば幸いです。

スポンサーリンク

カスタマイズ前の状態は?

まずはCocoonのデフォルトの状態です。

cocoonのデフォルトのサイドバーのデザイン

背景色が薄いグレーにして、文字があるだけの非常にシンプルなデザインですね。

 

このままでも十分見やすいとは思いますが、人気テーマ「Cocoon」なので、他のサイトのデザインと被ってしまうことが多々あると思います

そこで、このサイドバーのデザインをカスタマイズしたいと思います。

 

サイドバーの見出しのデザインをカスタマイズする

まずはサイドバーの見出しのデザインを変更します。

 

変更後のデザインイメージです。

cocoonのサイドバーの見出しを変更

 

以下のcssを「外観」>「テーマの編集」から「style.css」に貼り付けてください。

/* サイドバーの見出し変更*/
.sidebar h3  {
   padding: 5px 5px;
   border-bottom: solid 3px #cce4ff; /* 下線(右)の色*/
   position: relative;
   background-color: transparent; /* 背景を透明に*/
}

.sidebar h3 ::after {
   position: absolute;
   content: " ";
   display: block;
   border-bottom: solid 3px #5472cd; /* 下線(左)の色*/
   bottom: -3px;
   width: 30%; /* 左側の線の長さ*/
   left: 0px;
}

 

もっと違うデザインにしたいという方は、「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」から好きなデザインを選んで、波括弧”{ }”の中を書き換えてください。

beforeやafterの書き方がわからないという方はコメントにご質問をいただければと思います。

 

サイドバーにFontAwesomeのアイコンを表示する

続いて、サイドバーにFontAwesomeのアイコンを表示したいと思います。

 

変更後のデザインイメージです。

cocoonのサイドバーにfontawesomeアイコンを追加する

 

先ほどと同じく、以下のcssを「外観」>「テーマの編集」から「style.css」に貼り付けてください。

/* ウィジェットにAwesomeアイコンを表示*/
.widget h3::before { font-family: FontAwesome; font-size: 90%; vertical-align: middle; font-weight: normal; margin-right: 8px; }
.widget_popular_entries h3::before { content: '\f201'; } /* 人気記事 */
.widget_new_entries h3::before { content: '\f005'; } /* 新着記事 */
.widget_categories h3::before { content: '\f115'; } /* カテゴリー */
.widget_tag_cloud h3::before { content: '\f02c'; } /* タグクラウド */
.widget_search h3::before { content: '\f002'; } /* 検索 */
.widget_author_box h3::before { content: '\f007'; } /* プロフィール */

別のアイコンにしたい場合は「Search for Font Awesome」で探して、以下の「f」から始まる部分をコピーし、「content」の箇所に貼り付けてください。

cocoonのawesomeアイコンを表示する方法

 

上記以外のサイドバーのウィジェットを使っているという方は、コメントに質問をいただければ、表示方法についてご紹介します。

参考CocoonでサイドバーウィジェットのタイトルにFontAwesomeアイコンをつけるCSSカスタマイズ

 

Cocoonのサイドバーカスタマイズまとめ

Cocoonのサイドバーをカスタマイズしたソースコードについてまとめてご紹介します。

/* サイドバーの見出し変更*/
.sidebar h3  {
   padding: 5px 5px;
	border-bottom: solid 3px #cce4ff; /* 下線(右)の色*/
   position: relative;
	background-color: transparent; /* 背景を透明に*/
}

.sidebar h3 ::after {
   position: absolute;
   content: " ";
   display: block;
	border-bottom: solid 3px #5472cd; /* 下線(左)の色*/
   bottom: -3px;
	width: 30%; /* 左側の線の長さ*/
	left: 0px;
}
/* ウィジェットにAwesomeアイコンを表示*/
.widget h3::before { font-family: FontAwesome; font-size: 90%; vertical-align: middle; font-weight: normal; margin-right: 8px; }
.widget_links h3::before { content: '\f0c1'; } /* リンク */
.widget_popular_entries h3::before { content: '\f201'; } /* 人気記事 */
.widget_new_entries h3::before { content: '\f005'; } /* 新着記事 */
.widget_categories h3::before { content: '\f115'; } /* カテゴリー */
.widget_tag_cloud h3::before { content: '\f02c'; } /* タグクラウド */
.widget_search h3::before { content: '\f002'; } /* 検索 */
.widget_author_box h3::before { content: '\f007'; } /* プロフィール */

 

以上です。参考になれば幸いです。

Cocoon
スポンサーリンク

関連おすすめ記事

宜しければシェアをお願い致します
運営者プロフィール
jin

「お金、時間、そして家族を大事にしたい」と考えるパパに少しでもプラスとなるよう情報発信しています。睡眠アプリ(SleepMeister)愛用者。ルンバ、ブラーバ、食洗機などの時短家電大好き。

jinをフォローする
ぱぱたす(PaPa+)

コメント

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