Cocoonのサイドナビをカスタマイズしてみました②

Cocoonのサイドナビカスタマイズ Cocoonテーマ

こんにちは。カタアヤ(@_kara_po)です。

昨年 Cocoonのサイドナビカスタマイズ記事 を書いた時から、当ブログのサイドナビもかなり変化してきました。自分的には見た目のデザイン性と、ブログにはじめて来る方にもわかりやすいナビゲーションを目指してカスタマイズを施しているつもり…です。

この記事では 前回 ⇒ 現在 の変更箇所と、新たにCocoonテーマに追加したCSSコードなどを紹介していきたいと思います。

Cocoonとはわいひら様が作成・公開している超有能なWordPress無料テーマです!↓

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

↓以前の私のカスタマイズについては、過去記事をご覧ください。↓

Cocoonのサイドナビをカスタマイズしてみました
毎日暑いですね。暑いのを言い訳に、ますますひきこもり気味のカタアヤです。 今日は、Cocoonテーマのサイドナビ(右側のメニュー部分)につ...

 

サイドナビ全体の背景を透過

まず最初にした変更ですが、サイドナビ全体の背景を透過して「記事部分」と「その他ナビゲーション」の区別がつきやすくなるよう 白かったサイドナビの背景を透過しました。

実際に記入したCSSコード

/*サイドバー全体*/
.sidebar{
background:transparent;/*背景色透明*/
}
.widget-sidebar h3{/*サイドウィジェットタイトル*/
background: #222222; /*背景色*/
font-size: 1.0em;/*文字サイズ*/
color: #ffffff;/*文字を白に*/
padding: 0.5em;/*文字周りの余白*/
border-radius: 0.3em;/*角の丸み*/
letter-spacing: 0.2em;/*文字間*/
}

以前のデザインでは ウィジェットメニューの頭に共通の「(アスタリスク)」を入れていましたが、メニュー毎に個別でアイコンを設定することになったので「#sidebar h3:before~」の表記は削除しました。

Cocoonの検索窓をカスタマイズ

現在のkara*poの検索窓のデザインはこのようになってます。

Cocoon検索窓のカスタマイズ

デフォルトのものより 少しスッキリした印象になったのではないでしょうか?

↓「リスブロ」さんの下記記事を参考にさせていただきました!ありがとうございます!↓

【Cocoon】検索窓をオシャレにカスタマイズ!
このサイトのように角の丸い検索バーを実装するCSSカスタマイズを紹介します。下記CSSをコピペしてください。追加方法・適用されない場合は下記記事を参照してください。.search-box{ margin: 1em;}.search-edit

実際に記入したCSSコード

/**********************************
検索BOXカスタマイズ
*********************************/
.search-box{
margin: 1em;
}
.search-edit{
height: 2em;
border-radius: 0.3em;/*角の丸み*/
}
.search-submit{
line-height: 0;
top: 0;
bottom: 0;
}
.search-edit:focus{
outline: none;
border-color: #f6aa55; /* フォーカス時の枠色 */
}

角の丸みは、メニューや見出しの丸みと同じ数値にして デザインに統一感が出るようにしています。フォーカス時の枠色も 当ブログのイメージカラーのひとつ・オレンジに変更しました。

 

ウィジェットメニューの頭に FontAwesomeアイコンをつける

Cocoonには「Font Awesome」というWebアイコンフォントが標準装備されています。これを利用して、各メニューに 見た目にもわかりやすいWebアイコンをつけることが出来ます。

Font Awesome

アイコンをつけると パッとイメージが伝わりやすいので、サイドメニューのように 雑多な情報が表示される箇所で使用するのは 非常に効果的だと思われます。

Font Awesome の設定・表示方法

ここで「Font Awesome」についてイチカラ説明するのは難し…どうにも文字数が足りないので、「Font Awesome」の仕組みから設定方法までとても丁寧に説明してくださっている あむちゃむ様の記事 を紹介いたします。カスタマイズの際、自分でもいろいろな記事を調べて回ったのですが、個人的に1番わかりやすかったです!

↓アフィリエイトについても 丁寧に説明してくださっているブログです!とても参考になります!↓

【Cocoon】Font Awesomeを使って可愛いアイコンをメニューに入れる手順
【Cocoonカスタマイズ】Font Awesomeを使って可愛いアイコンをメニュー(ナビゲーションバー)に入れる手順

↑で説明してくださっている通り、お手軽に使用したい方は Cocoonサイトの「外観」⇒「メニュー」からの変更が簡単でオススメです!

私は後半に述べられている 子テーマを使い CSSコードで記入する方法で表示してみました。

実際に記入したCSSコード

Cocoonウィジェットメニュー

/**********************************
人気記事ウィジェット
*********************************/
.widget_popular_entries h3:before{/*人気記事タイトルアイコン*/
font-family:Fontawesome;
content:”\f201“;/*アイコン種類*/
color:#ffffff;/*アイコン色*/
font-weight:normal;
margin-left:0.5em;/*アイコン左の余白*/
margin-right:0.2em;/*アイコンとタイトルの距離*/
}

Cocoonウィジェットメニュー

/**********************************
新着記事ウィジェット
*********************************/
.widget_new_entries h3:before{/*新着記事タイトルアイコン*/
font-family:Fontawesome;
content:”\f005“;/*アイコン種類*/
color:#ffffff;/*アイコン色*/
font-weight:normal;
margin-left:0.5em;/*アイコン左の余白*/
margin-right:0.2em;/*アイコンとタイトルの距離*/
}

Cocoonウィジェットメニュー

/**********************************
カテゴリーウィジェット
*********************************/
.widget_categories h3:before{/*カテゴリータイトルアイコン*/
font-family:Fontawesome;
content:”\f013“;/*アイコン種類*/
color:#ffffff;/*アイコン色*/
font-weight:normal;
margin-left:0.5em;/*アイコン左の余白*/
margin-right:0.2em;/*アイコンとタイトルの距離*/
}

Cocoonウィジェットメニュー

/**********************************
アーカイブウィジェット
*********************************/
.widget_archive h3:before{/*アーカイブタイトルアイコン*/
font-family:Fontawesome;
content:”\f161“;/*アイコン種類*/
color:#ffffff;/*アイコン色*/
font-weight:normal;
margin-left:0.5em;/*アイコン左の余白*/
margin-right:0.2em;/*アイコンとタイトルの距離*/
}

Cocoonウィジェットメニュー

/**********************************
目次ウィジェット
*********************************/
.widget_toc h3:before{/*目次アイコン*/
font-family:Fontawesome;
content:”\f0ca“;/*アイコン種類*/
color:#ffffff;/*アイコン色*/
font-weight:normal;
margin-left:0.5em;/*アイコン左の余白*/
margin-right:0.2em;/*アイコンとタイトルの距離*/
}

私がカスタマイズしたのは、以上になります。

どのメニューにどのアイコンを使うか… 選ぶのもとても楽しいと思いますので、それぞれ工夫して設定してみてください。(あまりに内容と掛け離れたアイコンを使うと、ユーザビリティが下がってしまうので あくまで内容とイメージが合うものをチョイスしてくださいね!)

 

さらに試行錯誤は続く

サイドメニューの中で、「目次」だけはスクロール追従するように設定してみました。(設定は「外観」⇒「ウィジェット」⇒「サイドバースクロール追従」から可能です。)…が、ネット上を見回しますと「人気記事」を設定している人が多いようで、私もそうした方が良いか…と悩んでいます。

また色々試しながら、より利用しやすい空間を目指してカスタマイズして行きたいと思います。

今回書ききれなかったのですが、表示するものが多い「カテゴリー」「アーカイブ」に横ラインを表示して  読みやすくなるよう 地味に工夫したりもしています。こちらはまとめるとまた長くなってしまいそうなので、また新しく 記事を書くつもりです。

↓良かったら、他のCocoonカスタマイズ記事も参考にしてみてください!↓

最後まで読んで頂き、ありがとうございました!

 

コメント