【ブログカスタマイズ奮闘記】Cocoonのサイドバー見出しデザインを変更

Cocoonカスタマイズ_サイドバー見出し Cocoonカスタマイズ

この記事にはプロモーションが含まれています。

デザインは大好きだけれど、HTMLやCSS、WordPressは初心者なわたし。たくさんつまづきながらWordPressでのブログカスタマイズに奮闘しています。

覚え書きがてら、カスタマイズした内容をまとめます。

WordPressのテーマは、シンプルな無料テーマ「Cocoon」を使用しています。

ご自由に真似していただいて構いませんが、あくまで初心者が試行錯誤しています。保証や賠償はいたしかねますし、アドバイスもたぶんできませんので、ご了承ください。

サイドバー見出しのデザインで気をつけたこと

うるさくないこと

このブログは2カラムなので、パソコンでブログを見る場合、記事本文とサイトバーが両方見えます。

最も集中してほしいのは記事本文。サイドバーは見た目がうるさくならないようにしました。

スマホでは1カラムなので、あまり関係ありません。

アルファベットオンリーでもOKなら、Webフォントを使いたい

わたしは、サイドバー(ウィジェット)の見出しは、英語だけでも良いかなと思っています。

日本語を読み書きする人を対象にしたブログなので、日本語のほうが親切なのは間違いありません。「Recent Posts」より「最新記事」のほうが、一瞬で意味がわかります。

ですが、たぶんサイドバーの見出しって、読めなくってもあまり支障ないと思うんですよね。たとえば「Written by」の意味がわからなくても、プロフィールが書かれているのは内容で伝わります。

アルファベットのみでも支障ない場所は、Webフォントが使えます!

Cocoonのサイドバー見出しにおけるclassセレクタ

わたしは、シンプルな無料のWordPress テーマ「Cocoon」を使用しています。

Cocoonで「サイドバーの見出し」をデザイン指定するには、下記のclassを指定します。

  • サイドバーの見出しだけを指定するとき .sidebar h3
  • ウィジェット全体の見出しを指定するとき .widget h3

紹介するCSSは「Cocoon」に合わせています。他のテーマをご利用の方は、各テーマに合わせたclass名をご使用ください。

CSSで見出しをカスタマイズ

「Cocoon」のデフォルトのサイドバー見出しは、こちら。

Cocoon サイドバー見出し

カスタマイズしやすいよう、シンプルになっていますね。

変更後はこちら。

なこラボ サイドバー見出し

以下では、わたしがCSSに追記した内容を紹介します。

marginやpaddingは好みで調整してくださいね。

フォント

.widget h3,
.related-entry-heading,
.comment-title{
	font-family: "Muli", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}

このブログでは、アルファベットのみで表記している下記の部分に、Webフォント「Muli」を指定しています。

  • ウィジェットの見出し
  • 記事下の関連記事を示す「Related Entry」という見出し
  • コメント「Comment」という見出し

Webフォントの指定の仕方は、下記の記事を参考にしてください。

【2019年版】Google Fontsの使い方:初心者向けに解説!
最も有名なWebフォント「Google Fonts」の使い方と導入方法を、初心者の方でも分かるように解説します。

サイドバー全体

div.sidebar {
	padding: 20px;
}

Cocconデフォルトのサイドバーのpaddingは9pxでした。

もっと余白がほしかったので、paddingを広げています。

サイドバーの見出し

.sidebar h3 {
	background:transparent; /* Cocoon親テーマCSSリセットのため */
	padding: 8px 0px;
	border-bottom: 2px #好きな色 dotted; /* ドット下線追加 */
	letter-spacing: 0.2em; /* 字間を広げる */
}

paddingを上下、左右ともに狭めています。左右を0にしているのは、サイドバー全体の余白を広げたから。全体がデフォルトのままだと変になるのでご注意ください。

サイトのメインカラーを使う分、 色ベタ面をなくし、 ドットの下線を追加。

字間を広げています。

また、字間を広げて、全体的に白っぽくしました。このWebフォント「Muli」は、字間広めがかわいい気がしています。

Muli letter-spacing
Webフォント「Muli」 と字間

まとめ

Webフォントでは、どのブラウザでも同じフォントで表示されるので、伝えたいイメージがそのまま伝わって嬉しいです!

「こう記述したほうが良いよ」などありましたら、教えていただけると嬉しいです



Comment

  1. はじめまして。

    なこさんのこの記事を参考にカスタマイズしました。
    サイドバーのデザインが変わっただけで全体的にすごくおしゃれになった気が!

    かわいくて、おしゃれなカスタマイズ情報、ありがとうございました。

    • そう言っていただけて、とても嬉しいです!
      ありがとうございます。

  2. […] 【ブログカスタマイズ奮闘記】Cocoonのサイドバー見出しデザインを変更ブログのサイドバー見出しデザインを変更。WordPressテーマ「Cocoon」をカスタマイズしています。Webフォントを使い […]