読み手側に寄り添ったブログ運営の重要な要素として、ブログのデザインがあります。長時間滞在したいと思わせるデザインは、敷いてはブログ集客に直結します。今回はWordPressの中でも、屈指のくつろぎ感がある「SANGO」のテーマを導入からカスタマイズ手法まで紹介します。KONOHA Wingでも有料で提供されており、人気のテーマの1つです。
まずは、導入後すぐにできるカスタマイズを行っていき、最終的には自身でCSSコードを変更できるようになりましょう。すると、さらに自分ごのみのWEBページに仕上げることができ、最高のSEO対策にもなります。
SANGOのカスタマイズ
WordPressの「SANGOテーマ」は、有料で2022年7月にVer.3のアップグレードに伴い価格が11,000円から14,700円に変更されました。主にパステルカラーベースで丸みを帯びたデザインが多いことから、柔らかい雰囲気を与えるテーマです。google等の広告収入を意識した設定も多く稼げるテーマとして人気です。
SANGOオリジナルも優れたデザインですが、更にオリジナリティーを出したカスタマイズ方法を以下で紹介します。
【その1】見出しのカスタマイズ
各H1~H6の見出しのカスタマイズを行います。見出し変更を行うことで見出し装飾を行うことができます。
【その2】投稿記事の幅を調節する方法
上記を参照して、SANGOのCSSタイトルをカスタマイズします。
SANGOのデフォルトの記事幅とウェジット幅は以下の通りです、これでは投稿幅が狭すぎます。今回は全体幅を1356pxにして、記事幅を200px程さらに更に広げてみました。
テーマ or サイト | 全体幅 | 投稿記事の幅 | ウィジェットの幅 |
---|---|---|---|
SANGOのデフォルト | 1180px | 700px | 345px |
/*========= 1340px〜の場合 =========*/
@media only screen and (min-width: 1340px) {
.wrap,
.maximg,
.single #inner-content,
.page #inner-content,
.inner-footer {
width: 1356px;
}
}
/*end min-width: 1240px*/
【その3】ウェジットの背景を変更する方法
「SANGO」の初期設定状態ではウェジット (右サイドバー)の背景は透明色です。これを以下に示すように、ウェジット内の背景を白くする方法を紹介します。すなわち、この動作により、以下の表にサイトの表記が左から右へ変更されます。

SANGOの小テーマのChild style.css内に以下のコードを追加して下さい。
/*========= widget背景色を変更する =========*/
.widget {
background-color: #FFFFFF;
}
以上、簡単ですね。
【その4】ウェジットのタイトルにAwesome記号を入れる方法
以下に「SANGO」の右サイドのウェジットタイトルにAwesome記号を入れる方法を示します。
WordPressのサイトに行き、Chormeブラウザーのページ上で右クリックを押すと「検証」といタブが出てきます。
その後、右側にタブが出てきて、このタブをクリックすると対象のページ上の表記に対応するhtml命令が現れます。

ここで、ウェジットの「記事のカレンダー」というタイトルがどのIDを持っているかを以下のように確認できます。
「記事カレンダー」は
ID=block-21 の見出しがH4となることがわかります。
「記事のカレンダー」の前に白色の♥記号を入力する場合、以下のようなCSSを記載します。
/*========= widget内のタイトルに記号を入れる =========*/
#block-20 h4:before {
font-family:"Font Awesome 5 Free";
margin-right:5px;
font-size:120%;
color:#FFFFFF;
content:"\f5ad";
}
ここで、content:”\f5ad”は、Font Awesome 5 Free(「https://fontawesome.com/」)でのハート「♥」のフォント記号になります。
以上のCSSファイルを保存すると以下のように表記が左から右へ変更されます。

その他のカスタマイズ
SANGOのカスタマイズは下記に掲載されています。
また、別のカスタマイズ用CSSコードは下記にも示されています。
まとめ
✔ 見出しのカスタマイズ方法や投稿記事の幅を調節する方法が有効。
✔ ウェジットの背景を変更には.widgetにて変更可能。
✔ ウェジットのタイトルにAwesome記号を加えるにはブラウザー上のID番号が必要。