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

まずは、導入後すぐにできるカスタマイズを行っていき、最終的には自身で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程さらに更に広げてみました。

/*========= 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を持っているかを以下のように確認できます。

「記事のカレンダー」の前に白色の♥記号を入力する場合、以下のような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コードは下記にも示されています。

まとめ

関連リンク