WordPressのテーマを「ストーク」から「SANGO」に変更しました

先日、いつものようにネット巡回をしていたところ、サルワカさんがWordPressテーマを作成していることに気づきました。
見てみるとかなり自分好みのテーマになっており、是非使ってみたいと思いこの度思い切ってテーマを変更してみました。

WordPressテーマ「SANGO」

サルワカさんのサイトはWordPressをいじる上でかなり重宝して拝見していたサイトでしたので、中の人が作成したテーマとなれば同じ気持ちで見てた人がかなり「SANGO」に移っていくのではないでしょうか。

今回は、既存テーマ「ストーク」から「SANGO」に変更した時に行ったカスタマイズを紹介しようと思います。

はじめに「SANGO」の感想

ファーストインプレッションの感想はとにかく軽い。
ストークよりあきらかにトップページも記事ページも軽くなりました。

あとは、驚くほどたくさんあるショートコードと装飾。
サルワカさんのサイトをそのままコピーしたような、お洒落でかわいい装飾がたくさんつまってます。

他にもカスタマイズがしやすかったりとか色々ありますが、一番印象に残ってるのはこのあたりです。

自分色に「SANGO」をカスタマイズしました

とりあえず自分がいじったのは以下の項目です。
この項目に沿って紹介したいと思います。

  • 見た目は既存テーマ「ストーク」と同じようにする
  • トップページロゴの調整
  • H2見出しの変更
  • フォントをGoogleフォントへ変更
  • 「PS Auto Sitemap」の外枠を調整
  • ウィジェットにSNSメニューを追加
  • 記事内広告の導入
  • 不要なプラグインを削除
  • 新たにインストールしたプラグイン

見た目は既存テーマ「ストーク」と同じようにする

テーマは変えたくてもレイアウトは変えたくなかったので、今の配置と同じようにできることが大前提でした。
結果としては「SANGO」のカスタマイズ性が高いため、前と変わらずのデザインを維持することができました。

トップページロゴの調整

トップページにロゴ画像を設定すると少し小さめになってしまうため子テーマに以下のCSSを記入しました。
これでロゴ画像が自分好みのサイズに変更できます。赤く染めた数値を変更するとサイズが変更できます。

タイトルロゴ画像サイズ変更
#logo, #logo img, .desktop-nav li a,#drawer__open {
height: 70px;
line-height: 70px;
}
参考

ブログのタイトルとロゴ画像を設定しようサルワカ

H2見出しの変更

初期状態ではH2の見出しが何の装飾もない状態なので、大括弧を付けて目立つようにしました。見出しはサルワカさんのサンプルを参考にしました。

参考

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選サルワカ

見出しの変更方法は以下のページを参考に。

参考

SANGOでデフォルトの見出しを変える方法サルワカ

既存フォントをGoogleフォントへ変更

以下のページを参考にブログ全体のフォントをGoogleフォントの「Noto Sans JP」へ変更しました。

参考

SANGOで使用するWebフォント(Google Fonts)を変える方法サルワカ

「PS Auto Sitemap」の外枠を調整

プラグインの「PS Auto Sitemap」で作成した記事一覧にいらない外枠がでてしまっていたので以下のCSSを子テーマに追加。

コード
/*SANGOサイトマップの外枠を消す*/
#sitemap_list {
border: none;
}

ウィジェットにSNSメニューを追加

「SANGO」ではウィジェット用のメニューボックスを追加することができるので、これを利用してSNSボックスを作成しました。
こんなの。

参考

ウィジェット用メニューボックスの設置方法サルワカ

記事内広告の導入

Googleから新しく発表された「記事内広告」
使ってみたいなーと思っていたのでH2の見出し前に挿入してみました。表示が軽くて良い感じです。

表示個数については、以下のサイト様を参考にカスタマイズさせていただきました。

参考

コピペOK!SANGOのAdsense記事中広告を増やす方法マサオカブログ

不要なプラグインを削除

「SANGO」を導入したことにより不要になったプラグインを削除しました。
以下が削除したプラグイン達。

  • Classic Text Widget
  • EWWW Image Optimizer
  • WordPress Popular Posts
  • Yoast SEO
  • Lightweight Social Icons

「SANGO」の高速化

マサオカブログさんを参考に僕も「SANGO」の高速化をしてみました。

参考

【爆速サンゴ計画】SANGOを高速化するカスタマイズマサオカブログ

高速化のために以下のプラグイン達を新たにインストール
  • Compress JPEG & PNG images
    「EWWW Image Optimizer」より画像の圧縮率が良いので変更しました。
  • BJ Lazy Load
    画像の遅延読み込み
  • Lazy Load for Videos
    YouTubeのサムネイル化
  • LiteSpeed Cache
    キャッシュプラグイン
  • Scripts-To-Footer
    よくわからないが入れると少し読み込みが速い

以前の「ストーク」では導入が難しかったプラグインをいくつか入れることができました。
とくに「LiteSpeed Cache」は使いたくても「ストーク」ではレイアウト崩れが起き、使用を断念していたので今回導入できて良かったです。
今のところ変わった不具合は発生してません。

高速化したスコアはこんな感じ。

まとめ

ざっくりではありますが今回実行したカスタマイズを紹介してみました。これから「SANGO」を使う方の参考となれば幸いです。

「SANGO」を使ってみてデザインやカスタマイズ性が優れていて初心者でも手軽に高品質なブログが作れるなぁと感じました。
これからのアップデートも楽しみにしています。

コメントを残す

メールアドレスが公開されることはありません。