たった1時間でストークのトップページを劇的にオシャレにする方法【めっちゃ簡単です】

当サイトでも使用しているWordpressのテンプレート【STORK】はブロガー界で人気がある有料テンプレートの1つです。

ストークは簡単におしゃれな設定もできる上、Googleアナリティクスやsearchconsole(サーチコンソール)の手続きもHTMLをいじらなくても済む為、ブログ初心者の方にはオススメしたいテーマなのですが、あまりにもSTORKの数が多すぎるので、みんな同じでデザインに個性のないブログになってしまいがち・・

 

トップページを見た瞬間にストーク使っているっていうのが分かってしまうわけです。

私の別のサイトのストークのトップページです。

 

デフォルトだとこんな感じ(シンプルパターンPC表示)=スマホも同じ

コレだと、カテゴリーはサイドバーの下に載っているけど、初めてこのブログに来てくれた読者が読みにくいかなって・・

トップページに案内板がないイメージです。

そこで私が理想だなって思ったトップページの順番はコチラ

理想的なトップページの順番

1:オススメ記事(自信のある記事・アフィリエイト記事)

2:メインになるカテゴリー

3:最新記事(アイキャッチあり)

4:1日で一番読まれている記事のランキング(アイキャッチあり)

トップページの重要性を知り、調べてデザインを変更してみたところ1時間でできたので、今回はストークのトップページを簡単におしゃれにする方法について解説していきたいと思います。

秋月

2019年2月追記。

トップページ変更時は月3万pv程度のブログでしたが、2018年11月では月12万pvまで上昇。

トップページの変更により、キラーページのアクセスが増えたことで、アフィリエイトリンクのクリック率が上昇し、結果3万⇒40万まで収益も増えました。

トップページ変更をオススメします。

ストークのトップページを簡単におしゃれに変更する手順を解説

1:固定ページを作成する(ワンカラム)

ストークのトップページを変更する為には、固定ページで変更したい形のトップページを作る必要があります。

既存のトップページからカスタマイズを利用して、既存のトップページに変更した固定ページを貼り付けるイメージ。

まずWordpressの固定ページの新規作成を行い、右側にあるテンプレートをサイドバーなし(1カラムに設定します。)

画像の通りにできましたら、1度下書き保存を行い、次はオススメ記事(自信のある記事・アフィリエイト記事)へのリンクを張るバナーを作ります。

 

2:オススメ記事のバナーを作る

 

オススメ記事へのリンクを張るバナーを作成し、固定ページに貼っていきます。

作成した画像の中にオススメ記事を貼り付けておけば、画像をクリックすればオススメ記事に飛ぶように設定することができます。

画像のバナーは1100✕300を3つ作成しました。

PC表示でも綺麗に表示される上、スマホでもはっきりと写るのでオススメです。

 

バナー広告を作る上でオススメなソフトは簡単にサイズを指定できて綺麗に仕上げることができるgarakuがオススメ。

garakuは年間4980円の有料ソフトにはなりますが、操作は非常に簡単で、短時間でバナーを作れるのはもちろん、実際に売れている起業が使用しているサンプルテンプレートも使えるので、それを少しアレンジする簡単に成約率が見込めるバナーを作る事ができます。

私はこのソフトで作った不動産投資のバナーを作ってすでに2件成約してます。(売り上げ3.2万円)

 

 

アフィリエイトを考えているなら、画像で売り上げが変わりますのであると非常に便利なツールです。

 

3:カテゴリー欄を3カラムで作成する

次はメインカテゴリーの作成に入ります。

ここではストークであらかじめ用意されているショートコードを利用します。

【AddQuicktag】というショートコードを入れるプラグインを入れておけば、すぐに3カラムにすることが可能になります

ではショートコードで3カラム(スマホだと1カラム)を選ぶと下記のHTMLが出てきます。

画像や文字の入れ方は、下記の補足を参考に入れてみてください。

3カラムのショートキーの入れる順番

カテゴリー名h3

画像+カテゴリーリンク

カテゴリー説明

記事一覧ボタン(リンク)

カテゴリー名h3

画像+カテゴリーリンク

カテゴリー説明

記事一覧ボタン(リンク)

カテゴリー名h3

画像+カテゴリーリンク

カテゴリー説明

記事一覧ボタン(リンク)

 

今回は紹介したいメインカテゴリーが3つでしたので、3カラムを利用しました。

もし4つを並べたい場合は、2カラムを2つ作成するか、CSSのwidth設定を25%に設定するかになります。

2カラムを2つを利用した方が早いので、cssは極力いじらない方向で行きましょう。

 

メインカテゴリーが張れれば、私の場合は固定ページの作成は以上になります。

メインカテゴリーの下に、プロフィールやお問い合わせを張りたい場合は、2カラムのショートコードを利用して上記同様に作成していく形になります。

 

4:完成した固定ページをカスタマイズで張る。

 

作成した固定ページをカスタマイズで設定する必要があります。ストークのカスタマイズの中のホームページ設定をクリックします。

ホームページ設定をクリックするとホームページの表示とホームページを指定する箇所がありますので、その2つを設定する形になります。

ホームページの表示を最近の投稿から固定ページに変更し、ホームページを作成した固定ページに変更します。

すると、従来の下記の画像のように更新記事が表示されるトップページから固定ページで作成したデザインに変更されるようになります。

ただここで1つ問題が発生します・・・

 

ここで設定した固定ページは最新記事(アイキャッチあり)と、1日で一番読まれている記事のランキング(アイキャッチあり)が全く表示されません。

コレでは従来の最新記事が載っているトップページよりも使いづらくなってしまい、逆にユーザービリティ(使いやすさ)が下がってしまいます。

固定ページがトップページになっても最新記事が表示されるように設定する必要があります。

 

ここは素直にプラグインを利用します。

 

5:最新記事・お気に入り記事のプラグインを挿入する

トップページに最新記事と記事ランキングを入れる為には、最新記事とランキングを表示してくれるプラグインを取得し、外観⇒ウェジェットからPC・スマホのトップページ下に貼り付ける方法です

 

最新記事が表示され、アイキャッチも一緒に表示されるプラグインは【Newpost Catch】がオススメです。

プラグインをインストール後に有効にしておけば、特に設定をすることもなく使用することができます。

1日で一番読まれている記事のランキングも最新記事の下に表示したかったので、【WordPress Popular Posts】をあわせて取得しました。

プラグインを取得したら、下記の通りにウェジェットを設定します。

これで、トップページに最新記事と記事ランキングが表示されるようになりました。

これで以上になります。

トップページの変更はものすごく難しく、敷居が高いですが、この方法であれば簡単だなって思ってくれる人も居るはず。

 

WordPress Popular Postsのデフォルトで表示されるアイキャッチは、Newpost Catchに比べて幅が小さく表示されてしまい、横のラインが揃っていないため、見た目が美しくありません。

WordPress Popular Postsで表示されるアイキャッチのデフォルトの幅は75pxから、100pxに変更すれば、Newpost Catchで表示されるアイキャッチの横のラインが合いますので、設定することをオススメします。

 

まとめ:ストークのトップページを変更後はこうなりました。

before

 

after

 

トップページを初めてデザインしたので、個人的には大満足ですね。

デフォルトだと、無難ですがどのブログも個性がないような感じに見えてしまうんですよね。

 

中にはデフォルトのストークが多すぎて、ストークにするのを辞めようするなら、トップページを変更すれば良いですよね。

ストークは設定も簡単な上、モバイルファーストで特別な設定をしなくても良いテーマなので、ブログを初めてやる人にお勧めテーマです。

秋月

ストークは有料テンプレートになりますが、ブログで稼ぐなら、デザインに時間を掛けなくて済むのでオススメテーマの1つになります。

ただ、お金に余裕がない人はWordPress初心者が挫折しないテンプレートはどれ?無料3選をプロが解説をご覧ください。

副業から実績0でも好きな事を情報発信して月10万~30万を稼ぎませんか?

1からビジネスを始める。またブログの成果が出ない人ほど「仕組み化」を取り入れるべきです。

闇雲にブログを2年間書き続け、脱サラすることは出来ましたが、アクセス重視のブログ運営になると毎日ブログを書き続ける事から逃れられません。

毎日アクセスのために書き続ける事に絶望し時に「仕組み化」を覚え、労働時間が1/3までに減った秘密を無料で公開します。

メールアドレス

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です