WPテーマ「STORK」のトップページを劇的にカスタマイズする方法!

WPテーマ「STORK」のトップページを劇的にカスタマイズする方法!

 

ここあです。

 

私はWordPressテーマSTORK(ストーク)を使用しています。

 

STORKを使われているあなたはご存知だと思いますが…

ストークのトップページはデフォルトで

最新記事の一覧が表示されるように設定されています。

 

まぁ、STORKはブロガーのためのテーマなので

一般的なブログレイアウトになるのは当然と言えば当然^^

 

しかし、わたしのように

1つのテーマに絞り記事を書き集めていくと…

 

他のテーマの記事を書いているにも関わらず

あるテーマだけに絞った特化型のブログに見えてしまう

というのも少しもったいない。そう思ったんですね。

 

↓特化型ブログに見えてしまいます^^;

トップページイメージ

 

 

さらにはSTORKの場合は利用ユーザーも多いので

どうしてもトップページの印象が他のブロガーと被ってしまう。

そんなことを思っていました。

 

なので…

  • もっと他のコンテンツも見て欲しい
  • 他のブロガーともしっかり差別化したい

ということで

 

思い切って

オリジナルのトップページを作ってみました。

 

今回は私が実践した

トップページを固定ページでカスタマイズする方法

の全てをご紹介しますので

 

トップページを固定ページに変更して

  • 他のブロガーと差別化したい
  • 訪問者のユーザビリティを上げたい

という方は

ぜひチャレンジしてみてくださいね^^

 

トップページをカスタマイズするために

記事がある程度増えてくると

カテゴリーも散漫になってきます。

 

なので、まずは訪問者に

  • どの記事を一番読んでもらいたいのか
  • どんなカテゴリーにまとめられるのか

整理するところから始めましょう。

 

私の場合は一番読んで欲しい記事は最上部に

カテゴリーは整理して補足説明を加えています。

最新記事とよく読まれている記事の一覧も作成しています。

 

訪問者の立場になると分かりやすいと思いますが…

 

トップページをパッと見た時に

自分の探している記事が見つけやすいというのが

一番親切なサイトと言えますよね。

 

さらに、訪問者の気持ちを探ってみると…

  • このカテゴリーも役立ちそう!
  • 他にどんな記事が読まれてる?
  • どんな人がこの記事を書いているの?
  • 管理人さんに問い合わせしてみようかな?

など

 

いろいろと行動や思考を想像してみると

どんなコンテンツをトップページにもってくればいいか

構成要素が浮かんできます。

 

せっかく興味をもってサイトを訪問してくれたのに

サイトの案内板がなくて帰られてしまうのは

非常にもったいないです。

 

がんばって人の役に立つ記事を書いている以上は

一人でも多くの方にたくさん記事を読んでもらいたいですよね。

 

トップページに入れた6つの要素

私がトップページに入れた要素は以下の6つです。

 

  • おすすめ記事
  • メインカテゴリー
  • 最新記事
  • よく読まれている記事
  • プロフィール
  • 問い合わせ

 

プロフィールや問い合わせを入れるかどうかは

個人差があると思いますが

 

少なくとも…

おすすめ記事からよく読まれている記事の

4つは押さえておきたいですね。

 

トップページの順番は

人それぞれ見せたいコンテンツが変わると思うので

どのコンテンツを上から並べるか考えながら

 

時には順番を並び替えたりして

計測してみるというのも面白いですね^^

 

それでは、トップページを

固定ページでカスタマイズする方法を

順番に説明していきますね。

 

ストークのトップページを固定ページにする方法

まずはトップページのベースとなる

固定ページを作成します。

 

ダッシュボードメニューから

固定ページ → 新規追加をクリック。

ダッシュボードメニュー

 

 

新規作成ページを開いたら

固定ページの属性テンプレートを

 

デフォルトテンプレートから

サイドバーなし(1カラム)に変更します。

※これでサイドバーが非表示になります。

固定ページの属性

 

 

固定ページの属性テンプレートが設定できたら

タイトルは付けずに下書き保存します。

 

ストークのトップページをカスタマイズする手順

上から順番に説明していきます。

 

最上部のおすすめ記事を表示する方法

 

 

わたしの場合、1100×250pxのバナー画像を作成し

そのままメディアを追加で画像を読み込み

読んで欲しい記事のリンクを貼って並べています。

 

リンクの貼り方は簡単です。

 

画像を配置し、配置した画像を改めて選択。

ツールバーのリンクの挿入/編集ボタンをクリックすると…

リンクの追加

 

 

以下のような画面になります。

画像にリンクを追加

 

 

あとはURLの入力欄にリンクさせたい記事のURLを

貼り付ければリンク画像が完成します。

すごく簡単ですよね。

 

ただし、上記の方法だと

PC版では画像が大きく表示され、見やすいのですが

スマホ版になると画像が小さくなり分かりにくいので

 

画像サイズの調整や

2カラム表示にしてスマホ版用にも最適化するなど

まだまだ改善の余地がありそうです^^;

 

カテゴリー一覧を作る方法

カテゴリー一覧

 

 

カテゴリー一覧は

STORKのショートコードを使って

3カラム表示させています。

 

構成要素は以下の通りです。

HTML

[colwrap]
[col3]
h3見出し
画像
リンクテキスト
カテゴリー説明
「記事一覧へ」ボタン
[/col3]

[col3]
h3見出し
画像
リンクテキスト
カテゴリー説明
「記事一覧へ」ボタン
[/col3]

[col3]
h3見出し
画像
リンクテキスト
カテゴリー説明
「記事一覧へ」ボタン
[/col3]
[/colwrap]

記事一覧へのボタンもストークのショートコード

シンプルボタンを使用しています。

 

↓ リンクボタンのショートコード

btn class="simple"シンプルボタン/btn

※上記コードをコピペする場合は[ ]を半角[ ]に打変えてください。

 

また、画像の下に各カテゴリーの

おすすめ記事や最新記事を入れるのもいいですね^^

カテゴリー表示

 

上記、おすすめ記事の一覧を表示させる場合は

タイトルの長さを統一しましょう。

 

「最新記事」と「よく読まれている記事」の作成方法

固定ページカスタマイズ

 

 

察しの良いあなたはもうお分かりだと思いますが

最新記事と良く読まれている記事の部分は

STORKのショートコード、2カラム表示を使用しています。

 

さらに、最新記事の方は

関連記事(リンクカード)のショートコードを使用し

 

このように[kanren2 postid=""]

関連記事のID番号を空欄にしておくことで

常に最新の投稿記事が自動で表示されるようになります。

 

また、良く読まれている記事の方は

関連記事のショートコードで

ID番号を5つ指定しているのですが

 

ID番号をまとめて指定すると

古い記事が下から順に勝手に並んでしまうので

 

番号を1つずつ指定して

記事が表示される順番をコントロールしています。

※WordPress Popular Postsで表示される人気記事と合わせています。

 

参考までに私が使っているHTMLコードは

↓ こんな感じになっています。

HTML

[colwrap]
[col2]
h3見出し(最新記事)
[kanren2 postid=""]
[/col2]

[col2]
h3見出し(よく読まれている記事)
[kanren2 postid="000"](記事ID指定)
[kanren2 postid="000"](記事ID指定)
[kanren2 postid="000"](記事ID指定)
[kanren2 postid="000"](記事ID指定)
[kanren2 postid="000"](記事ID指定)
[/col2]
[[/colwrap]

なお、リンクカードはCSSでカスタマイズしています。

 

※リンクカードのカスタマイズ方法はこちら

【コピペだけ!】STORK(ストーク)のリンクカードをおしゃれにカスタマイズ!

 

「プロフィール」と「お問い合わせ」の作成方法

「プロフィール」と「お問い合わせ」の作成方法

 

 

こちらもショートコードの

2カラム表示で並べています。

 

並べ方は…

HTML

[colwrap]
[col2]
h3見出し(プロフィール)
画像
説明文
リンクボタン
[/col2]

[col2]
h3見出し(お問い合わせ)
画像
説明文
リンクボタン
[/col2]

 

ショートコードを上手く組み合わせると

レイアウトも簡単なので

ぜひ取り入れてみてくださいね。

 

固定ページを公開する

トップページのレイアウトが固まった時点で

固定ページをトップページに設定しましょう。

 

固定ページで新たに作成したトップページは

サイトの入り口として表示される

ホームページに設定しなければなりません。

 

マメ知識

一般的にホームページ = Webサイトと思われている方が非常に多いですが
本来、ホームページはWebサイトのトップページを表す用語です。

 

ホームページの設定は以下の手順で行います。

 

ダッシュボードメニューから

外観 → カスタマイズ をクリック。

ダッシュボードメニュー

 

 

カスタマイズの編集画面を開いたら

ホームページ設定を選択します。

ホームページ設定

 

 

ホームページ設定画面では以下のように…

ホームページ設定

 

 

  • ホームページの表示:固定ページ
  • ホームページ:タイトルなしの固定ページ

を設定します。

 

最後に公開ボタンをクリックすれば

新たに固定ページで作成したトップページが

ホームページとして表示されます。

 

投稿一覧ページ(過去記事一覧)の作成方法

投稿一覧ページ(過去記事一覧)

 

トップページを固定ページで設定すると

1つだけ問題が出てきます。

 

それは…

これまで当たり前のように表示されていた

記事一覧ページ(最新投稿一覧)が見られなくなるということです^^;

 

当然、できるだけたくさんの記事を

訪問者の方に見てもらいたいわけですから

これまで通り記事一覧ページも必要ですよね^^

 

ということで記事一覧ページも固定ページで作成してしまいます。

作成の仕方は非常に簡単なので順番に説明していきますね。

 

まずはトップページ同様新規固定ページを作成します。

ダッシュボードメニューから

固定ページ → 新規追加 をクリック。

ダッシュボードメニュー

 

 

新規作成ページを開いたら

  • 記事のタイトル
  • パーマリンク

の2つを入力しましょう。

 

私の場合…

  • タイトル:記事一覧
  • パーマリンク:pastpost

としました。

 

記事一覧ページの作成

 

 

タイトルとパーマリンクが入力できたら

本文は記入せずに公開ボタンをクリックし、設定を保存します。

 

設定が保存できたら

 

再びダッシュボードメニューから

外観 → カスタマイズをクリックし

先ほどと同じくホームページ設定の画面に移動しましょう。

 

ホームページ設定画面では

一番下の投稿ページを新たに作成した

記事一覧のページを指定します。

ホームページ設定画面

 

 

そうすると、記事一覧ページでは

従来のトップページ同様以下のように表示されます。

記事一覧ページ

 

 

私の場合は、この記事一覧で作成した

パーマリンクのURLをリンクボタンに設定し

投稿一覧ページ(過去記事一覧)

 

過去記事一覧としてカテゴリー表示の下に配置しています。

 

トップページのカスタマイズはいろいろできる!

レイアウト方法が分かれば

トップページは見せ方をいろいろ変えられます。

 

例えば画像を4つ並べてリンクを貼ってみたり…

 

 

最上部に最新記事を並べてみたり…

※最新記事を表示させるウィジェットを使えば上記のような最新記事一覧を作ることができます。

 

ぜひいろいろと試してみてくださいね。

 

トップページをカスタマイズするコツ

トップページをカスタマイズして

訪問者のユーザビリティを上げる以上は

レイアウトが美しくなければ意味がありません。

 

  • レイアウトが崩れていて分かりにくい
  • 目の導線がズレていて読みにくい

なんてことになると

逆にユーザビリティが下がります。

 

なので、トップページをカスタマイズする際に

一番気をつけて欲しいのは…

  • レイアウトを揃える
  • 左右の高さを統一する文字数を一定にする)

などをしっかりと意識しましょう。

 

私のトップページを見てもらうと分かると思いますが

  • 記事タイトルの長さ
  • カテゴリー説明の文字数

を全て統一し

左右がキレイに並ぶよう調整しています。

 

記事を書く人、訪問者によっては

それほど見やすさを気にしない人もいるかもしれませんが

 

特にショートコードを使って

2カラムや3カラム表示をさせるなら

 

左右の高さはキレイに揃っている方が

確実に見やすいし、ブログの印象も良いはずです。

 

私はデザイナーなので

少なくとも私のブログを見てくれる方には

 

キレイに見せる方法というのも

しっかりとお伝えてしていきます^^

 

トップページをカスタマイズして差別化しよう!

STORKはトップページで差別化しよう!

 

STORKは人気のテーマなので使っている人も多く

「どのブログも同じように見られてしまう」という

デメリットを挙げてる人もいますが

 

STORKはトップページのカスタマイズもできるし

バイラル風のレイアウトやランディングページなどで

記事の見せ方もいくらでも変えられます。

 

STORKの機能をフルに活用もせず

他のブロガーとデザインが被ってしまうと言うのは

ちょっと違うんじゃない?と私は思うんですよね。

 

なので、1人でも多くの方に

STORKをカスタマイズする楽しさや

他のブロガーと差別化するための方法を知ってもらいたくて

 

STORKのカスタマイズ方法を

いろいろとまとめています。

 

もちろん、トップページだけでなく

記事の見出しやリスト表示

ちょっとマニアックなトップへ戻るボタンまで

 

細かい部分のカスタマイズ方法もありますので

ぜひ気になる方は合わせて読んでみてください。

 

もしも設定でよく分からないことがあれば

いつでも気軽にご相談くださいね!

「ここあ」に問い合わせをする

 

最後までお読みいただきありがとうございました!

 

合わせて読みたい!

WPテーマ「STORK」のトップページを劇的にカスタマイズする方法!

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。