Ver1.3.2をリリースしました(1/27)

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

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

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

カスタマイザーを開く

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

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

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


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

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

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

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

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

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

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

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

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

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

 

チェックをつけると…


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

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

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

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

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

文章は簡潔に

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

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

16 Comments

しらたま

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

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

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

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

返信する
サルワカくん

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

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

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

返信する
さるわかファン

ワードプレス初心者ですが、さるわかのサイト自体が大好きなのでテンプレートを購入させていただきました。

恐縮なのですがひとつ質問があります。
この素晴らしいヘッダー表示を固定フロントページのほうに表示させる方法はありますでしょうか。
お店のページなので、ブログのトップページではなく固定フロントページのほうに表示させたいと考えておりました。

よろしくお願いします。

返信する
さるわかファン

すみませんでした。よくある質問というページで既出の内容でした。そちらのほうで対応してみます。
連続コメントお許しください。
さるわかの大ファンなのでこれからも応援しています。頑張ってください。
失礼いたしました。

返信する
サルワカくん

調べて頂き、ありがとうございます。今後ともサルワカをよろしくお願いいたします。

返信する
小野寺

初めまして。購入させていただきました。素敵なデザインに惚れ惚れしております。
質問なのですが、ヘッダーアイキャッチ画像はスライドにできないでしょうか。
複数枚をスライドさせて画像をクリックすると画像に該当したページに飛ばしたいのです。

返信する
サルワカくん

お世話になっております。

そのような機能はあえて実装しておりません。
というのも、トップページで画像をスライドするユーザーはほぼいないと考えたからです。
隠れているコンテンツをスライドして見ようとするユーザーはおそらくほぼいません(僕は自分の)。
その割に画像は非表示分まで読み込まれるため、サイトの読み込みはガクッと遅くなります。
デメリットの方が大きいと思うので、SANGOではそのような機能は実装しておりません。
利用されたい場合は、恐縮ではありますが、ご自身でカスタマイズして頂くようお願いします。

返信する
まるこ

サルワカさま、お世話になっております。
2分割ヘッダーアイキャッチ画像を設定したところ、タイトルバーと2分割アイキャッチ画像の間に変な空白ができてしまいました。PC、スマホともに変な空白が存在している状況です。
URLは◯です。(非公開でお願いいたします。)
お手数おかけして申し訳ありません。お手すきの際に解消方法をお教えいただければ幸いです。

返信する
サルワカくん

SANGOには
①ヘッダーアイキャッチ画像
②2分割ヘッダーアイキャッチ
の2種類が用意されています。
お使いになりたいのは②の方だと思いますが、①の方にもチェックが入っているようです。
「ヘッダーアイキャッチ画像」⇒「ヘッダーアイキャッチ画像を表示する」のチェックは外してくださいませ。

返信する
まるこ

無事解消いたしました。ありがとうございました。
お手数おかけして申し訳ありませんが、先に記載したコメントのURLを非公開にしていただけると助かります。
どうぞよろしくお願いいたします。

返信する
ケンイチ

はじめまして。使いやすいテーマをありがとうございます。
固定ページをトップページに設定し、サルワカ様の説明を参考に「外観」→「テーマの編集」と移動しCSSコードを追加して固定ページトップにもヘッダーアイキャッチ画像が表示されるようにしました。ところが、投稿ページに設定しているページにもヘッダーアイキャッチ画像が表示されてしまいます。
理想としてはトップページのみヘッダーアイキャッチ画像が表示され、その他のページにはヘッダーアイキャッチ画像が表示されない。もしくは、トップページとその他のページ全てにヘッダーアイキャッチ画像が表示されるようにして統一感を出したいと思っています。お忙しいと思いますが、解決方法をお教え頂ければ幸いです。

返信する
サルワカくん

トップページ用固定ページをトップページ以外にも使用されているということですね。
貼り付けるコードを下記のように変えれば、トップページだけに表示されるはずです。

<?php if ( is_home() || is_front_page() ) : ?>
    <?php get_template_part('parts/home/featured-header'); ?>
<?php endif; ?>
返信する
ケンイチ

お忙しいところ、迅速な対応ありがとうございます。
トップページに使っている固定ページは「トップページ用(タイトルなどの出力なし)」で、その他のページに使っている固定ページは「1カラム表示(サイドバーなし)」になります。
そして、投稿ページに指定している固定ページには「固定ページの属性」に「テンプレート」設定項目が無くなってしまうので状況がよくわかりません。
このような状況で、回答いただいた上記コードを「page-forfront.php」に記入すれば大丈夫なのでしょうか?
コードの記入は不慣れなもので、何度もの質問申し訳ありません。よろしくお願いいたします。

返信する
サルワカくん

それであれば、両方(page.phpとpage-forfront.php)にさきほどのコードを貼り付ければOKです。
よろしくおねがいします。

返信する
みほ

ブログ初心者ですが購入させていただき現在カスタマイズに奮闘中です。
こちらのサイトを見ながらヘッダーアイキャッチ画像を登録したのですが、sango childテーマカスタマイズ中の画面にはきちんと画像が表示されているのに、実際のブログページに行くとヘッダーアイキャッチ画像が反映されていません。それ以外のカスタマイズした事は問題なく反映されているのですが何がおかしいのでしょうか。ホームページ設定欄では最新の投稿を選択しています。どうぞよろしくお願いいたします。

返信する
みほ

度々申し訳ございません。
投稿は「公開」していたのに、テーマカスタマイズページは「下書き保存」のままで「公開」にしていなかったため、という初歩的なミスに気付き自分で解決することができました。色々他のサイトでも似たトラブルを検索してみてはいたのですが、きっと基本的なミスすぎて同じような方がいなかったのだと思います。ご迷惑お掛けいたしました。

返信する

コメントを残す

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