初めての訪問者のこと、想像してますか？
こんにちは、はらです。
今回は、「STORK」を使ったヘッダーのカスタマイズを紹介します。
この記事について
・STORKユーザー向け
・ヘッダー簡単カスタマイズを紹介
・アイキャッチ用無料画像サイトを紹介
・一目で惹きつけるヘッダー作成のポイントを紹介
10分ほどでできてしまう簡単な設定で、ユーザーに興味を持たせるヘッダーが出来上がります。
トップページを訪れた人が、思わずスクロールしたくなるヘッダーを目指しましょう。
本記事の信頼性
これまで僕は200を超える記事を「はら旅ブログ」に投稿しています。
実際にSTORKの機能を利用して作成した、当時のブログのデザインカスタマイズを紹介します。
目次
有料テーマ「STORK」とは？
\究極のモバイルファースト/
シンプル・超高速テーマ
「STORK」はwordpressの有料テーマの一つです。
「はら旅ブログ」のサイトは「STORK」のテーマで作成しています。
便利なショートコードが設置できたり。ヘッダーにスライダーを設置したり。
アイキャッチ画像にカテゴリ名を表示したりと、便利な機能がたくさん詰まったテーマになります
「STORK」についてはこちらの記事で紹介しています。
-
-
参考有料テーマ「STORK」とは？記事を作る時間を半分にしてオシャレに変えるテーマ
続きを見る
「STORK」でのヘッダーカスタマイズ
子テーマの編集を推奨
子テーマを編集してカスタマイズすることが推奨されています。
子テーマのダウンロードはOPEN CAGEのサイトから行うことができます。
魅力的なヘッダーアイキャッチを作る
今回作るヘッダーのイメージ
まず、以下のようなヘッダーを作っていきます。
次のような流れで設定していきます。
1.背景画像の設定
2.英語表示テキストの設定
3.日本語表示テキストの設定
4.ボタンURLの設定
5.ボタンテキストの設定
順番に解説していきます。
背景画像の設定
「外観」＞「カスタマイズ」＞「トップページ設定」＞「ヘッダーアイキャッチの設定」へと進みます。
まずは背景画像を設定しましょう。
サイトの第一印象を決める大切な画像になります。
じっくりと考えて画像選びをしましょう。
背景画像選びのポイント
・サイトの内容が想像できる
・インパクトのある画像
・横長で見栄えのする画像がオススメ
当サイトではマチュピチュが背景です。
良い背景用の画像がない場合は、こちらの無料画像サイトがオススメです。
-
-
参考【登録不要】WordPress(ワードプレス)で使えるフリー画像サイト4選〜写真からイラストまで〜
続きを見る
英語表示テキストの設定
当サイトでは、「-to the world-」を入力しています。
日本語でも入力できますが、英語の方がかっこいいかと。
入力しなくてもOK。
日本語表示テキストの設定
印象を残す言葉を簡潔に入力しましょう。
テキストのポイント
・サイトの内容が想像できる
・インパクトのある文
・１行の短い１文でまとめる
当サイトでは、「自分に嘘をつかない人生を」と入力しました。
またスマホとパソコンで改行のされ方が違うので、スマホの表示も確認しましょう。
ボタンURLの設定
ここには、トップページを訪れた人に一番見てもらいたいページのURLを入力しましょう。
どんなターゲットに焦点を当てるかが非常に重要になります。
あなたのブログのトップページを訪れた人は、何を求めて訪れているのか、深く想像して考えましょう。
僕は「必要なのは覚悟」というページに飛ぶように設定しました。
ボタンテキストの設定
思わずクリックしてしまうようなテキストを入力しましょう。
当サイトでは、「必要なのは○○」と記載しました。
かっこいいスライダー設定
次にヘッダー画像の下に、スライダーを設定していきます。
こんな感じのスライダーを設置していきます。
登録したおすすめ記事が自動的に流れて表示されます。
実はこういうのが欲しくて、「STORK」を導入したんですよね。
「トップページ設定」＞「スライダー設定」
こちらで「表示する」を選択しておきます。
「投稿」＞「タグ」
次に、表示したい投稿を選択していくのですが、そのためにはタグを設定する必要があります。
名前はなんでも良いのですが、当サイトでは、「おすすめ記事一覧」にしています。
スラッグには必ず「pickup」と入力してください。
説明には何も書きません。
入力できたら「更新」。
「投稿」＞「投稿一覧」のタグを設定する
次に、先ほど作ったタグを表示したい投稿に入力していきます。
当サイトの場合、「おすすめ記事一覧」というタグをつけていきます。
入力したら「更新」。
表示したい投稿全てに、同じようにタグを入力していきましょう。
このように表示されていれば無事成功です。
スライダーで表示する記事は厳選する
スライダーは記事を５以上から表示できます。
しかし、１０記事も２０記事も表示させると逆効果になります。
「初めてこのサイトを訪れた人はどのページに興味を持つのか」、また「自分はどのページに訪れて欲しいのか」、よく考えて厳選しましょう。
一目で引きつけるヘッダーを作ろう
まとめ
・自分のサイトにあったアイキャッチ画像を選ぼう
・引きつけるキャッチコピーを考えよう
・初めて訪れた人が求めるものを想像しよう
・スライダーの記事を厳選しよう
たったのこれだけでも、サイトの印象が大きく変わります。
当ブログでは定期的にヘッダーやトップページの見た目が変えています。
ぜひ、サイト作りの参考にしてみてくださいね（＾＾）
質問等ありましたら、気軽にコメントくださいね。
2020年1月28日現在、ライター講座でアドバイスをもらい、ヘッダー画像を大幅に変更しました。
\究極のモバイルファースト/
シンプル・超高速テーマ