あれ？トップページがちょっと変わってるよ！
この度、サイトのトップページをブログ型トップページからサイト型トップページへリニューアルしました！
結構時間がかかると思っていたのですが、テーマにSWELLを使っていると思いの外簡単で、大半をノーコードで改修することができました。
今回の記事では、主にどうやってトップページを改修したのか・実際に改修してみた感想について実体験を踏まえて紹介したいと思います。
WordPressブログを運営していて、そろそろトップページのデザインを変えてみたいけどどうやればいいのか分からない…という人はぜひチェックしてみてください！
SWELLの購入を検討してる人にも参考になる内容だと思うよ
- このサイトのトップページができるまでの具体的な手順
- SWELLを使ってる場合のトップページカスタマイズの方法
- SWELLで使える便利な機能
このサイトはテーマにSWELL
を使用しています。違うテーマだとこの通りの手順ではカスタマイズできないので要注意！
SWELLを使用した改修のビフォーアフター
実際のビフォーアフターはこちら！
※キャプチャ当時とはデザインが多少変わっている可能性があります。
ぜひ実際のトップページも覗いてみてね
元々は新着記事と人気記事が順番に表示されている仕様でしたが、今回の改修によってカテゴリごとに記事が表示されるようにしました。
サイドバーも非表示、1カラムで画面いっぱいに広がるようにしています。
「知りたい情報にアクセスできるか」という観点ではだいぶ改善されたんじゃないかと思います…！
改修時点でのサイトの状態はこんなかんじでした。
- 記事数…21記事
- サイト運用歴…3ヶ月弱
- 大カテゴリ…3つ
- 管理人のHTML/CSS知識…超シンプルなLPならなんとか1本コーディングできるぐらい
えぇ…HTMLもCSSも全く分からなかったらダメなの…？
SWELLを使ったカスタマイズならほぼHTMLもCSSも使わなかったみたい。だから安心して大丈夫だよ
実際に行ったトップページのカスタマイズ手順
ここからは実際に行ったサイト型トップページの作り方を紹介します。
作り方の手順を大きく分けると３つの工程がありました。
- トップ用の固定ページを作成
- トップ用の固定ページにブロックを追加
- カスタマイザーで見た目の調整
それぞれ詳しく見ていきます！
①トップ用の固定ページを作成
トップページをカスタマイズするには、トップ用の固定ページの中に記事リストや画像などの入れたい中身を追加していく、というのが大まかな流れになります。
まずはそのための固定ページを追加するところからです。
ダッシュボード内の「固定ページを追加」から新規で固定ページを追加します。
分かりやすいようにタイトルは「home」、スラッグも「home」になっていることを確認して保存します。
コンテンツを追加した後、カスタマイザーからこの固定ページがトップページとして表示されるように設定できます。
詳しくは「カスタマイザーで見た目を調整」の章で説明されてるよ
今は気にせず固定ページ作りを進めたらいいんだね
②トップ用の固定ページにブロックを追加
先ほど追加した固定ページの中に、記事一覧やボタンなどコンテンツとなるブロックを追加していきます。
今回リニューアルにあたって追加したブロックやプラグインは特になく、全てSWELL標準搭載のブロックを使用しました。
それぞれパーツごとに分けて説明していきます！
カテゴリーボタン
メインビジュアルの下に配置された、それぞれのカテゴリーにリンクしているボタンです。
これはなんで必要なの？
ここにあることで、このサイトにはどんなコンテンツがあるのかを一目で伝えられるんだよ
使用したブロックはこんなかんじです。
- フルワイドブロック
- リッチカラムブロック
- 段落ブロック（インライン画像＋リンク）
まずは外枠として、フルワイドブロックを追加します。
フルワイドブロックの中に入れたコンテンツは画面いっぱいに広げられるようになるので、ブログのサイト型トップページやLPを作るのにとっても便利です！
真ん中にぎゅっと集まるように配置したかったので、「コンテンツの横幅をどこに揃えるか」は「記事」に設定しています。
ここで背景色がフルワイドにならない場合、カスタマイザーでコンテンツの背景を白にするにチェックが入ってないか確認してね（詳しい操作は後の章で）
中身のボタンはリッチカラムブロックで横に並べています。
管理人余白の調整がしやすかったのでここではリッチカラムを使いましたが、カラムでも同様に横並びにできるかと思います
リッチカラムだとより柔軟に調整ができるようになってるみたい
段落ブロックに用意していたカテゴリーボタンの画像をインライン画像で追加し、それぞれのページへのリンクを貼ることでボタンにしています。
カテゴリーボタンの画像もこのあと出てくる画像も、今回は全てAffinityで作成してみました。
無料で使えるソフトなので、フォトショやイラレを持っていない人も試しやすくなっていると思います！
無料ならCanvaなどでもOK！ソフトについては別記事で解説してるよ
記事エリア
記事へリンクしたサムネイル・タイトルがカテゴリーごとに並んだエリアです。
こちらで使用したブロックはこんなかんじです。
- フルワイドブロック
- 見出しブロック（インライン画像）
- 投稿リスト
先ほどと同様、まずはフルワイドブロックで外枠を作ります。
記事エリアは広めにしたかったので、横幅は「サイト幅」に設定しました。
ここからは見出し・記事一覧の追加方法についてそれぞれ詳しく説明します。
- 見出し
-
見出しは見出しブロックにインライン画像で作成したものを配置しています。
フルワイドブロックを挿入するとデフォルトで見出しブロックが入っています。
ここに何か文字を入力しようとしたとき出てくるメニューの下向き矢印を押すと、さらに詳細なメニューが出てくるので中から「インライン画像」を選びます。
普通に画像を挿入するのじゃダメなの？
見出しにインライン画像を挿入すると、画像も見出しとして認識してもらえるからSEO的にも良いとされてるよ
見出しに使ってる星の作り方はこちら
あわせて読みたいAffinityで簡単に作れる！いろんな星形・キラキラの描き方【初心者向け】 Affinity入れてみたけど、使い方が分からなくてうまく作れない… 星を作りたいけど、どこからどうやって作ればいいの？ Affinityで星形やキラキラなどの図形を作るのに、… - 記事一覧
-
投稿リストブロックを使うことで、カテゴリーごとに簡単に記事を並べることができます。
カテゴリーごとに表示するには、Pickupのタクソノミーの条件設定から選択することができます。
タクソノミーの条件設定を設定しておくと、「もっと見る」ボタンのリンク先も連動して勝手に設定してくれるので便利です🙆
プロフィールエリア
ここは記事エリアと同様、フルワイドブロックで外枠をつくって見出しブロックを配置した下に、カラムブロックで画像とプロフィール文を横2列に並べています。
- フルワイドブロック
- 見出しブロック（インライン画像）
- カラムブロック
- 画像ブロック
- ソーシャルアイコンブロック
- 段落ブロック
- SWELLボタンブロック
また、SWELLのフルワイドブロックは境界線の形も選択することができます！
ここではメインビジュアルに合わせて波の形にしました。
これもコーディングなしでできるんだ……
カラムブロックは要素を2つ横に並べて表示させられるブロックです。
それぞれのブロックの大きさの大まかな割合も指定することができます。
画面幅が小さくなると自動的に縦に並ぶように設定してくれるのも便利なところ！
カテゴリー・タグエリア
フルワイドブロックで外枠を作ってから、こちらもプロフィールエリアと同様にカラムでコンテンツを横2列に並べて配置しています。
- フルワイドブロック
- カラムブロック
- SWELLボタン
- タグクラウドブロック
- カテゴリー一覧ブロック
- 検索ブロック
- カスタムHTMLブロック（リンクに使用）
③カスタマイザーで見た目の調整
もう完成まであとちょっとだね
大枠ができたら、あとは細かい見た目の調整です。
トップページ左上の「カスタマイズする」からカスタマイザーを開いて、実際に見た目を確認しながら調整をしていきます。
ホームページを切り替える
①〜②で作った固定ページをサイトトップのページとしてデフォルトで表示されるように設定します。
カスタマイザーのWordPress設定→ホームページ設定でホームページの表示を「固定ページ」に切り替え、プルダウンから作成した「home」を指定することでトップページを切り替えることができます。
メインビジュアル設定
管理人元々用意してなかったのでここも改めて設定しました…
トップページの一番上、ヘッダーすぐ下に表示される画像がメインビジュアルです。
画像(このサイトでは1600px×900pxにしています)を新たに用意し、カスタマイザー→トップページ から画像を設定します。
このサイトの場合はスライド画像１枚のみ、ボタンやテキストもなしにしています。
スクロールボタンもここでチェックを入れるだけで簡単に追加できました！
サイドバー非表示
デフォルトのブログ型トップページのままだと、サイドバーが表示されたままになっています。
すっきり見せるために、このサイドバーも表示されないようにしました。
カスタマイザーのサイドバーの設定から、「サイドバーを表示するかどうか」のトップページのチェックを外すことで非表示にできます。
「コンテンツの背景を白にする」をオフ
最初フルワイドブロックを使っても背景が画面いっぱいに広がらず困っていたところ、ここがオンになっていたことが原因でした…！
カスタマイザーのサイト全体設定→基本デザイン→サイト全体の見た目 の項目からオン／オフの切り替えができます。
完成イメージにもよりますが、背景がフルワイドにならずに困っている場合は一度この設定を確認してみると良いかと思います。
トップページを改修して感じた正直な感想
実際トップページ変えてみてどんなかんじ？
現時点ではまだトップページを改修してから２週間ほどですが、今のところはやってよかったと思えています！
具体的な感想としてはこんなかんじです。
ノーコードで表示速度を落とさずカスタマイズができた
このブログは有料テーマのSWELLを使用しています。
WordPressには無料でも良質なテーマがある中でわざわざ有料テーマを購入したひとつの決め手は、SWELLだとノーコードでカスタマイズがしやすいことでした！
過去にもWordPressでのブログを運用していたとき、別のテーマを独学でカスタマイズしたことがありました。しかし当時はツギハギのCSSの知識しかなかったため、強引なカスタマイズをしすぎて表示速度がかなり遅くなった経験が…。
それって何か悪いことあるの？
SEO評価が下がって検索順位が落ちたり、来てくれた人の離脱率が上がったりすることにつながる といわれてるよ
そんな中、SWELLは標準搭載されているブロックだけでも簡単にカスタマイズができるという情報をきいて購入…！
実際9割方は追加CSSを書くことなく、さらにプラグインを追加することもなくトップページを改修することができました。
表示速度も問題なさそうです。
現在、フォントの変更とカテゴリーボタンのホバーアクションのみ追加CSSでカスタマイズしています。
（専門知識があるわけではないので、具体的なコードの書き方についてはこの記事では割愛させてください🙏）
WordPressを使っているけどカスタマイズは難しそう、と思っている人は有料テーマの導入を検討してみるのも良いのかもしれません。
回遊率・PV数が上がった…？
管理人あくまでGAをざっくり見たところの体感です…笑
サイトを改修する前と比べるとカテゴリーページやトップページ単体へのアクセス、あるいは全体的なPV数も増えたような気がしています！
もちろんいろんな原因が考えられるのでトップページだけが影響しているわけではないとは思いますが、少しでも見やすいサイトになったのなら改修をやってみて良かったなと思います😊
サイトを運用するのに愛着が湧いた
何より大きな恩恵として感じているのがこちら！
記事を増やしたりメンテナンスをしたり、ブログやサイトの運営は基本的には楽しいのですが、時として面倒臭いことも多いです。笑
そんな中でもトップページをある程度満足いく形にカスタマイズしたことで、少しだけ自分の城が育ったような誇らしい愛着が湧き、そこからモチベーションにも繋がっているような気がします。
もちろんサイトを訪問してくれる人にとって分かりやすく・迷わない設計になっていることが第一優先ですが、運営する上では管理者自身が楽しんで続けていけるかも大切ですよね。
管理人これからもちょくちょく改善を続けていきたいと思います！
まとめ
以上がWordPressブログのトップページをサイト型に変更した手順と感想でした。
- 必要な手順
-
- トップ用の固定ページを作成
- トップ用の固定ページにブロックを追加
- カスタマイザーで見た目の調整
- やってみた感想
-
- ノーコードで表示速度を落とさずカスタマイズができた
- 回遊率・PV数が上がった…？
- サイトを運用するのに愛着が湧いた
ある程度の記事数があるという前提の上ですが、サイトをよりパワーアップさせるためにトップページを改修してみるのはおすすめできると思います！
記事を読んで興味が湧いた人は、ぜひチャレンジしてみてください✨
使用したテーマの詳細はこちら
