「トップページ、ちゃんと作らないとダメかもしれない」
Elementorでトップページを作ろうと思ったきっかけは、かなり単純でした。
最初は正直、
・記事を書けば伸びる
・記事数を増やせば何とかなる
・いつかは結果が出る
そう思っていました。
ですが100記事を超えた頃から、かなり強く感じ始めました。
「記事が増えても、読者が迷っている」
どの記事を読めばいいのか。
何のサイトなのか。
何を目指しているのか。
ここが伝わっていませんでした。
そこで今回、
Elementorを使ってトップページ制作に挑戦しました。
ただ結論から言うと…
めちゃくちゃ大変でした。
正直、
約3日間。
合計20時間近く触ってたと思います。
この記事では、
・Elementorでトップページを作った流れ
・初心者が実際に詰まった場所
・どうやって修正したか
・どんな構成にしたか
ここをリアルに公開します。
Elementorでトップページを作るのは、初心者には正直かなり大変でした。
でも、作って良かったです。
理由は、トップページがただの見た目ではなく、
「何のサイトか」「どこを読めばいいか」「どこへ進めばいいか」を伝える場所だと分かったからです。
記事数が増えてきたブログほど、トップページ改善はかなり重要だと感じました。
Elementorでトップページを作ろうと思った理由
では、なぜそこまでしてトップページを作ろうと思ったのか。
ここからは、その理由をリアルに書いていきます。
最初の頃は、
普通のブログ型トップページでした。
ですが途中から問題が出始めました。
・記事数だけ増える
・内部リンクが複雑になる
・読者が迷う
・収益記事に辿り着かない
特に大きかったのが、
「何のサイトか伝わりにくい」
ここでした。
このブログは、
「借金200万円を抱えた地方経営者が、副業ブログで月30万円を目指すリアル記録」
がテーマです。
でも普通のブログTOPだと、
それが一瞬で伝わらなかった。
だから今回、
・まず読む3記事
・カテゴリ導線
・最新記事
・人気記事
・プロフィール
これを整理して、
“サイト全体の設計”を作ることにしました。
Elementorを導入した流れ
まずやったのはこれ。
・WordPressへElementor導入
・固定ページ作成
・TOPページ化
・Elementor Canvas設定
・TOPの背景画像作成
最初は本当に意味が分かりませんでした。
特に最初に混乱したのが、
「どこを触ってるのか分からない」でした。
ちなみに実は、
SWELLも購入しています。
かなり評判が良かったからです。
でも正直、
今の自分にはまだ難しかった。
機能が多い。
出来る事も多い。
でもその分、
「何をどう触ればいいのか」
が整理できませんでした。
だから今回は、
「まずElementorで形を作る」
ここを優先しました。
多分また、
次のタイミングで挑戦すると思います。
最初に大苦戦した「白画面問題」
これは本当に焦りました。
一通り作って公開すると、
真っ白
何も表示されない。
最初は、「サイト壊した？」って思いました。
原因は色々あったんですが、
特に大きかったのは、
・キャッシュ
・Elementor Canvas設定
・コンテナ幅
・親子コンテナ構造
この辺でした。
初心者の自分には、
マジで意味不明でした。
※本当に真っ白で何も見えないので、
薄くグレーの背景だけ書きました。
📌最初から上手くいかなくて普通
ブログって、
「記事を書く」だけじゃありません。
・デザイン
・導線
・設定
・表示崩れ
こういう部分でも普通につまずきます。
だから、
途中でイライラするのもかなり普通です。
Elementor Canvasで解決した
かなり大きかったのがこれ。
固定ページのレイアウトを、
Elementor Canvas
に変更した事。
これで不要なヘッダーや余白が消えて、
かなり理想形に近づきました。
ただ逆に、
・サイトタイトル
・メニュー
・余白
なども全部消えたので、
最初は「本当にこれで合ってるん？」
とかなり焦りました。
Elementorの基本構造は「コンテナを積み上げる」イメージだった
そんな状態から、
少しずつElementorの構造を理解していきました。
最初に理解する必要があったのが、
Elementor独特の「コンテナ構造」でした。
正直、最初はこれが全く分かりませんでした。
簡単に言うと、
「1つの区画（コンテナ）の中に、好きな物を配置していく」
イメージです。
見にくいかもしれませんが、画像のピンクのラインが“親コンテナ”。
その中に５個ある、点線のボックスが“子コンテナ”です。
さらにその子コンテナの中へ、
・文字
・画像
・ボタン
・HTML
・リンク
などを自由に入れていきます。
さらに細かく作ろうと思えば、
“孫コンテナ”まで作ることも出来ます。
ただ今回は、
初心者向けの記事なのでそこは割愛します。
最初は難しく感じますが、
「箱の中に箱を入れていく」
これを理解すると、
少しずつ触れるようになってきました。
一番上のヒーロー画像制作が一番苦戦した
私の場合、
まず最初に作りたかったのが“一番上のヒーローエリア”でした。
サイトを開いた瞬間に、
「このブログ、普通の副業ブログと少し違うな」
と思って欲しかったからです。
背景画像を設定して、
その上にコンテナを配置。
さらに、
・記事数
・表示回数
・継続日数
・収益0円
などを表示しました。
ただここ、
本当に難しかったです。
というのも、
Elementorは基本ドラッグだけで位置調整できる訳ではない
からです。
文字を少し上へ動かしたい。
中央に寄せたい。
余白を作りたい。
こういう調整を、
・Margin（マージン）
・Padding（余白）
・配置設定
などで細かく調整する必要がありました。
最初は意味が分からず、
かなり時間が溶けました。
「まず読む3記事」は固定表示にした
次に作ったのが、
TOPでかなり重要だと思っていた、
「まず読むべき3記事」です。
ここは頻繁に変更する予定が無かったので、
HTMLを直接コンテナへ入力して制作しました。
リンクも、
1つずつ手作業で設定しています。
さらに、
・アイコン追加
・文字サイズ
・余白
・リンク範囲
なども全部調整。
ちなみに、「リンク貼ったのに消える」
これが何回も起きました。
初心者あるあるかもしれません。
最初はかなり焦りましたが、
原因が分かれば修正自体は可能でした。
人気記事エリアも「手動更新」にした
人気記事部分は、
本来なら自動化も可能です。
ですが私は、
「今、自分が一番見て欲しい記事」
を出したかった。
なので敢えて、
手作業で差し替える形にしました。
構造としてはかなりシンプル。
グレーの実線が親コンテナで
中に子コンテナを並べました。
上に画像、
下にタイトル。
ただこれも、
実際やってみるとかなり苦戦しました。
・画像サイズが揃わない
・文字位置がズレる
・横並びにならない
・中央にならない
本当に細かい所で何回も止まりました。
最新記事一覧だけは自動化した
逆に、
「毎回手作業だとキツい」
と思ったのが最新記事一覧。
ここはLoop Grid機能を使って、
自動化しました。
ここはChatGPTにもかなり助けてもらいました。
最終的には、
・日付
・記事タイトル
・ページ送り
を自動取得。
記事を書けば、
自動で一覧へ追加される形にしました。
画像付きにも出来ますし、
時間表示も可能です。
ただ今回は、
「シンプルで見やすい」を優先。
日にち＋タイトルだけにしています。
カテゴリページも導線をかなり意識した
TOPだけで終わりではありません。
カテゴリへ入った時も、
読者が迷わないように作りました。
見たいカテゴリをクリックすると、
TOPページでは、
まずおすすめ記事を5本表示。
さらにその下に、
「このカテゴリの記事をもっと見る」
ボタンを設置。
これによって、
・どの記事を読めばいいか
・次に何を見るべきか
がかなり分かりやすくなったと思っています。
ちなみに今でも、
「5記事より3記事の方が良いかな…」
とか、まだ悩んでます（笑）
正直、初心者にはかなり大変だった
今振り返ると、
慣れている人なら、
2〜3時間くらいで作れるページかもしれません。
そして、今の私なら5時間あれば作れます。
一度作った経験があるだけで、
理解度はかなり変わると思いました。
でも当時、ホームページ制作なんて未経験で初心者の私は、
約3日間（合計20時間くらい）かかりました。
途中で、
・表示崩れ
・白画面
・リンク解除
・コンテナ迷子
・位置調整地獄
も経験。
かなりイライラしました。
でも逆に、
「ブログは記事を書くだけじゃない」
これを強く実感しました。
読者が迷わない導線。
何のサイトか。
どこへ進めばいいか。
そこまで設計して、
初めて“サイト”になるんだと思います。
完成した時、少しだけ“自分のサイト”になった気がした
正直、
3日間かなり疲れました。
イライラもしたし、
「もういいかな」
と思った瞬間もありました。
でも、
完成したTOPページを見た時、
「このブログを本気で育てたい」
って少し強く思えたんです。
以前は、
“記事を書いている感覚”
が強かった。
でも今は少しだけ、
“サイトを作っている感覚”
に変わってきました。
まだ途中です。
収益も大きく出ていません。
でも、
少しずつ、
「自分のサイト」
になってきた感じがあります。
3日かかって分かった事
正直かなり大変でした。
・設定分からない
・表示崩れる
・幅変わらない
・画像消える
・リンク消える
・白画面になる
何回もやり直しました。
でも逆に、
「ブログは記事だけじゃない」
これがかなり理解できました。
トップページは、
見た目だけじゃなく、
・何のサイトか
・誰向けか
・どこへ進めばいいか
を伝える場所なんだと思います。
まとめ
Elementor初心者でも、
時間をかければトップページは作れます。
ただ、思ってる5倍大変です。
でも今回作った事で、
・導線整理
・サイト設計
・内部リンク
・収益記事への流れ
ここはかなり改善できました。
もし今、
「記事を書いてるけど何かバラバラ」
と感じているなら、
トップページ改善はかなりおすすめです。
この記事を読んで、
「サイト設計や内部リンクの重要性が少し見えてきた」と感じた方は、
次の3記事もかなり繋がります。
コメント