【WordPress】「SANGO」のテーマ設定からカスタマイズまでの流れ

2022年9月7日2023年12月28日

この記事は 2 分で読めます。

概要

読み手側に寄り添ったブログ運営の重要な要素として、ブログのデザインがあります。長時間滞在したいと思わせるデザインは、敷いてはブログ集客に直結します。今回はWordPressの中でも、屈指のくつろぎ感がある「SANGO」のテーマを導入からカスタマイズ手法まで紹介します。KONOHA Wingでも有料で提供されており、人気のテーマの１つです。

本記事の読者層

SANGOをカスタマイズしたい方

まずは、導入後すぐにできるカスタマイズを行っていき、最終的には自身でCSSコードを変更できるようになりましょう。すると、さらに自分ごのみのWEBページに仕上げることができ、最高のSEO対策にもなります。

SANGOのカスタマイズ

WordPressの「SANGOテーマ」は、有料で2022年7月にVer.3のアップグレードに伴い価格が11,000円から14,700円に変更されました。主にパステルカラーベースで丸みを帯びたデザインが多いことから、柔らかい雰囲気を与えるテーマです。google等の広告収入を意識した設定も多く稼げるテーマとして人気です。

SANGOオリジナルも優れたデザインですが、更にオリジナリティーを出したカスタマイズ方法を以下で紹介します。

【その1】見出しのカスタマイズ

各H1~H6の見出しのカスタマイズを行います。見出し変更を行うことで見出し装飾を行うことができます。

参考

【WordPress】WordPressの見出しデザインを変更する方法　～CSSを使ってきれいに装飾するために～ – SEO対策の賢者

SEO対策の賢者

【その2】投稿記事の幅を調節する方法

参考

SANGOのカスタマイズ：投稿記事の幅を調整する方法

スタフラTech | Study Infra & Tech

上記を参照して、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*/

CSS表記	div	#ID
.single #inner-content	1コラム表示	メイン内容の幅指定
.page #inner-content	page表示	メイン内容の幅指定

CSS表記

【その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ファイルを保存すると以下のように表記が左から右へ変更されます。