Ver1.8 Released!

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

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

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

カスタマイザーを開く

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

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

「ヘッダーアイキャッチ(トップページ)」を選び、少し下にスクロールすると以下のような項目があるかと思います。①と②の設定方法について順番に解説していきます。


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

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

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

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

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

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

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

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

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

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

 

チェックをつけると…

文字やボタンを表示しない(画像のみ表示)

「文字やボタンを表示しない(画像のみ表示)」にチェックを入れると、画像が切り抜かれて表示されることがなくなります。(チェックをいれていない場合、文字やボタンが画像からはみ出ないように、画像サイズの自動調整が行われます)。


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

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

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

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

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

文章は簡潔に

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

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

120 COMMENTS

かわいち 2019/03/12

いつもお世話になっております。
sangoにてヘッダーアイキャッチ画像を設定しております。
ヘッダーアイキャッチ画像上の見出し文が長めになってしまいスマホ表示だと見栄えが悪いため、スマホ表示の場合途中で改行するなどして表示したいと考えております。

下記サルワカの「ゼロからのPhotoshopの使い方」のトップページように、PC表示とスマホ表示でヘッダーアイキャッチ上の見出しの見栄えが変わる様に(スマホ表示の時に任意の位置で改行されるように)したいのですが、方法をご教授いただけますでしょうか?
https://saruwakakun.com/design/photoshop

お手数ですが、ご確認のほど宜しくお願い致します。

回答を見る
ぷぅこ 2019/02/19

こんにちは。質問させていただきます。

ヘッダーアイキャッチの設定でボタンを表示させているのですが、リンク先を外部のサイトに設定しているので別ウィンドウ(別タブ)で開きたいのですが、可能でしょうか?
また、同じように「ヘッダーお知らせ欄」のリンク先も別ウィンドウで開きたいのですが、可能でしょうか?

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

回答を見る
chika 2019/01/22

こんにちは。
ヘッダーアイキャッチの設定について質問です。
PCからみると問題ないのですが、スマホからみると画像が細くなり崩れてしまいます。
対処法を教えていただきたいです。よろしくお願いします。

回答を見る
ruby 2019/01/13

お世話になっております。
先日sangoを購入させていただきました。

サルワカさん(https://saruwakakun.com/)のトップページ>個別記事のアイキャッチ画像の周りには白い余白が入っていますが、これはどのような対応をされているのでしょうか?

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

回答を見る
K5 2018/12/15

ヘッダーアイキャッチを御社説明ブログを参考に設定を行いましたが、画像が全く反映されません。考えられる要因を教えて頂ければ幸いです。

回答を見る
kuma 2018/10/21

お世話になります。

ヘッダーアイキャッチ画像を、PCでは2分割表示、スマホでは分割なしで表示したいのですが、方法がありましたらご教示いただけると幸いです。
よろしくお願い致します。

回答を見る
yone 2018/09/29

お忙しい中、お手数ですが質問をお許しください。
ヘッダーアイキャッチ画像をスマホとPCで別の画像を表示させてたいのですが
なかなかうまくできません。
方法がございましたらご教示頂けませんでしょうか。
宜しくお願い致します。

回答を見る
wara 2018/09/19

ヘッダーアイキャッチ部分についての質問です。
こちらにサイト内検索フォームを設置したいのですが、どのファイルを編集すればよろしいでしょうか。

タイトルが入ります
テキストが入ります

この部分の出力内容を編集したいと考えております。

お手数ではございますがご教示いただけると幸いです。
何卒よろしくお願いいたします。

回答を見る
じゃくそん 2018/09/16

はじめまして、サイト運営初心者のものです。サルワカのサイトのデザインに感動してSANGOを購入させていただきました。

ヘッダーアイキャッチの設定についてなのですが、上記のマニュアル通り設定しても画像がサイトの方に反映されません。(HTMLやCSSもいじっておりません。)他の方の質問やよくある質問を読ませていただいたのですが、改善できずに苦戦しております。

お忙しいところ恐縮ですが、ご教授お願いいただけますと幸いです。何卒宜しくお願い致します。

回答を見る
えぬ 2018/09/13

お世話になっております。
2分割ヘッダーがモバイルで表示されず、スマホを横画面にすると現れる現象になっています。この原因をご教授いただきたく。
また、サファリでサイトを開くとアイキャッチや吹き出しの画像がなくなる(かなり小さいサイズ)という現象もありまして。お忙しい中恐縮ですがご教授いただけますと幸いです。

回答を見る
まいける 2018/08/20

お世話になります。
以前の回答ありがとうございました。重ね重ね申し訳ありませんが質問させてください。

トップページを1カラムの固定ページにしてヘッダーアイキャッチを設定したのですが、投稿ページにもヘッダーアイキャッチが表示されてしまいます。
過去コメントへの返答に解決策があるのですが、初心者でよくわかりませんでした…

投稿ページにヘッダーアイキャッチが表示されてしまう現象を解消したい、
または
投稿ページのヘッダーアイキャッチ画像のサイズを調整してトップページに表示されているヘッダーアイキャッチ画像と同じサイズにしたいのですが可能でしょうか?(ちなみに投稿ページの記事部分とサイドバーサイズは他サイトを参考にして変更しております)

お忙しい中恐縮ではございますが、回答のほど宜しくお願いします。

回答を見る
まいける 2018/08/14

お世話になります。
ヘッダーアイキャッチにて3〜4枚ほどの画像が自動で切り替わる仕様(グラデーションみたいに切り替わる)にしたいのですが可能でしょうか?

回答を見る
キム 2018/07/25

素敵なテーマ購入後、初めてコメントさせていただきます。最近、ブラウザの幅を狭めたり、スマホで見ると2分割ヘッダーの画像と文章のバランスが崩れて表示されるようになりました。スマホでは画像と文章枠が同じ比率で上下に並ぶはずのに、、、、キャッシュ削除、プラグイン、子テーマ停止などすべてやってみても直りません。
最近子テーマもCSSを頻繁に弄ったこと以外は、心当たりがありません。
以上、ご確認を宜しくお願い致します。

回答を見る
JOE 2018/07/23

ヘッダーアイキャッチ画像が、マニュアル通りにやっても設定できません。
よくある質問の「ヘッダーアイキャッチ画像が表示されない」では解決に至りませんでした。
外観→カスタマイズ→ヘッダーアイキャッチ(トップページ)→ヘッダーアイキャッチ画像
に画像を選択しても、右のプレビュー画面に表示されることもなく、「公開」を押すと「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」と出ます。
時間をおいて何度か挑戦してみましたが、ダメです。
原因はどのように考えられますでしょうか?
テーマインストールして、最初に取り組んでおり、他には何も触っておりません。(ハローワールドのままです)

回答を見る
nene 2018/07/17

こんにちわ。
ヘッダーアイキャッチ部分に、ボタンを2個表示させたいのですが、
どのように設定したら良いでしょうか?

回答を見る
MIHO 2018/07/11

初めまして。サイト運営は7年ほどなのですがまだまだ初心者のmihoです。SANGOに出会い、新たにサイトを立ち上げたばかりです。基本的なところでつまずいてしまい、検索したりやり直したりを繰り返したもののやはり出来ないため、質問させていただきます。
ヘッダーメニューが表示出来ません。新規作成を何度繰り返してもサイトに表示できないのですが、何が間違っているのかわかりません。
お忙しいところ本当に申し訳ありません。基本的な質問で大変恐縮しております。
お手すきの時でかまいませんので、お返事いただけますでしょうか。よろしくお願いいたします。

回答を見る
池本えいみー 2018/07/05

ヘッダー画像を設定したいのですが、右の方に余白が出てしまい、画面横いっぱいに広がってくれません。
「画像の最大横幅に制限を設ける」を設定していないので、画面横いっぱいに広がるはずなのですが、上手くいかないのはどうしたら良いでしょうか?

回答を見る
へいも 2018/06/29

はじめまして。
色々と調べても分からなかったので、質問させて頂きます。
サルワカさんのヘッダーロゴの下にある【ver 1.4.1をリリースしました】という帯はどのように作成するのでしょうか?

回答を見る
ひで 2018/06/26

ヘッダーとロゴだけ、カスタマイザで更新しようとすると
「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」
と、表示されて更新できません。

背景画像などは更新できます。サーバのWAFも解除しているのですが、
原因わかりますでしょうか。

回答を見る
たいやき 2018/06/21

いつもお世話になっております。
ヘッダーアイキャッチについて、
アップした画像で、下は切れても良いのですが、上が切れると困るのですが・・・
どうにか調整できたりはしますでしょうか?
よろしくお願い致します。

回答を見る
H 2018/06/14

お世話になっております
ヘッダーアイキャッチ画像に
svgのオブジェクトを重ねることは可能でしょうか?

回答を見る
にゃんたろう 2018/06/08

https://saruwakakun.design/
ですと
ヘッダーアイキャッチ画像を含めサムネイル画像も
retina用の実画像データのピクセル数の50%縮小表示がなされていますが、
これを行う方法をご教示いただけますと幸いです。

特に2分割ではないヘッダーアイキャッチ画像のretina用50%縮小方法が
知りたいです。
どうぞよろしくお願いいたします!

回答を見る
はるちゃん 2018/06/03

初めまして。デザインが可愛らしくて購入させて頂きました。

ヘッダーアイキャッチの、画像そのものにURLを指定して、画像をクリックしたら指定のURLに飛ばせる方法はありますでしょうか?

できればボタンを使わずにURLに飛ばせたらと考えております。

お忙しいところ恐縮ですが、ご教授お願い致します。

回答を見る
おおしま 2018/05/18

こんにちは。
wordpress初心者です。初心者にも使いやすいテーマをありがとうございます。

2分割ヘッダーアイキャッチの右の説明文を画像に変更する方法はありますか?
あれば教えていただけますか?

回答を見る
マサック 2018/04/29

はじめまして。使いやすいテーマをありがとうございます。

質問ですが、2分割ではないヘッダー画像設定の「見出し」「説明文」「ボタン」のテキストのフォントサイズ・色を
PCで見る際とスマホで見る際にそれぞれ大きさを分けて設定したいのですが、可能でしょうか?

PCでのテキストの大きさは、これまでの解答の中に記載されていましたので変更できたのですが、スマホで確認すると大きさが変わっておりません…。

お手数ですが返信頂けますと幸いです。

回答を見る
ゆうや 2018/04/11

こんにちは。
ヘッダーアイキャッチに設定できるボタンの位置を調整したいのですがどのようにして調整したらよろしいのでしょうか?
ご教示お願いいたします。

回答を見る
長濱 2018/04/06

お世話になります。ヘッダーアイキャッチの文字の説明文の文字の太さを調整したいのですが、やり方を教えていただけませんでしょうか?よろしくお願いいたします。
また、見出しの文字色を変更するため上記CSSを入れたのですが変わりません。
コツがあるのでしょうか

回答を見る
ピピノブ 2018/03/31

お世話になります。ヘッダーアイキャッチ 画像を、PCではONに、モバイルではOFFにする方法がありましたら教えていただけませんでしょうか?度々質問させていただき申し訳ありません。よろしくお願いいたします。

回答を見る
ピピノブ 2018/03/24

お世話になります。ヘッダーアイキャッチの文字の見出しの文字の大きさを調整したいのですが、やり方を教えていただけませんでしょうか?よろしくお願いいたします。

回答を見る
ハック 2018/03/22

こんにちは、サンゴ&ワードプレス初心者です。
ヘッダーアイキャッチ画像がうまく表示できません。
最適なサイズを教えてください。
画像のサイズが大きいのだと思いますが、
PCで(画像がはみ出た部分をカットされたうえで)まぁ見れるかなという画像が、
スマホでは完全にはみ出てうまく表示されません。
デフォルトのサイズ通りに画像をつくれば問題ないのだろうと思うのですが、
教えてください、お願いします。

回答を見る
佐藤 2018/03/15

サルワカさま
素敵なテーマのご提供ありがとうございます。愛用させていだいております。

ヘッダーアイキャッチ画像内のテキスト全文ですが、2分割のように色を変更することは可能でしょうか。

お忙しいところ恐縮ですが、手段があればご教授くださいますと幸いです。
よろしくお願いいたします。

回答を見る
キヨミズ 2018/02/19

SANGOを愛用させていただいています。
カスタマイズする中でわからない点がありましたので教えてください。
2分割ヘッダーアイキャッチを設定しており、テキスト部分についてですが、
文字の大きさの変更や色付け等を投稿と同じようにしたいのですが可能でしょうか?

投稿のスタイルを適用したものの反応しなかったので、教えていただければと思います。よろしくお願いします。

回答を見る
みほ 2018/01/26

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

回答を見る
みほ 2018/01/26

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

回答を見る
ケンイチ 2018/01/23

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

回答を見る
まるこ 2018/01/18

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

回答を見る
小野寺 2017/12/06

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

回答を見る
さるわかファン 2017/11/28

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

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

よろしくお願いします。

回答を見る
しらたま 2017/11/07

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

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

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

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

回答を見る

コメントを残す

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