基礎知識

STORK19のカスタマイズ【ヘッダーで一目で引きつける!】

初めての訪問者のこと、想像してますか?

こんにちは、はらです。

今回は、「STORK」を使ったヘッダーのカスタマイズを紹介します。

この記事について

STORKユーザー向け
・ヘッダー簡単カスタマイズを紹介
・アイキャッチ用無料画像サイトを紹介
・一目で惹きつけるヘッダー作成のポイントを紹介

10分ほどでできてしまう簡単な設定で、ユーザーに興味を持たせるヘッダーが出来上がります
トップページを訪れた人が、思わずスクロールしたくなるヘッダーを目指しましょう。

 

本記事の信頼性

これまで僕は200を超える記事を「はら旅ブログ」に投稿しています。
実際にSTORKの機能を利用して作成した、当時のブログのデザインカスタマイズを紹介します。

 

有料テーマ「STORK」とは?

 

\究極のモバイルファースト/

STORK19を購入する

シンプル・超高速テーマ

 

STORK」はwordpressの有料テーマの一つです。
「はら旅ブログ」のサイトは「STORK」のテーマで作成しています。

便利なショートコードが設置できたり。ヘッダーにスライダーを設置したり。
アイキャッチ画像にカテゴリ名を表示したりと、便利な機能がたくさん詰まったテーマになります

 

「STORK」についてはこちらの記事で紹介しています。

STORK19アイキャッチ
参考有料テーマ「STORK」とは?記事を作る時間を半分にしてオシャレに変えるテーマ

続きを見る

 

 

「STORK」でのヘッダーカスタマイズ

子テーマの編集を推奨

子テーマを編集してカスタマイズすることが推奨されています。

子テーマのダウンロードはOPEN CAGEのサイトから行うことができます。

 

魅力的なヘッダーアイキャッチを作る

今回作るヘッダーのイメージ

まず、以下のようなヘッダーを作っていきます。

次のような流れで設定していきます。

1.背景画像の設定
2.英語表示テキストの設定
3.日本語表示テキストの設定
4.ボタンURLの設定
5.ボタンテキストの設定

順番に解説していきます。

 

背景画像の設定

「外観」>「カスタマイズ」>「トップページ設定」>「ヘッダーアイキャッチの設定」へと進みます。

まずは背景画像を設定しましょう。

サイトの第一印象を決める大切な画像になります。
じっくりと考えて画像選びをしましょう。

背景画像選びのポイント

・サイトの内容が想像できる
・インパクトのある画像
・横長で見栄えのする画像がオススメ


当サイトではマチュピチュが背景です。

 

良い背景用の画像がない場合は、こちらの無料画像サイトがオススメです。

wordpressフリー画像サイトアイキャッチ
参考【登録不要】WordPress(ワードプレス)で使えるフリー画像サイト4選〜写真からイラストまで〜

続きを見る

 

英語表示テキストの設定

当サイトでは、「-to the world-」を入力しています。
日本語でも入力できますが、英語の方がかっこいいかと。

入力しなくてもOK。

 

日本語表示テキストの設定

印象を残す言葉を簡潔に入力しましょう。

テキストのポイント

・サイトの内容が想像できる
・インパクトのある文
・1行の短い1文でまとめる

当サイトでは、「自分に嘘をつかない人生を」と入力しました。

またスマホとパソコンで改行のされ方が違うので、スマホの表示も確認しましょう。

 

ボタンURLの設定

ここには、トップページを訪れた人に一番見てもらいたいページのURLを入力しましょう。

どんなターゲットに焦点を当てるかが非常に重要になります。
あなたのブログのトップページを訪れた人は、何を求めて訪れているのか、深く想像して考えましょう。

僕は「必要なのは覚悟」というページに飛ぶように設定しました。

 

ボタンテキストの設定

思わずクリックしてしまうようなテキストを入力しましょう。

当サイトでは、「必要なのは○○」と記載しました。

 

 

 

かっこいいスライダー設定

次にヘッダー画像の下に、スライダーを設定していきます。


こんな感じのスライダーを設置していきます。
登録したおすすめ記事が自動的に流れて表示されます。

実はこういうのが欲しくて、「STORK」を導入したんですよね。

 

「トップページ設定」>「スライダー設定」

こちらで「表示する」を選択しておきます。

 

「投稿」>「タグ」

次に、表示したい投稿を選択していくのですが、そのためにはタグを設定する必要があります。

名前はなんでも良いのですが、当サイトでは、「おすすめ記事一覧」にしています。
スラッグには必ず「pickup」と入力してください
説明には何も書きません。

入力できたら「更新」。

 

「投稿」>「投稿一覧」のタグを設定する

次に、先ほど作ったタグを表示したい投稿に入力していきます。

当サイトの場合、「おすすめ記事一覧」というタグをつけていきます。
入力したら「更新」

表示したい投稿全てに、同じようにタグを入力していきましょう。

 


このように表示されていれば無事成功です。

 

スライダーで表示する記事は厳選する

スライダーは記事を5以上から表示できます。
しかし、10記事も20記事も表示させると逆効果になります。

初めてこのサイトを訪れた人はどのページに興味を持つのか」、また「自分はどのページに訪れて欲しいのか」、よく考えて厳選しましょう。

 

 

 

一目で引きつけるヘッダーを作ろう

まとめ

・自分のサイトにあったアイキャッチ画像を選ぼう
・引きつけるキャッチコピーを考えよう
・初めて訪れた人が求めるものを想像しよう
・スライダーの記事を厳選しよう

たったのこれだけでも、サイトの印象が大きく変わります。
当ブログでは定期的にヘッダーやトップページの見た目が変えています。

ぜひ、サイト作りの参考にしてみてくださいね(^^)
質問等ありましたら、気軽にコメントくださいね。

 

2020年1月28日現在、ライター講座でアドバイスをもらい、ヘッダー画像を大幅に変更しました。

\究極のモバイルファースト/

STORK19を購入する

シンプル・超高速テーマ

-基礎知識
-, ,

© 2020 はらの自由帳 Powered by AFFINGER5