【ブログカスタマイズ奮闘記】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フォントでは、どのブラウザでも同じフォントで表示されるので、伝えたいイメージがそのまま伝わって嬉しいです!

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



Comment