この記事では
- WordPressテーマ「JIN」を使って
- ヘッダーに好みの画像を表示させたり
- 文字やボタンを設置する方法
を紹介します。
JIN以外のテーマをお使いの方には全く意味のない記事って訳ではありませんが、テーマごとに表示が異なりますので初心者の方は慎重に作業を進めてくださいね。
JINでヘッダー画像を設定する方法
ダッシュボード内の「外観」から「カスタマイズ 」と進みます。
項目の中に「ヘッダー画像設定」があるのでクリックします。
「画像を変更」をクリックします。
- すでにアップロードされた画像から選ぶ
- 新しく画像をアップロードする
このいずれかの方法でがヘッダーに用いる画像を設定します。
ここでは②の新しく画像をアップロードする手順で話を進めます。「ファイルをアップロード」のタブで「ファイルを選択」をクリックし、画像をアップロードします。
すでにアップした画像を使いたい方は「メディアライブラリ」のタブを選択すると下記のようになります。
アップロードが完了すると勝手にメディアライブラリが開かれるので
- ヘッダー画像に使いたい画像を選択して
- 代替テキストを入力して
- 画像を選択をクリック
してください。
代替テキストとは画像を認識できないロボットのために準備する文字列です。あまり深く考えず「〇〇（サイト名）のヘッダー画像」などでOKです。
ヘッダー画像をアップしても表示されない場合
確かにアップロードして選択したのに表示が何も変わらない場合は「サイトデザイン設定」を見直す必要があります。
ヘッダー画像設定のバーの少し上に「サイトデザイン設定」という項目がありますのでそこを開いてみてください。
ヘッダーデザインのスタイルが「（ヘッダー画像あり）」ではなないスタイルになっていませんか？ヘッダー画像を設定したい場合はヘッダー画像アリのスタイルを選びます。お好みでどうぞ。
ヘッダー画像の上に文字やボタンを表示する方法
ここからは
- ヘッダー画像の上に文字を表示させる
- ボタンを設置する
- スマホ用のヘッダー画像を設定する
ということをやっていきます。
文字を表示させる
再び「ヘッダー画像設定」の項目を開きます。
先ほど設定した画像の下に
- キャッチフレーズ：画像の上に表示する文章
- キャッチフレーズの色
- キャッチフレーズの文字の加工
- サブテキスト：キャッチフレーズの下に小さく表示される文章
- サブテキストの色
- サブテキストの文字の加工
を選ぶ項目がありますので、お好みで設定しましょう。
ボタンを設置する
続いては
- ヘッダー画面に表示するボタンの色
- ボタンのリンク先
- ボタンのテキスト
- ヘッダー画像の位置の調整
- 仮想ページへの表示させるかどうか
を選択します。
スマホ用のヘッダー画像設定
スマホでのヘッダーの表示はパソコンよりも横幅の短いものを選ぶといいですね。設定方法はパソコンと同じです。
完成形
するとトップページにこのようなヘッダー画像が表示されます。お疲れ様でした。
まとめ
ということで今回は以上です。
ヘッダー画像はいわばサイトの顔です。訪問者に「おっ！このサイトはなんかしっかり作られていそうだ」と思わせられるように、目を引くような綺麗な画像を入れてみましょう。
間違ってもGoogleとかで拾ってきた画像を無断利用してはダメですよ。