SWELLテーマの初期設定では、トップページには最新記事一覧が表示されます。
しかし、この状態だと特定の記事への導線を作れません。また、自分が書いた一番おすすめの記事への誘導も不可能です。
そこで、この記事では、SWELLで提供している「ピックアップバナー」や「ショートコード」を利用して、ブログトップをカスタマイズし、特定の記事へ誘導する方法を紹介します。
【目次】
トップページの見た目
このカスタマイズを行うと、下記のようなブログトップページになります。
シンプルですが、効果検証で効果も確認できたのでおすすめです。
カスタマイズで利用するもの
このカスタマイズでは、「ピックアップバナー」と「ショートコード」を使っています。CSSなどは使っていないので、SWELLテーマに慣れていない人でも簡単にできます。
| 方法 | 内容 |
| a）ピックアップバナー | トップページの上部におすすめ記事を最大4記事表示できる |
| b）ショートコード | 「post_list」を使い、タグIDで記事をグループ化して表示できる |
a）ピックアップバナーを使ってできること
「ピックアップバナー」は、ブログトップに自分の指定した記事を最大4つ表示できます。
スライドショーだと、記事がランダムにピックアップされるので、ユーザーを特定の記事に誘導できません。「ピックアップバナー」を使えば、ファーストビューの範囲に誘導したい記事を表示できます。
b）ショートコードを使ってできること
「ショートコード」は、記事を表示できる「post_list」を使います。
これを使えば、新着一覧を表示させたり、タグを使って記事をグループ化したりできます。
SWELLでブログトップページをカスタマイズする方法
実際に、SWELLのブログトップページをカスタマイズする方法を紹介します。
ブログトップをカスタマイズする手順
- 1）ピックアップバナーを表示する
- 2）新着一覧用固定ページを作成する
- 3）ブログトップ用固定ページを作成する
- 4）ショートコードで固定ページを整える
- 5）固定ページを公開する
1）ピックアップバナーを表示する
ブログトップページに「ピックアップバナー」を表示する方法を紹介します。
a）ピックアップバナーをメニューから作成する
「外観」＞「メニュー」を選択し、「新しいメニューを作成しましょう」をクリックします。
「メニュー名」を入力し、「ピックアップバナー」にチェックを入れて、「メニューを作成」をクリックします。
「カスタムリンク」をクリックして開き、表示させたい記事URLを「URL」に入力し、「メニューに追加」をクリックします。
メニュー項目をクリックして開き、「ナビゲーションラベル」に任意のタイトル名を入力し、「説明」に画像URLを入力します。
同様に「カスタムリンク」を使って、メニューを4つ作成し、「メニューを保存」をクリックしましょう。これで、ピックアップバナーが表示されます。
なお、上記の「説明」に入力する画像URLは、「メディア」＞「ライブラリ」の画像一覧からコピーして使えます。
b）ピックアップバナーを調整する
ピックアップバナーは、下記の方法で微調整できます。
「外観」＞「カスタマイズ」＞「トップページ」＞「ピックアップバナー」から、レイアウト・デザインなどの調整が可能です。
2）新着一覧用固定ページを作成する
本記事の方法でブログトップページをカスタマイズすると、新着一覧が見れなくなってしまいます。そのため、固定ページを使って新着一覧を作成しておきましょう。
「固定ページ」＞「新規追加」を選択し、下記の内容を設定して「公開」してください（表示設定は後述）。
| 記事タイトル | 「新着記事」など（任意） |
| URL（パーマリンク） | 「newpost」など（任意） |
3）ブログトップ用固定ページを作成する
次にブログトップ用固定ページを作成し、下書き保存します。
設定内容は下記のとおり。
| 記事タイトル | 「トップページ」など（任意） |
| URL（パーマリンク） | 「toppage」など |
| このページの"robots"タグ ※SEO SIMPLE PACK 設定 |
「noindex,nofollow」 |
この固定ページは、ページの中身のみを利用するので、SEO SIMPLE PACK設定の「このページの"robots"タグ」には、「noindex,nofollow」を設定しておきましょう。
4）ブログトップ用固定ページを整える
3）で作成したブログトップ用固定ページにショートコードを追加して、トップページをカスタマイズしていきます。
a）タグを使って記事をグループ化する
タグを使って記事をグループ化し、「おすすめ」「ピックアップ」などの一覧を作成します。
まず、「投稿」＞「タグ」で、任意のタグを新規作成し、「タグ：名前」「タグ：ID」をメモしておきます。
次に、グループ化したい記事に、作成した「タグ」を追加して保存してください。
保存したら、ブログトップ用固定ページに下記のショートコードを追加しましょう。
[post_list tag_id="タグID" order="ASC" type="card" count="9" col="3" col_sp="1"]
設定パラメーターは、下記のとおりです。
| 項目 | 設定内容 | 説明 |
| tag_id | タグID | メモした「タグ：ID」を入力する |
| order | ASC | 古い記事順に表示（未設定なら最新順） |
| type | card | カードタイプの表示 |
| count | 6 | 新着記事を6件表示 |
| col | 3 | パソコンでは3列表示 |
| col_sp | 1 | スマートフォンでは1列表示 |
この方法を使えば、「おすすめ記事」「人気のある記事」「使い方記事」など、特定の内容でグループを作ることができ、それを一覧表示できます。
b）新着一覧を表示させる
今まで新着一覧があったのに、それが突然なくなってしまうと、利便性が損なわれます。
そこで、ブログトップに最新6件を表示させて、もっと見たい場合は、新着一覧ページに飛ばすショートコードを作成します。
ブログトップ用固定ページに下記のショートコードを追加しましょう。これで、「新着一覧6件」と「もっと見るボタン」を表示できます。
[post_list type="card" count="6" col="3" col_sp="1" more="新着記事一覧" more_url="https://ブログURL/newpost/"]
設定するパラメーターは下記のとおりです。
| 項目 | 設定内容 | 説明 |
| type | card | カードタイプの表示 |
| count | 6 | 新着記事を6件表示 |
| col | 3 | パソコンでは3列表示 |
| col_sp | 1 | スマートフォンでは1列表示 |
| more_url | https://ブログURL/newpost/ | もっと見るボタンを押した時の遷移先URL |
完成したら、ブログトップ用固定ページを「公開」します。
5）ホームページの表示を変更する
作成したブログトップ用固定ページを、トップページに切り替える設定を行います。
「設定」＞「表示設定」をクリックし、ホームページの表示で「固定ページ」を選択してください。
さらに、「ホームページ」には「トップページ（ブログトップ用固定ページ）」を、「投稿ページ」には「新着記事（新着一覧固定ページ）」を設定して、「変更を保存」をクリックします。
※固定ページ作成時に設定した「記事タイトル」を選択してください。
これでトップページと新着記事が、作成したものに切り替わります。
修正した結果の効果検証
上記の方法でブログトップページを修正し、約1ヶ月運用した結果を紹介します。
効果検証
Googleアナリティクスで分析した結果は下記のとおりです。
| 項目 | 平均ページ滞在時間 | 直帰率 | 離脱率 |
| 改善前 | 00:01:42 | 65.46％ | 62.96％ |
| 改善後 | 00:02:00 | 67.66％ | 58.88％ |
| 結果 | 〇：17.6％（増加） | △：2.2％（増加） | 〇：4.08％（減少） |
「直帰率」は増えてしまいましたが、「平均ページ滞在時間」が増え、「離脱率」を下げることができました。
「平均ページ滞在時間が増え、離脱率が減った」ということは、ユーザーがトップページを中心に、必要なページに遷移していると考えられます。
この方法を使って、埋もれていた記事への導線を作ることができ、その記事のPVも増やすことができました。
上記画像のサイトで、直帰率が増加してしまった原因は、新着記事の更新頻度や表示位置に関係があるかもしれません。現状は、PVに大きな影響はなく、他の要素が改善されているので、様子見としています。
SWELLでトップページを簡単にカスタマイズする方法：まとめ
以上、SWELLの機能を使って、簡単にトップページをカスタマイズする方法を紹介しました。
記事が多くなり、検索エンジンからの誘導だけでは導線が確保できない場合は、この方法で誘導できます。
