※サイト改装中!不具合あったらごめんなさい

ブログ

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

 

 

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

 

こんにちは、はらです。

 

今回は、
当サイトのヘッダーの
カスタマイズを
紹介したいと思います。

STORK」がインストール
されていれば、
10分ほどでできてしまう
簡単な設定で
かっこいいヘッダーが
出来上がります。

トップページを訪れた人が、
思わずスクロールしたくなる
ヘッダーを目指しましょう。

 

[box class="green_box" title="この記事について"]・所要時間目安:10分
STORKユーザー向け
・ヘッダー簡単カスタマイズを紹介
・アイキャッチ用無料画像サイトを紹介
・一目で惹きつけるヘッダー作成のポイントを紹介[/box]

 

有料テーマ「STORK」とは?

↓STORKの購入はこちら!↓

[btn class="rich_yellow"]WordPressテーマ「STORK19」

[/btn]

 

STORK」はwordpressの
有料テーマの一つです。

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

今回の記事は「STORK」の
機能でできるカスタマイズを
紹介していきます。

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

 

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

[kanren2 postid="2544"]

 

 

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

子テーマの編集を推奨

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

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

 

スポンサーリンク

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

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

このようなヘッダーを
作っていきます。

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

 

背景画像の設定

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

<背景画像選びのポイント>
・サイトの内容が想像できる

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

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

 

ちなみに当サイトでも実は
pixabayからダウンロードした
画像を使用しています。

マチュピチュの写真は
自分で撮ったものもあるのですが、
横長のものが欲しかったので。

 

英語表示テキストの設定

当サイトでは、
「-to the world-」
入力しています。

日本語でも入力できますが、
英語の方がかっこいいです。

入力しなくてもOK。

 

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

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

現在は、
「旅を必ず実現させるために」
変更しました。

 

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

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

 

ボタンURLの設定

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

どんなターゲットに
焦点を当てるかが
非常に重要になります。

あなたのブログの
トップページを訪れた人は、
何を求めて訪れているのか、
深く想像して考えましょう。

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

 

ボタンテキストの設定

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

当サイトでは、
「必要なのは○○」
記載しています。

 

↓STORKの購入はこちら!↓

[btn class="rich_yellow"]WordPressテーマ「STORK19」

[/btn]

スポンサーリンク

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

こんな感じのスライダーを
設置していきます。

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

 

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

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

 

「投稿」>「タグ」

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

名前はなんでも良いのですが、
当サイトでは、
「おすすめ記事一覧」
にしています。

スラッグには必ず
「pickup」と入力してください。

説明には何も書きません。

入力できたら「更新」。

 

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

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

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

入力したら「更新」。

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

 

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

 

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

スライダーは記事を
5以上から表示できます。

しかし、10記事も
20記事も表示させると
逆効果になります。

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

 

 

まとめ

[box class="yellow_box" title="一目で引きつけるヘッダーに"]・自分のサイトにあったアイキャッチ画像を選ぼう
・引きつけるキャッチコピーを考えよう
・初めて訪れた人が求めるものを想像しよう
・スライダーの記事を厳選しよう[/box]

たったのこれだけでも、
サイトの印象が大きく
変わるかと思います。

このブログでは、
しょっちゅうヘッダーや
トップページの見た目が
変わるので、とりあえず
今の時点でのヘッダーを
紹介しました。

 

ぜひ、サイト作りの
参考にしてみてくださいね(^^)

質問等ありましたら、
気軽にコメントくださいね。

 

※追記:現在のヘッダー

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

 

↓STORKの購入はこちら!↓

[btn class="rich_yellow"]WordPressテーマ「STORK19」

[/btn]

 

[box class="pink_box" title="重要"]

ブログやSNSを運営する上でアイコンは最も重要なものの一つです。
オリジナルアイコンの作成も検討してみましょう。

[kanren2 postid="3601"]

[/box]

 

<関連記事>

[colwrap] [col2]

[kanren2 postid="2544"]

[kanren2 postid="2302"]

[kanren2 postid="2067"]

[/col2] [col2]

[kanren2 postid="1701"]

[kanren2 postid="1530"]

[/col2] [/colwrap]

 

スポンサーリンク

スポンサーリンク

-ブログ
-, , ,

© 2020 はら旅ブログ Powered by AFFINGER5