「Page Builder by SiteOrigin」でトップページを作成する際のポイント

【この記事を読むのに必要な時間は約 3 分です。】


トップページの改善状況

最初は新鮮だった記事一覧ではないトップページも数日経つと気になる点が出てきます。

そんなこともあって、見直しをまだ続けています。触り出したらきりが無いですね。

このトップページは「Page Builder by SiteOrigin」というプラグインを使っています。

使いやすいのですぐにページを作ることはできましたが、だいぶ扱いに慣れて細かい修正もできるようになってきました。

試行錯誤していく中でいくつか苦労したポイントがありました。自分の備忘録と、今後カスタマイズされる方の参考に少しでもなるように改善内容を記録しておきます。

スポンサーリンク

スマホでのテーマ一覧の表示方法変更

今回作成したトップページでは、一番上にこのブログのテーマ(カテゴリー)を表示するようにしています。

これPC で表示するには良いのですが、スマホ表示だと最初の設定では1行に1つのテーマが表示される状態になっていました。

レスポンシブ対応でのテーマのスマホ表示
▲こんな感じでアイコンが並びます。

テーマが少ない場合はこの方がインパクトがあって良いかもしれないのですが、うちのブログは整理してみたものの、それでも6つもテーマがあります。

その下のエリアまでが遠すぎてイマイチだったので見直しました。

この部分は「SiteOrigin Features」というプラグインで実現しているので、その設定を確認します。

SiteOrigin Featuresの設定画面
▲「Responsive layout」の設定をオフにして、スマホ表示で大きくレイアウトを変えないようにします。

変更後のテーマ一覧
▲一つ一つのテーマの表示は小さくなりましたが、テーマがPC 表示の時と同じ配置でコンパクトに見られるようになりました。こちらの表示でいこうと思います。

新着記事一覧はやはり必要

今回のトップページ見直しでは、下半分にカテゴリー別に新着記事一覧を配置しました。

ただ、これだと一番最近書いた記事がどれだか分からないんですよね。

新着記事一覧がトップページの下に行ってしまったのも気になったので、普通の新着記事一覧も復活させることにしました。

新着記事一覧

通常のリストにしてしまうと以前のトップページと変わらないので、この一覧にはプラグインのカルーセル(スライド式の一覧)機能を使いました。

最初に使った時は、スマホで左右にスライドすると画面全体も動いてしまって使いづらくてやめたのですが、いろいろ調べて画面がぐらつかないようにしました。

具体的には以下のコードをstyle.cssに追加することが必要でした。

.sow-features-list{
	margin:auto;
}

初期状態だとテーマ一覧を横に大きくする設定がなぜか入っているので、横の余白を無くすのが目的です。左右のmarginが-25だったんだけど、何か目的があるコードなのだろうか。。

その他

これ以外に表示間のサイズ調整をしたり、追加した新着記事一覧と人気記事一覧のPCでの表示に違和感がないようになんどもCSSでサイズ調整をしたりを繰り返し行いました。

この辺りはもうこだわりだけですね。

以上でとりあえずトップページのカスタマイズは一段落のはず。

微調整はまだやると思いますが、ここまでできればひと段落かな。

こうなるとテーマごと変えたくなってきましたが、追々考えましょう。

とりあえずしばらくはこのトップページでいってみたいと思います。

Facebookページには
更新情報と裏話を紹介します

Twitter で

『「Page Builder by SiteOrigin」でトップページを作成する際のポイント』へのコメント

  1. 名前:@kyotapy 投稿日:2017/10/10(火) 03:07:55 ID:42b34eb34 返信

    私のブログは雑多な内容なので、このトップページ作成の記事に感化され、トップページを整理しました。大変参考になります。デザインはまだまだなので、細かい調整が必要ですが。ありがとうございました。http://kyotapy.net

    • 名前:masahico 投稿日:2017/10/10(火) 12:55:22 ID:08d6bfb8a 返信

      コメントありがとうございます!
      そう言っていただけると嬉しいです。
      私も感化されて作成し始めましたが、やり始めるとキリがないですね。
      ページ見させていただきましたが、綺麗にまとまってますね。デザインの追い込み頑張ってください
      ^_^