ここあです。
私はWordPressテーマSTORK（ストーク）を使用しています。
※現在のこのテーマは「THE THOR」です。
STORKを使われているあなたはご存知だと思いますが…
ストークのトップページはデフォルトで
最新記事の一覧が表示されるように設定されています。
まぁ、STORKはブロガーのためのテーマなので
一般的なブログレイアウトになるのは当然と言えば当然＾＾
しかし、わたしのように
1つのテーマに絞り記事を書き集めていくと…
他のテーマの記事を書いているにも関わらず
あるテーマだけに絞った特化型のブログに見えてしまう
というのも少しもったいない。そう思ったんですね。
↓特化型ブログに見えてしまいます＾＾；
さらにはSTORKの場合は利用ユーザーも多いので
どうしてもトップページの印象が他のブロガーと被ってしまう。
そんなことを思っていました。
なので…
- もっと他のコンテンツも見て欲しい
- 他のブロガーともしっかり差別化したい
ということで
思い切って
オリジナルのトップページを作ってみました。
今回は私が実践した
トップページを固定ページでカスタマイズする方法
の全てをご紹介しますので
トップページを固定ページに変更して
- 他のブロガーと差別化したい
- 訪問者のユーザビリティを上げたい
という方は
ぜひチャレンジしてみてくださいね＾＾
トップページをカスタマイズするために
記事がある程度増えてくると
カテゴリーも散漫になってきます。
なので、まずは訪問者に
- どの記事を一番読んでもらいたいのか
- どんなカテゴリーにまとめられるのか
整理するところから始めましょう。
私の場合は一番読んで欲しい記事は最上部に
カテゴリーは整理して補足説明を加えています。
最新記事とよく読まれている記事の一覧も作成しています。
訪問者の立場になると分かりやすいと思いますが…
トップページをパッと見た時に
自分の探している記事が見つけやすいというのが
一番親切なサイトと言えますよね。
さらに、訪問者の気持ちを探ってみると…
- このカテゴリーも役立ちそう！
- 他にどんな記事が読まれてる？
- どんな人がこの記事を書いているの？
- 管理人さんに問い合わせしてみようかな？
など
いろいろと行動や思考を想像してみると
どんなコンテンツをトップページにもってくればいいか
構成要素が浮かんできます。
せっかく興味をもってサイトを訪問してくれたのに
サイトの案内板がなくて帰られてしまうのは
非常にもったいないです。
がんばって人の役に立つ記事を書いている以上は
一人でも多くの方にたくさん記事を読んでもらいたいですよね。
トップページに入れた6つの要素
私がトップページに入れた要素は以下の6つです。
- おすすめ記事
- メインカテゴリー
- 最新記事
- よく読まれている記事
- プロフィール
- 問い合わせ
プロフィールや問い合わせを入れるかどうかは
個人差があると思いますが
少なくとも…
おすすめ記事からよく読まれている記事の
4つは押さえておきたいですね。
トップページの順番は
人それぞれ見せたいコンテンツが変わると思うので
どのコンテンツを上から並べるか考えながら
時には順番を並び替えたりして
計測してみるというのも面白いですね＾＾
それでは、トップページを
固定ページでカスタマイズする方法を
順番に説明していきますね。
ストークのトップページを固定ページにする方法
まずはトップページのベースとなる
固定ページを作成します。
ダッシュボードメニューから
固定ページ → 新規追加をクリック。
新規作成ページを開いたら
固定ページの属性テンプレートを
デフォルトテンプレートから
サイドバーなし（1カラム）に変更します。
※これでサイドバーが非表示になります。
固定ページの属性テンプレートが設定できたら
タイトルは付けずに下書き保存します。
ストークのトップページをカスタマイズする手順
上から順番に説明していきます。
最上部のおすすめ記事を表示する方法
わたしの場合、1100×250pxのバナー画像を作成し
そのままメディアを追加で画像を読み込み
読んで欲しい記事のリンクを貼って並べています。
リンクの貼り方は簡単です。
画像を配置し、配置した画像を改めて選択。
ツールバーのリンクの挿入/編集ボタンをクリックすると…
以下のような画面になります。
あとはURLの入力欄にリンクさせたい記事のURLを
貼り付ければリンク画像が完成します。
すごく簡単ですよね。
ただし、上記の方法だと
PC版では画像が大きく表示され、見やすいのですが
スマホ版になると画像が小さくなり分かりにくいので
画像サイズの調整や
2カラム表示にしてスマホ版用にも最適化するなど
まだまだ改善の余地がありそうです＾＾；
カテゴリー一覧を作る方法
カテゴリー一覧は
STORKのショートコードを使って
3カラム表示させています。
構成要素は以下の通りです。
記事一覧へのボタンもストークのショートコード
シンプルボタンを使用しています。
↓ リンクボタンのショートコード
［btn class="simple"］シンプルボタン［/btn］※上記コードをコピペする場合は［ ］を半角［ ］に打変えてください。
また、画像の下に各カテゴリーの
おすすめ記事や最新記事を入れるのもいいですね＾＾
上記、おすすめ記事の一覧を表示させる場合は
タイトルの長さを統一しましょう。
「最新記事」と「よく読まれている記事」の作成方法
察しの良いあなたはもうお分かりだと思いますが
最新記事と良く読まれている記事の部分は
STORKのショートコード、2カラム表示を使用しています。
最新記事および、良く読まれている記事は
関連記事（リンクカード）のショートコードを使用し
それぞれ個別にID番号を5つずつ指定するのですが
ID番号をまとめて指定すると
古い記事が下から順に勝手に並んでしまうので
かなり手間ですが、ID番号を1つずつ指定して
記事が表示される順番をコントロールしています。
※WordPress Popular Postsで表示される人気記事と合わせています。
参考までに私が使っているHTMLコードは
↓ こんな感じになっています。
なお、リンクカードはCSSでカスタマイズしています。
※リンクカードのカスタマイズ方法はこちら
【コピペだけ！】STORK（ストーク）のリンクカードをおしゃれにカスタマイズ！
「プロフィール」と「お問い合わせ」の作成方法
こちらもショートコードの
2カラム表示で並べています。
並べ方は…
ショートコードを上手く組み合わせると
レイアウトも簡単なのでぜひ取り入れてみてくださいね。
固定ページを公開する
トップページのレイアウトが固まった時点で
固定ページをトップページに設定しましょう。
固定ページで新たに作成したトップページは
サイトの入り口として表示される
ホームページに設定しなければなりません。
ホームページの設定は以下の手順で行います。
ダッシュボードメニューから
外観 → カスタマイズ をクリック。
カスタマイズの編集画面を開いたら
ホームページ設定を選択します。
ホームページ設定画面では以下のように…
- ホームページの表示：固定ページ
- ホームページ：タイトルなしの固定ページ
を設定します。
最後に公開ボタンをクリックすれば
新たに固定ページで作成したトップページが
ホームページとして表示されます。
投稿一覧ページ（過去記事一覧）の作成方法
トップページを固定ページで設定すると
1つだけ問題が出てきます。
それは…
これまで当たり前のように表示されていた
記事一覧ページ（最新投稿一覧）が見られなくなるということです＾＾；
当然、できるだけたくさんの記事を
訪問者の方に見てもらいたいわけですから
これまで通り記事一覧ページも必要ですよね＾＾
ということで記事一覧ページも固定ページで作成してしまいます。
作成の仕方は非常に簡単なので順番に説明していきますね。
まずはトップページ同様新規固定ページを作成します。
ダッシュボードメニューから
固定ページ → 新規追加 をクリック。
新規作成ページを開いたら
- 記事のタイトル
- パーマリンク
の2つを入力しましょう。
私の場合…
- タイトル：記事一覧
- パーマリンク：pastpost
としました。
タイトルとパーマリンクが入力できたら
本文は記入せずに公開ボタンをクリックし、設定を保存します。
設定が保存できたら
再びダッシュボードメニューから
外観 → カスタマイズをクリックし
先ほどと同じくホームページ設定の画面に移動しましょう。
ホームページ設定画面では
一番下の投稿ページを新たに作成した
記事一覧のページを指定します。
そうすると、記事一覧ページでは
従来のトップページ同様以下のように表示されます。
私の場合は、この記事一覧で作成した
パーマリンクのURLをリンクボタンに設定し
過去記事一覧としてカテゴリー表示の下に配置しています。
トップページのカスタマイズはいろいろできる！
レイアウト方法が分かれば
トップページは見せ方をいろいろ変えられます。
例えば画像を4つ並べてリンクを貼ってみたり…
最上部に最新記事を並べてみたり…
※最新記事を表示させるウィジェットを使えば上記のような最新記事一覧を作ることができます。
ぜひいろいろと試してみてくださいね。
トップページをカスタマイズするコツ
トップページをカスタマイズして
訪問者のユーザビリティを上げる以上は
レイアウトが美しくなければ意味がありません。
- レイアウトが崩れていて分かりにくい
- 目の導線がズレていて読みにくい
なんてことになると
逆にユーザビリティが下がります。
なので、トップページをカスタマイズする際に
一番気をつけて欲しいのは…
- レイアウトを揃える
- 左右の高さを統一する（文字数を一定にする）
などをしっかりと意識しましょう。
私のトップページを見てもらうと分かると思いますが
- 記事タイトルの長さ
- カテゴリー説明の文字数
を全て統一し
左右がキレイに並ぶよう調整しています。
記事を書く人、訪問者によっては
それほど見やすさを気にしない人もいるかもしれませんが
特にショートコードを使って
2カラムや3カラム表示をさせるなら
左右の高さはキレイに揃っている方が
確実に見やすいし、ブログの印象も良いはずです。
私はデザイナーなので
少なくとも私のブログを見てくれる方には
キレイに見せる方法というのも
しっかりとお伝えてしていきます＾＾
トップページをカスタマイズして差別化しよう！
STORKは人気のテーマなので使っている人も多く
「どのブログも同じように見られてしまう」という
デメリットを挙げてる人もいますが
STORKはトップページのカスタマイズもできるし
バイラル風のレイアウトやランディングページなどで
記事の見せ方もいくらでも変えられます。
STORKの機能をフルに活用もせず
他のブロガーとデザインが被ってしまうと言うのは
ちょっと違うんじゃない？と私は思うんですよね。
なので、1人でも多くの方に
STORKをカスタマイズする楽しさや
他のブロガーと差別化するための方法を知ってもらいたくて
STORKのカスタマイズ方法を
いろいろとまとめています。
もちろん、トップページだけでなく
記事の見出しやリスト表示
ちょっとマニアックなトップへ戻るボタンまで
細かい部分のカスタマイズ方法もありますので
ぜひ気になる方は合わせて読んでみてください。
最後までお読みいただきありがとうございました！
