WordPressテーマ「Cocoon（コクーン）」は、非常にシンプルでソースコードが見やすいため、カスタマイズがしやすいテーマです。
今回はCocoonの「サイドバー」のカスタマイズ方法についてご紹介します。カスタマイズの内容はサイドバーの見出しデザインの変更やFontAwesomeアイコンの表示です。
CSSをコピペするだけですので、初心者の方でも簡単にカスタマイズできます。参考になれば幸いです。
カスタマイズ前の状態は？
まずは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のアイコンを表示したいと思います。
変更後のデザインイメージです。
先ほどと同じく、以下の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でサイドバーウィジェットのタイトルに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'; } /* プロフィール */
以上です。参考になれば幸いです。
コメント