Ver1.3.1をリリースしました(11/22)

ヘッダーアイキャッチ画像を設定しよう

ヘッダーアイキャッチを設定する

SANGOではトップページにヘッダーアイキャッチを設定することができます。2種類のあるので、必要に応じてご活用ください。

カスタマイザーを開く

まずは、WordPressでカスタマイザーを開きます。

カスタマイザーの位置
管理画面⇒外観⇒カスタマイズ

少し下にスクロールすると以下のような項目があるかと思います。①と②の設定方法について順番に解説していきます。


1. ヘッダーアイキャッチ画像を設定する

ヘッダーアイキャッチ画像の例

①「ヘッダーアイキャッチ画像」は、トップページのヘッダー部分に大きく画像を表示させる機能です。もちろんスマホ表示にも対応しています。

ヘッダーアイキャッチ画像の設定は「ヘッダーアイキャッチ画像を表示」にチェックをつけて画像をアップロードするだけです。

ヘッダーアイキャッチを有効化

画像上には必要に応じて「見出し」「説明文」「ボタン」を配置することができます。

画像の最大横幅に制限を設ける

初期設定では、ヘッダー画像はブラウザ画面横いっぱいに広がります。「画像の最大横幅に制限を設ける」にチェックをつけると、サイズの大きな画面で見たときにも「一定以上は大きくならない」という制限が設けられます。

画像の最大横幅に制限を設ける

初期設定だと…
チェックなしの場合

 

チェックをつけると…


2. 2分割ヘッダーアイキャッチを設定する

こちららは、トップページの上部に左右に分割されたアイキャッチを配置することができる機能です。左側には画像、右側にはテキストとボタンを配置します。

なお、スマホ〜タブレット(ブラウザ幅767px以下)では画像は縦に並ぶことにご注意ください。

なお設定項目の「見出し」「説明文」「ボタン」「テキスト部分の背景色」に該当する部分は以下のようになります。

見出し・説明文・ボタンの設定は任意で、空欄のままにした場合は表示されません。

文章は簡潔に

テキスト部分が長くなり、画像の高さを上回った場合には以下のように画像の上下にスペースが作られます。できる限りテキストは簡潔にすることをおすすめします。

MEMO
ここまで紹介してきたヘッダーアイキャッチを設定することができるのはトップページのみです。記事ページにまで表示させると「画像分の読み込み速度が遅くなる」「ユーザーが目的の情報に辿り着くまでにスクロールの手間が増える」などのデメリットがあるからです。

2 Comments

しらたま

素敵なデザインに一目惚れして早速購入させて頂きました!

ひとつ質問がございます。ヘッダーアイキャッチ画像について、設定した画像がスマホ表示だと真ん中の部分のみ切り取られたように表示されると思います。

これをスマホの横幅に合わせてヘッダーアイキャッチ画像をすべて表示することは可能でしょうか?

可能であれば追加するCSSなどをご教授頂きたいです。ご回答お待ちしています。

返信する
サルワカくん

画像の上に文字やボタンをのせる場合は、
文字やボタンがはみ出てしまわないように、
画像サイズ(縦横比)が自動調整されるようになっています。

ヘッダーアイキャッチ画像の設定で「文字やボタンを表示しない(画像のみ表示)」にチェックを入れると
常に縦横比が固定されるようになります。

よろしくお願い致します。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です