オススメ記事
固定ページを活用してサイトトップ画面をカスタマイズ
サイトのTOP画面をカスタマイズすれば、滞在率が上がるかも!

この記事で分かること

  • DiverのTOP画面カスタマイズ例
  • DiverのTOP画面カスタマイズ方法

DiverのTOP画面カスタマイズ例

まずはカスタマイズ前後を比較してみます。

カスタマイズ前カスタマイズ前 トップページ画像カスタマイズ前 トップページ画像2
カスタマイズ後 カスタマイズ後 トップページ画像3 カスタマイズ後 トップページ画像5

カスタマイズ前は「THE・ブログ!」という感じが面白くないなと感じていました。カスタマイズして「サイト型ブログっぽく」してみました。まだまだ改良の余地はありますが、個人的には気に入ってます。

今回の記事はゆるくろぐ様「【Diver】ダサいトップページからサイト型ブログにカスタマイズする方法│1時間で出来る」を参考にさせていただきました。元の記事も是非ご覧頂ければと思います。

DiverのTOP画面カスタマイズ方法

カスタマイズ方法を4STEPで解説します。

  1. ファーストビュー画像をCanvaで作成
  2. ベースとなる固定ページの作成
  3. 新着記事一覧の作成
  4. カテゴリーページの作成
  5. 作成した固定ページをホームページに設定する

ファーストビュー画像をCanvaで作成

まずは当サイトのこの部分を作成していきます。

PC用
スマホ用

画像はPC用とスマホ用に2つ作成します。それぞれサイズが異なるため別々に作成する必要があります。

PC用1920×350px
スマホ用400×250px

Canvaを使いますので、使ったことのない方はこちらの記事を参考にして下さい。

Canvaで画像を作成したら設定していきます。ワードプレスメニューから Diverオプション → ファーストビュー をクリックします。

PC用ファーストビューの設定

表示位置・表示オプション・ファーストビューはこのように設定しています。

表示領域はカスタマイズで350pxにします!Canvaで作成した画像の高さが350pxなので、それに合わせます。もちろん選択する画像はPC用になります。また、画像を背景にするのを入れましょう。

スマホ用ファーストビューの設定

下にスクロールするとスマホ用設定があります。スマホ画像設定は個別設定を選びます。スマホ時表示領域はカスタマイズで250pxにします。こちらもCanvaで作成した画像の高さが250pxだからです。最後に忘れず変更を保存をクリックします。

これでファーストビューの設定が完了です。上手く表示されない場合はPCなら「背景画像サイズ」、スマホなら「スマホ背景画像サイズ」を調節します。

ベースとなる固定ページの作成

ベースとなる固定ページの作成ですが、通常はこのように記事一覧が表示されます。この記事一覧の代わりにカスタマイズした固定ページを表示させます。

カスタマイズ前 トップページ画像

ワードプレスメニューから固定ページ → 新規追加をクリックします。タイトルはトップページと入れておきます。パーマリンクは設定しても最終的にドメインと同じになりますので、設定不要です。(パーマリンクをhttps://diver-theme.com/topと設定しても、トップページに反映させるとhttps://diver-theme.com/になります。)

右にあるページ属性のテンプレートは「デフォルトテンプレート」、ページ設定でタイトル非表示にを入れましょう!(プレビューをするとわかりますが、タイトル非表示にしていないとダサいです…。)

これで大枠となる箱が出来ましたので、新着記事一覧とカテゴリーページを作成していきます。

新着記事一覧の作成

トップページの新着記事一覧を作成します。

先ほど作成した固定ページ「トップページ」に見出しを入れます。ここはh2タグで新着記事にします。

続いて入力補助機能から記事一覧をクリックします。

当サイトではこのように設定しています。カテゴリー関係なく新着記事の一覧にしたいので、取得カテゴリーは未設定にします。

するとビジュアルエディタではこのように表記されます。

この下に記事一覧のボタンを追加しましょう。下準備として、新たな固定ページを作成します。(固定ページ → 新規追加 )

タイトルには新着記事一覧、本文は何も入れず、テンプレートを「記事一覧」、ページ設定をタイトル非表示にチェックを入れます。

公開するとURLが有効になりますので、それをメモ帳などにコピーしておきます。

続いて固定ページ「トップページ」にいき、先ほどの記事一覧の下にボタンを追加します。

作り方は入力補助機能からボタンをクリックし、リンク先URLに先ほど作成した固定ページ「新着記事一覧」のURLを設定します。お好みでアイコンを入れると上記のような表示となります。

カテゴリーページの作成

続いてカテゴリーページを作成します。固定ページ「トップページ」の新着記事一覧の下に作成していきたいと思います。

アイキャッチ画像をCanvaで作成する

ファーストビューの際と同じくCanvaでアイキャッチ画像を作ります。当サイトでは3列にしているので3枚の画像が必要となります。サイズはCanvaで400×225pxで作成しています。

カテゴリーの設定を行う

画像を作ったらカテゴリーの設定をします。固定ページ「トップページ」に行き、新着記事一覧のボタンの下にh2タグで見出しを入れます。

続いて、3列のブロックを作っていきます。これは入力補助機能でグリッドレイアウトを使用します。

見出しをh3タグで入れ、その下に画像を配置します。

見出しを入れるとグリッドレイアウトがおかしくなってしまいます…。
その際はビジュアルエディタではなく、テキストエディタで編集してみましょう。見出しは<h3>見出し</h3>で囲まれていますが、終わりの</h3>の位置がおかしくなっていないか確認してみましょう。

画像の下には入力補助機能から記事一覧でショートコードを入れます。ここではカテゴリーごとに表示させたいので、取得カテゴリーは該当するカテゴリーを選びましょう!

最後に記事一覧ボタンを作成します。こちらは新着記事一覧のボタンと同じやり方になります。カテゴリーページのURLを入れるようにしましょう。

カテゴリーページのURLがわかりません
公開しているブログの右にあるサイドバーでカテゴリーはありますか?ここにカテゴリーがあれば、該当するものをクリックし遷移したページのURLを入力すればOKです!

固定ページ「トップページ」をホームページとして設定する

ワードプレスメニューから 外観 → カスタマイズ をクリックします。下にあるホームページ設定をクリックします。

デフォルトではホームページの表示が「最新の投稿」になっていますので、これを「固定ページ」に変更します。ホームページのプルダウンから今まで作成した固定ページ「トップページ」を選択し、上にある公開をクリックして終了です!

まとめ

この記事では固定ページを使いトップ画面をカスタマイズする方法について解説しました。

もし分からないことがあればお気軽にコメントを頂けると幸いです。

当サイトはDiverを使用しています
ワードプレステーマ【Diver】
使いやすさとデザインの豊富さが魅力
入力補助機能による圧倒的な使いやすさは初めてテーマを購入する人はもちろん、今までに他のテーマを購入した人でも必ず満足できます!
デザインの豊富さも魅力です。見出し・ボタン・アイコン・リストなど多くのデザインとカスタマイズ可能な配色設定でサイトの統一感を一層際立たせることが出来ます!
  • 17,980円(税込)
  • 複数サイトに使用可能
  • サポートが無期限・無制限
  • 今でも未完成、常に進化を続けている

Twitterでフォローしよう

おすすめの記事