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

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

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

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

サイト内回遊率を補助するサイドナビ

回遊率はとても大事です。コツコツ頑張って書いている記事。何かのきっかけで訪れてくれた方に、もっとたくさんの記事を読んでもらえたら嬉しいですよね。

回遊率については、記事下に表示される「関連記事」や「関連タグ」なども重要だと思いますが、いざ「このサイトに興味をもったぞ」と思ってもらった時に、どこからアクセスしたら希望しているページに辿り着けるのか を、わかりやすく示せる事がとても重要だと思っています。

また、常に読者の目線に触れる場所なので 自分のPRしたいこと(私の場合は右上のポートフォリオサイトへのリンクなど)を設置するのにも 効果がある場所です。

サイドナビのメニューバーをカスタマイズ

まずは、サイドナビのメニューバー(以後サイドバーと表記)のデザインを、自分の好みに変更しました。

↓テキスト前のアスタリスク(*)が 地味なコダワリ
サイドバー画像

 

Cocoonテーマでの サイドバーのclassセレクタは、#sidebar h3 です。追加したCSSは下記の通りです。

#sidebar h3{
font-size: 1.0em;
background: #222222; /*背景色*/
padding: 0.5em;/*文字周りの余白*/
color: white;/*文字を白に*/
border-radius: 0.3em;/*角の丸み*/
letter-spacing: 0.2em;/*文字間*/
}
#sidebar h3:before {
content: ‘*’;
color: #f9f6ef;
margin-right: 3px;
}
メニュー前に共通の記号を入れたり、画像を挿入するのに #sidebar h3:before を用いると、カスタマイズ幅がぐぐっと広がります。

↓以前も紹介した「サルワカ」さんのページが 大変参考になります!

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

テキストウィジェットを活用する

上でもちょろっと触れましたが、私は右上の一番目立つ場所に 自分の作品アピールも兼ねたwebポートフォリオのウィジェットを配置しています。

これは、WordPress内の「ウィジェット」で「テキスト(PC用)」の部分に埋め込みコードを配置して表示しています。

私がポートフォリオとして利用している クリエイターズバンク さんには、「マイページ」の中に「ウィジェット」というページがあり、簡単に設置用の埋め込みコードが発行出来るようになっています。

クリエータズバンクウィジェット

上画像の埋め込みコードを発行する」ボタンを押して、表示されたコードをまるっとコピーし、「テキスト(PC用)」にペーストすれば完成です。簡単ですね!

同じ方法で、TwitterやFacebookなどのウィジェット用パーツも設置できると思います。

試行錯誤は続く

その他は、主にWordPress内の「ウィジェット」で表示するウィジェットを選択したり 順番を入れ替えたりでカスタマイズしています…が、まだまだ試行錯誤の連続です…。

個人的に、ヘッダーとフッターはなるべくシンプルなものが好みなのですが、Cocoonテーマはレスポンシブデザインゆえ、サイドナビの情報量が多いと スマートフォンで見た読者の方のスクロールが長くなってしまうのではないか という懸念があります。

今後も更新を続けていって情報量が増えて来たら、フッターに一部のメニューを移動させることも考えた方がいいかもしれません。

その時にはまた、更新記事が書けたらなあ、と思っています。

コメント