WordPressテーマSANGOのトップページの例一覧

• WordPressのSANGOのテーマを使っているんだけど、他のサイトを参考にしたい。
• SANGOのトップページをカスタマイズしたいので、他のサイトを参考にしたい。
• SANGOのデザインやカスタマイズのコツを知りたい。

このような声にお応えするために、SANGOを使っているブログの秀逸なデザインを集めました。

今回はトップページのデザインに限定しており、中でもヘッダー画像のビジュアルに焦点を置いています。

Webデザイナー歴４年、ブログ歴８年の僕が厳選したWebサイト、またはブログを紹介します。

マクリン

参考 マクリン | makuring.com

僕が見た中で一番レベルが高いデザインです。

モバイルでもいい感じでした。

目指したいブログの一つですね。

SANGOのサンプルサイト

参考 SANGO公式 サンプルサイト | saruwakakun.design

ちなみに僕はWordPressのカスタマイズをする時は、配布主のデモサイトやデフォルトのデザインを綿密に確認します。

デザインのコンセプトは制作者が一番理解しているので、優秀なデザイナーが手掛けたデザインはあまりなるべく触らない方がいいのです。

あとこちらの１カラムのトップページのサンプルとかも参考になります。

参考 SANGO公式 1カラムのトップページのサンプル | saruwakakun.design/fortop

マサオカブログ

参考 マサオカブログ | oldno07.com

SANGOのカスタマイズテーマである「PORIPU」を販売している、SANGOのカスタマイズのプロみたいな方です。

トップページはゴリゴリにカスタマイズしていて、手の凝っている感じか分かりました。

こちらのアコーディオンのボタンが印象的です。

Smart Life Net

参考 Smart Life Net | smt-life.net

トップページのヘッダー画像が印象的です。

SANGOはヘッダー画像のデザインが難しいのですが、コピーを際立たせるテクニックが印象的です。

SUMOGURI

参考 SUMOGURI | small-green.com

こちらもヘッダー画像と、トップページの構成が印象的です。

ゼロから海外就職

参考 ゼロから海外就職 | workstudyabroad.net

こちらは僕が運営しているブログで、最近Homeをアップデートしました。

実はあまりHTMLコーディングは使っておらず、既存のショートコードの組み合わせと少しのCSSでの微調整だけで作っています。

その他

随時追加していきたいと思いますが、以下のサイトからも参考になるサイトがいくつか見つけることができます。

参考 配色の参考に！【カラー別】SANGO（テーマ）を使っているブログ・サイト | for men