■このブログは2018年9月20日に書きました。
こんにちは！
ソバネコです。
このブログは、
元プロボクサーで現在デザイナーである、ソバネコがワードプレス（ストーク）の使い方について書いた記事です。
今回は、ワードプレス操作の基本編として“トップページ設定”方法その2について書いています。
トップページ設定でできること
トップページ設定は大きくて分けて、
・ヘッダーに表示するテキストの設定
・ヘッダー背景画像自体の設定
の2項目を設定することができますが今回は
・ヘッダー背景画像自体の設定
を解説したいと思います。この部分ですね。
トップページ設定への行き方
管理画面の外観をクリック。
外観内の項目 カスタマイズをクリック。
カスタマイズ画面に移動します。
トップページ設定をクリックします。
ヘッダー背景画像
ヘッダー背景画像とは、トップページに入れる画像のことです。
ソバネコブログでは青空の画像を入れていますが、わかりやすいようにソバネコのロゴマーク画像（150×150pxel）を入れてみます。
画像はあらかじめ、ワードプレスのメディアライブラリに格納しておきましょう。
画像を選択をクリック。
メディアライブラリに入れた画像を選択。
画像が選択されました。
ヘッダー領域にも画像が表示されました。
ヘッダー背景画像（SP用）
この部分は、スマートフォン用のヘッダー背景画像です。
PC用と画像を統一したい場合は、同じ画像を入れておきましょう。
画像を選択をクリック。
メディアライブラリに入れた画像を選択。
画像が選択されました。
ヘッダー背景サイズ
ヘッダー背景サイズとは、ヘッダーに設定した画像をどう調整するかを選べます。
現在は「サイズ調整しない」にチェックが入っているため、トップページをみると画像がポツンとあるだけです。
これではちょっとトップページにしては寂しいですよね。
試しに画面いっぱいに変更してみます。
縦横AUTO
縦横AUTOではヘッダー領域の縦と横に合わせて画像を画面いっぱいに設定できます。
縦横AUTOのチェックをクリック。
ヘッダー領域画面いっぱいに画像が配置されました。
横100%
横100%も縦横AUTOと同じでヘッダー領域の横いっぱいに画像を設定できます。
縦100%
縦100％はヘッダー領域の縦幅に画像を100％で設定できます。
縦100％のチェックをクリック。
ヘッダー領域の縦部分に画面いっぱいに画像が配置されました。
サイズ調整しない
サイズ調整しないは文字どおり、設定した画像サイズをそのまま表示します。
サイズ調整しないのチェックをクリック。
ヘッダー領域に画像が配置されました。
ヘッダー背景繰り返し
このヘッダー背景繰り返しでは、画像を繰り返し表示できる機能です。ヘッダー領域に対して画像が小さい場合に有効ですね。
繰り返し表示
縦横全てに画像がパネル上に繰り返し配置される設定です。
繰り返し表示チェックをクリック。
画像がパネル上に繰り返し表示されました。
横方向に繰り返し
横方向に画像が繰り返し配置される設定です。
横方向に繰り返しチェックをクリック。
画像が横に繰り返し表示されました。
縦方向に繰り返し
縦方向に画像が繰り返し配置される設定です。
縦方向に繰り返しチェックをクリック。
画像が縦に繰り返し表示されました。
まとめると、、、
画像をタイル上に繰り返し表示したいのなら、
【ヘッダー背景サイズ】→サイズ調整しない
【ヘッダー背景繰り返し】→繰り返し表示
にチェックを入れると良いと思います。
また、画面いっぱいに画像を入れたい場合は、横のサイズに余裕のある画像を作成し
【ヘッダー背景サイズ】→縦横AUTO
【ヘッダー背景繰り返し】→繰り返ししない
にチェックを入れると、1枚絵のようなスケール感があるヘッダー画像になります。
今回はここまでになります。お疲れ様でした^ ^
ヘッダー画像はサイトのイメージを決める重要な要素なので、色々試しながらデザインを考えると魅力的なサイトになると思いますよ！
まとめ
今回は、ワードプレス操作の基本編として、“トップページ設定”の方法その2について書きました。
次回は、背景画像の設定方法について説明したいと思います。ではでは！
■ その他のカスタマイズ設定方法記事はこちら！
コメントを残す
コメントを投稿するにはログインしてください。