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

Cocoonサイドナビのカスタマイズ Cocoonテーマ
カタアヤ
カタアヤ
こんにちは。カタアヤ(@_kara_po)です。

この記事では、前回に引き続き 私のした Cocoonのサイドナビのカスタマイズについて まとめたいと思います。

今回は、「カテゴリー」「アーカイブ」「タグクラウド」ウィジェットのカスタマイズと、実際に記入したCSSコードを紹介します。

サイドナビの見出しデザインのカスタマイズについては、こちらの記事をご覧ください。

Cocoonのサイドナビをカスタマイズしてみました②
こんにちは。カタアヤ(@_kara_po)です。 昨年 Cocoonのサイドナビカスタマイズ記事 を書いた時から、当ブログのサイドナビ...

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

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

表示情報が増え続けるサイドナビ

ブログの更新を続けていると、表示しなければならない情報が徐々に増えていきます。その中でもどんどん増え続けるのが、「カテゴリー」「アーカイブ」「タグクラウド」の3つじゃないでしょうか?

ヘッダーナビやサイドナビは 新しく来た人を導く案内板です。このブログの記事数はまだまだ少ないですが…

カタアヤ
カタアヤ
それでも… きれいに整理しておいて、いつ 誰が見ても わかりやすいブログにしたい!

ということで、今回は どんどん情報が増えて行く ということを前提に、なるべくシンプルで、コンパクトなウィジェットデザインになるよう心がけてみました。

Cocoonの「カテゴリー」をカスタマイズ

Cocoonのもともとの「カテゴリー」ウィジェットは とてもとてもシンプルです。だけど、何だか余白が広すぎる気がするのは私だけでしょうか?

文字の大きさも、記事内の文字より もっと小さくしても良い!それよりも、スクロールせずにたくさんの情報が一度に目に入って来て、親カテゴリーと子カテゴリーの区別がハッキリしたデザインにしたい!(ユーザビリティ的に小さい文字を使うのに消極的な意見があることも知っていますが、ここらへんはもう 個人的な好みです…

…ということで、いろいろ変更した現在のカテゴリーデザインがこちらになります。↓

Cocoonカテゴリーウィジェットのカスタマイズ
カテゴリーメニューのマークは、大好きな 歯車マークアスタリスク と これまた大好きな さんかくマーク を使用しています。ひとつひとつの記事…という小さな歯車が合わさって噛み合って、このブログを動かしていけたらいいな! とかいう思いが無駄に込められていたりします。(うわああポエムだ!

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

【Cocoon】サイドバーのカテゴリーのデザインをカスタマイズ
WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はサイドバーのカテゴリーウィジェットをCSSでカスタマイズしました。サイドバーの見出しデザインのカスタマイズはこちらの記事で紹介しています。子カテゴリーを設定している場合

実際に記入したCSSコード

細かい設定が多く、とても長くなってしまいました。どこがどのコードかわかりやすいように、変更箇所の説明テキストを太字にしています。

/**********************************
カテゴリーウィジェット
*********************************/
/*親カテゴリ用のコード*/
.widget_categories ul li a{
color: #222222;/*文字色*/
text-decoration: none;
display: block;
padding: 0px;/*上下余白*/
padding-right: 6px;
padding-left: 6px;
border-top: 1px dotted #cccccc; /*上部にボーダーを引く*/
font-size: 16px;/*文字サイズ*/
}

/*親カテゴリのボックス*/
.widget_categories ul li a:first-child{
border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}
.widget_categories ul li a:last-child {
border-bottom: 1px dotted #cccccc; /*最後の親カテゴリは下部ボーダーを引く*/
}

/*親カテゴリアイコン*/
.widget_categories ul li a:before{
font-family:Fontawesome;
content:”\f069″;/*アイコン種類*/
color:#222222;/*アイコン色*/
margin-right:6px;/*アイコンと文字の距離*/
}

/*記事数用のコード*/
.widget_categories ul li a .post-count {
display: block;
float: right;
background: #ede6d6;/*背景色*/
color: #545454;/*文字色*/
padding: 0 1em;
font-size: 13px;
margin-top: .2em;
border-radius: 4px;
}

/*子カテゴリ用のコード*/
.widget_categories ul li ul li a {
color: #222222;/*文字色*/
text-decoration: none;
padding: 0 6px;
display: block;
border: none;
}

/*子カテゴリのボックス*/
.widget_categories ul li ul {
border-bottom: 1px dotted #cccccc;/*子カテゴリは下部ボーダー*/
}
.widget_categories ul li ul a:last-child {
border-bottom: none; /*最後の子カテゴリはボーダーを消す*/
}

/*子カテゴリアイコン*/
.widget_categories ul li ul li a::before {
font-family:Fontawesome;
content:”\f0da”;/*アイコン種類*/
color:#222222;/*アイコン色*/
font-weight:normal;
margin-right:6px;/*アイコンと文字の距離*/
}

/*記事数のマウスホバー時*/
.widget_categories ul li a:hover .post-count {
background: #cccccc;
color: #222222;
transition: 0.5s;
}

頻繁にサイトに訪れてくれていた人が居ればわかると思いますが、/*親カテゴリのボックス*/内の 「最初 or 最後 の親カテゴリ」という指定方法があると知るまでは、理想のデザインにするために 色々迷走しておりました…。

点線ボーダーを引いている ということで、余白関係は思いっきり狭くしてあります。

「うぇぶあしび」さんの元のコードは、マウスホバー時(リンクにポインタを当てているけど、クリックしていない状態のこと)に 文字と背景色がふわ~っ と変わって めちゃくちゃカッコイイ のですが、他の場所との統一感を出すために、それ系のコードは泣く泣く削除いたしました。

/*記事数のマウスホバー時*/の変化までの秒数や色味は、Cocoonのもともとのホバー時のイメージに近くなるように設定してみました。カスタマイズする方は、是非 参考にしてみてください。

Cocoonマウスホバー時のカスタマイズ
(左:上記CSSコード設定 右:Cocoonデフォルト設定)

Cocoonの「アーカイブ」をカスタマイズ

次はCocoonの「アーカイブ」設定です。一昔前は「カレンダー」と呼ばれていた気がしますが、いつ頃から「アーカイブ」と呼ばれるようになったのでしょうか?

私は好きになってしまったブログは、時系列順にじ~~っくりと読みこむのが好きなので、

マンボウさん
マンボウさん
うわあ…やめなよ そのストーカー気質…
カタアヤ
カタアヤ
うるさいですね

最近あまり見かけなくなってきた気がして 少し寂しいです。私と同じ気質の人が居るかはわかりませんが、ウチのブログでは なるべく残していきたいなあと考えています。

カテゴリーとデザインを揃えてみた、現在のアーカイブのデザインです。↓

Cocoonアーカイブウィジェットのカスタマイズ
↓アーカイブのclassセレクタは「PLUSPLUS」さんの下記記事を参考にしています!ありがとうございます!↓

cocoonのサイドバーにあるカテゴリ・アーカイブをカスタマイズ!
以前サイドバーのカスタマイズ記事を書きました。若干飽きてきたので(笑)、カテゴリとアーカイブのウィジェットを中心にカスタマイズしなおしました。こっちの方が好みだという方はこちらをどうぞ!コチラの記事にCocoonのカスタマイズ記事をまとめて

実際に記入したCSSコード

基本的にカテゴリーと一緒ですが、子カテゴリーと記事数に関する表記を削ったので、コードもすっきりしました。

/**********************************
アーカイブウィジェット
*********************************/
/*親カテゴリ用のコード*/
.widget_archive ul li a{
color: #222222;
text-decoration: none;
display: block;
padding: 0px;
padding-right: 6px;
padding-left: 6px;
border-top: 1px dotted #cccccc; /*上部にボーダーを引く*/
font-size: 16px;
}

/*親カテゴリのボックス*/
.widget_archive ul li a:first-child {
border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}
.widget_archive ul li a:last-child {
border-bottom: 1px dotted #cccccc; /*最後の親カテゴリは下部ボーダーを引く*/
}

/*親カテゴリアイコン*/
.widget_archive ul li a:before{
font-family:Fontawesome;
content:”\f069″;/*アイコン種類*/
color:#222222;/*アイコン色*/
margin-right:6px;/*アイコンと文字の距離*/
}

私はアーカイブに記事数を表示するつもりが全く無いのでこれで良いのですが、アーカイブにもカテゴリー同様の記事数を表示したい方は、カテゴリーの /*記事数用のコード*/ まるっとコピーして、「.widget_categories」の部分を「.widget_archive」に書き換えれば大丈夫だと思われます。

マンボウさん
マンボウさん
このブログだと 記事数表示なんてしたら、一ヶ月の更新が少ないのバレバレだもんね…
カタアヤ
カタアヤ
うるさいです

Cocoonの「タグクラウド」をカスタマイズ

次は「タグクラウド」の設定です。調べ物などでネットを徘徊している時、この「タグクラウド」を目立つ所に置いてくれているサイトさんは すごくありがたいですよね!

…ということで、遅ればせながら ウチのブログでも導入してみました。(最初のころ何も考えずにタグを作っていたので、いつかちゃんと整理たいです…

タグ全体をギュッとまとめて、背景色と同化させ タグひとつひとつが悪目立ちしないようにしています。角丸の比率は サイドメニューと同じにして、全体のデザインと統一感がでるようにしました。

Cocoonタグクラウドウィジェットのカスタマイズ

デザインは、またまた「うぇぶあしび」さんのコードを参考にさせて頂きました!

↓わかりやすいカスタマイズ記事がたくさん! ありがとうございます!↓

【Cocoon】タグクラウドのデザインをカスタマイズ
WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はサイドバーのタグクラウドのデザインを少しカスタマイズしました。サイドバーの見出し部分のカスタマイズはこちらの記事で紹介しています。タグクラウドのデザイン変更はけっこう簡

実際に記入したCSSコード

/**********************************
タグクラウドウィジェット
*********************************/
/*タグクラウドのコード*/
.tagcloud a {
background: none; /*背景を消す*/
border: 1px solid #cccccc;
border-radius: 0.3em; /*角の丸み*/
color: #545454; /*文字色*/
display: inline-block;
padding: 3px 10px;
text-decoration: none;
font-size: 13px;
margin: 2px;
flex: 1 1 auto;
justify-content: space-between;
}

/*タグクラウドアイコン*/
.widget_tag_cloud h3:before{
font-family:Fontawesome;
content:”\f02c”;/*アイコン種類*/
color:#ffffff;/*アイコン色*/
font-weight:normal;
margin-left:0.5em;/*アイコン左の余白*/
margin-right:0.2em;/*アイコンとタイトルの距離*/
}

こちらもホバー時のコードは 削除しています…。ホバー設定、とてもカッコイイので、いつか使ってみたいです。

サイドナビカスタマイズのまとめ

…ということで、サイドナビのカスタマイズは これでひと段落になります。

なるべくコンパクトにわかりやすく書きたかったのですが、結局 記事③まで行ってしまいました。

サイドナビのデザインは、最初に「こうしたい!」といったビジョンが自分の中でハッキリしていたのですが、なかなか自分の技術(…というか知識?)が追いつかず、一時はもう諦めようと思いました。

…ですが、諦めずに何度も何度も検索して回って良かったです!!

このサイトは私のイメージ通りだ!」という記事を発見した時は、本当に嬉しかったです。そして、惜しむことなく ご自身のカスタマイズ内容を載せてくれているブロガーの皆様には、本当に感謝しかありません!

なので、私のカスタマイズ内容も いつかどこかの誰かの為になるといいなあ… へなちょこですが これからも少しずつ発信していけたらなあ、と思っています。

サイドナビに悪戦苦闘しながら、他の部分もちょこちょこカスタマイズしてきたので(息抜き?!)今後はそっちもどんどんまとめていきたいです。その前に少し「暮らし」カテゴリーでも何か書きたいかな?

カタアヤ
カタアヤ
それでは、最後まで読んで頂き ありがとうございました!

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

 

コメント