【Cocoon】サイドバーをカスタマイズしてみた| カッコ良さ倍増

【Cocoon】サイドバーをカスタマイズしてみた カッコ良さ倍増

今回はWordPressの無料テーマ「Cocoon」のサイドバーをイジってみたよ。
CSSは初心者にとってハードル高いけど、基本はコピペでもOK!
あなたのサイドバーをちょっとだけオシャレにしてみてね

☑ 記事の内容

  • サイドバーの見出しをカスタマイズする
  • サイドバーのカテゴリーをカスタマイズする
  • サイドバーのプロフィールをカスタマイズする
  • サイドバーにあなたのツイートを表示する

今回は当ブログのサイドバーのデザインカスタマイズを紹介します。

私は基本的には他サイトをパク・・・参考にして、自分好みに微調整するスタイルでやってます。

参考にしてみて下さい。

サイドバーの見出しをカスタマイズ

まずはサイドバーの見出しから。

下の画像は何もカスタマイズしていない状態です。

枠内の上下幅が大きめで、少しスタイリッシュさに欠ける印象を受けます。(好みです)

(背景色は「Cocoon設定」→「全体」→「サイトキーカラー」が反映されています)

Cocoonサイドバー1(見出しカスタマイズ前)
図1. Cocoonサイドバー1(見出しカスタマイズ前)

次の画像はカスタマイズ後のもの。

文字や枠の大きさを調整しています。

文字も中央寄せにし、シュッとした印象になりました。

Cocoonサイドバー2(見出しカスタマイズ後)
図2. Cocoonサイドバー2(見出しカスタマイズ後)

このような『サイドバーの見出しのカスタマイズ』は以下のCSSコードを使用しています。

WordPressホーム画面から「外観」→「カスタマイズ」→「追加CSS」を開き、以下のコードをコピペすればOKです。

/***********************************
** サイドバーの見出しデザイン
***********************************/
.sidebar h3 {
    background: #302833;/* 黒紅 */
    font-size: 1.1em;
    letter-spacing: 2px;/* 文字間隔 */
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 0;
    text-align: center;/* 中央寄せ */
    font-weight: bold;/* 太字 */
}

.sidebar h3::before {
    left: 0;
}
.sidebar h3::after {
    right: 0;
}

ちなみに、私はwebエンジニアではないのでCSSやHTML初心者です。

基本的に他のブログで公開されているものをコピーして、自分のイメージに合うよう調整しました。

この『サイドバーの見出し』で参考にしたのはDICEさん(@web_ashibi)の運営する『WEB-ASHIBI』です。

【Cocoon】サイドバーの見出しデザインをカスタマイズ

WEB-ASHIBI

また、背景色(background)については『原色大辞典』のコードを参考にしました。

原色大辞典

サイドバーのカテゴリーをカスタマイズ

次にサイドバーに表示している「カテゴリー」。

下の画像は何もカスタマイズしていない状態です。

Cocoonサイドバー3(カテゴリーカスタマイズ)
図3. Cocoonサイドバー3(カテゴリーカスタマイズ)

各カテゴリー間の幅もあり、境界線が分かりにくく冗長な印象をうけます。

そこでカテゴリー間の幅を狭め、親カテゴリーに境界線を、親子カテゴリーの左にそれぞれ行頭記号を入れるカスタマイズをしました。

Cocoonサイドバー4(カテゴリーカスタマイズ後)
図4. Cocoonサイドバー4(カテゴリーカスタマイズ後)

少し狭いかな~とも感じますが、個人的にはこの「窮屈なかんじ」が気に入ってます。(ユーザビリティ悪いかも?)

コード内に出てくる「widget_categories」を「widget_archive」にすると、サイドバーにアーカイブがあれば同じようにカスタマイズを適用できます。

この『サイドバーのカテゴリー』で参考にしたのもDICEさん(@web_ashibi)の運営する『WEB-ASHIBI』です。

【Cocoon】サイドバーのカテゴリーのデザインをカスタマイズ

WEB-ASHIBI

この人のブログで大抵のカスタマイズは解決できます。

ちなみに、当ブログでは「記事数」を非表示にしているので、リンク先コードの22行目にある「記事数用のコード」は反映されていません。

サイドバーのプロフィールをカスタマイズ

プロフィールのSNSボタン周りをカッコよくします。

カスタマイズ前は下の画像のように、ボタンがモノクロで味気ないです。

Cocoonサイドバー5(プロフィールカスタマイズ前)
図5. Cocoonサイドバー5(プロフィールカスタマイズ前)

続いて、下の画像がカスタマイズ後のもの。

Twitterボタン(私のTwitterプロフィールにリンク)がオシャレに変身しています。

私はTwitterしかSNSをしていませんが、FaceBookやInstagramのユーザーであれば、それらへのオシャレなリンクボタンも設置できます。

Cocoonサイドバー6(プロフィールカスタマイズ後)
図6. Cocoonサイドバー6(プロフィールカスタマイズ後)

そして、皆さんの予想通り『サイドバーのプロフィール』もDICEさん(@web_ashibi)の運営する『WEB-ASHIBI』を参考にしています。

【Cocoon】プロフィールボックスをSANGO風にカスタマイズ

WEB-ASHIBI

サイドバーにあなたのツイートを表示

あなたがTwitterを運用しているなら、Twitterのあなたのタイムラインをサイドバーに表示しときましょう。

「お、この人ブログだけじゃなくTwitterでも良いこと言ってるやん」となり、あなたのフォロワー(ファン)が増える。。。かもしれません。

このカスタマイズを行うと下の画像のようにサイドバーに表示できます。(というか、サイドバー見てくれた方が早いです)

Cocoonサイドバー7(ツイートを埋め込む)
図7. Cocoonサイドバー7(ツイートを埋め込む)

この『サイドバーのツイート埋め込み』で参考にしたのは創kenさん(@souken_blog)の運営する『創kenブログ』です。

Twitterタイムラインの埋め込みとデザインカスタマイズの方法

創kenブログ

サイドバーにツイートを埋め込むなら、ツイートしなきゃ見栄えが悪いですね(そんなことない?)

個々人のブログ戦略もありますが、TwitterなどのSNSで記事を拡散するのは、私のような弱小ブログにおいてはPV増に効果的です。

ぜひTwitterも活用してみて下さい。

【Twitter】あなたは使いこなせてる? ツイッターの機能11選
Twitterはいろんな機能があって良く分からない・・・どうやって使えばいいんだろ?こんな疑問に、同じくTwitter初心者である ユウ(...

サイドバーをカスタマイズしてみた:まとめ

今回は当ブログで使用しているサイドバーのカスタマイズを紹介しました。

ほとんど他サイトを参考にしたものですが、それっぽいサイドバーになり満足しています。

ちょくちょくカスタマイズして、また記事を書きたいと思ってるので、お楽しみに~

【ブログ】Twitterへのリンクを貼るコード| ブログ⇔Twitterの相互運用
ブログ記事の冒頭に、筆者の自己紹介とあわせてTwitterへのリンクを貼っていますよね。本記事では、そんな『Twitterへのリンクの貼り方』を紹介しています。いくつか注意点もありますが、コピペするだけでツイッターへのリンクを作成できるので、ぜひ使ってみてください。

コメント