SANGOではトップページにヘッダーアイキャッチを設定することができます。2種類のあるので、必要に応じてご活用ください。
カスタマイザーを開く
まずは、WordPressでカスタマイザーを開きます。
少し下にスクロールすると以下のような項目があるかと思います。①と②の設定方法について順番に解説していきます。
1. ヘッダーアイキャッチ画像を設定する
①「ヘッダーアイキャッチ画像」は、トップページのヘッダー部分に大きく画像を表示させる機能です。もちろんスマホ表示にも対応しています。
ヘッダーアイキャッチ画像の設定は「ヘッダーアイキャッチ画像を表示」にチェックをつけて画像をアップロードするだけです。
画像上には必要に応じて「見出し」「説明文」「ボタン」を配置することができます。
画像の最大横幅に制限を設ける
初期設定では、ヘッダー画像はブラウザ画面横いっぱいに広がります。「画像の最大横幅に制限を設ける」にチェックをつけると、サイズの大きな画面で見たときにも「一定以上は大きくならない」という制限が設けられます。
初期設定だと…
チェックをつけると…
文字やボタンを表示しない（画像のみ表示）
「文字やボタンを表示しない（画像のみ表示）」にチェックを入れると、画像が切り抜かれて表示されることがなくなります。（チェックをいれていない場合、文字やボタンが画像からはみ出ないように、画像サイズの自動調整が行われます）。
2. 2分割ヘッダーアイキャッチを設定する
こちららは、トップページの上部に左右に分割されたアイキャッチを配置することができる機能です。左側には画像、右側にはテキストとボタンを配置します。
なお、スマホ〜タブレット（ブラウザ幅767px以下）では画像は縦に並ぶことにご注意ください。
なお設定項目の「見出し」「説明文」「ボタン」「テキスト部分の背景色」に該当する部分は以下のようになります。
見出し・説明文・ボタンの設定は任意で、空欄のままにした場合は表示されません。
文章は簡潔に
テキスト部分が長くなり、画像の高さを上回った場合には以下のように画像の上下にスペースが作られます。できる限りテキストは簡潔にすることをおすすめします。
素敵なデザインに一目惚れして早速購入させて頂きました！
ひとつ質問がございます。ヘッダーアイキャッチ画像について、設定した画像がスマホ表示だと真ん中の部分のみ切り取られたように表示されると思います。
これをスマホの横幅に合わせてヘッダーアイキャッチ画像をすべて表示することは可能でしょうか？
可能であれば追加するCSSなどをご教授頂きたいです。ご回答お待ちしています。
画像の上に文字やボタンをのせる場合は、
文字やボタンがはみ出てしまわないように、
画像サイズ（縦横比）が自動調整されるようになっています。
ヘッダーアイキャッチ画像の設定で「文字やボタンを表示しない（画像のみ表示）」にチェックを入れると
常に縦横比が固定されるようになります。
よろしくお願い致します。
ワードプレス初心者ですが、さるわかのサイト自体が大好きなのでテンプレートを購入させていただきました。
恐縮なのですがひとつ質問があります。
この素晴らしいヘッダー表示を固定フロントページのほうに表示させる方法はありますでしょうか。
お店のページなので、ブログのトップページではなく固定フロントページのほうに表示させたいと考えておりました。
よろしくお願いします。
すみませんでした。よくある質問というページで既出の内容でした。そちらのほうで対応してみます。
連続コメントお許しください。
さるわかの大ファンなのでこれからも応援しています。頑張ってください。
失礼いたしました。
調べて頂き、ありがとうございます。今後ともサルワカをよろしくお願いいたします。
初めまして。購入させていただきました。素敵なデザインに惚れ惚れしております。
質問なのですが、ヘッダーアイキャッチ画像はスライドにできないでしょうか。
複数枚をスライドさせて画像をクリックすると画像に該当したページに飛ばしたいのです。
お世話になっております。
そのような機能はあえて実装しておりません。
というのも、トップページで画像をスライドするユーザーはほぼいないと考えたからです。
隠れているコンテンツをスライドして見ようとするユーザーはおそらくほぼいません（僕は自分の）。
その割に画像は非表示分まで読み込まれるため、サイトの読み込みはガクッと遅くなります。
デメリットの方が大きいと思うので、SANGOではそのような機能は実装しておりません。
利用されたい場合は、恐縮ではありますが、ご自身でカスタマイズして頂くようお願いします。
サルワカさま、お世話になっております。
2分割ヘッダーアイキャッチ画像を設定したところ、タイトルバーと2分割アイキャッチ画像の間に変な空白ができてしまいました。PC、スマホともに変な空白が存在している状況です。
URLは◯です。（非公開でお願いいたします。）
お手数おかけして申し訳ありません。お手すきの際に解消方法をお教えいただければ幸いです。
SANGOには
①ヘッダーアイキャッチ画像
②2分割ヘッダーアイキャッチ
の2種類が用意されています。
お使いになりたいのは②の方だと思いますが、①の方にもチェックが入っているようです。
「ヘッダーアイキャッチ画像」⇒「ヘッダーアイキャッチ画像を表示する」のチェックは外してくださいませ。
無事解消いたしました。ありがとうございました。
お手数おかけして申し訳ありませんが、先に記載したコメントのURLを非公開にしていただけると助かります。
どうぞよろしくお願いいたします。
はじめまして。使いやすいテーマをありがとうございます。
固定ページをトップページに設定し、サルワカ様の説明を参考に「外観」→「テーマの編集」と移動しCSSコードを追加して固定ページトップにもヘッダーアイキャッチ画像が表示されるようにしました。ところが、投稿ページに設定しているページにもヘッダーアイキャッチ画像が表示されてしまいます。
理想としてはトップページのみヘッダーアイキャッチ画像が表示され、その他のページにはヘッダーアイキャッチ画像が表示されない。もしくは、トップページとその他のページ全てにヘッダーアイキャッチ画像が表示されるようにして統一感を出したいと思っています。お忙しいと思いますが、解決方法をお教え頂ければ幸いです。
トップページ用固定ページをトップページ以外にも使用されているということですね。
貼り付けるコードを下記のように変えれば、トップページだけに表示されるはずです。
お忙しいところ、迅速な対応ありがとうございます。
トップページに使っている固定ページは「トップページ用（タイトルなどの出力なし）」で、その他のページに使っている固定ページは「1カラム表示（サイドバーなし）」になります。
そして、投稿ページに指定している固定ページには「固定ページの属性」に「テンプレート」設定項目が無くなってしまうので状況がよくわかりません。
このような状況で、回答いただいた上記コードを「page-forfront.php」に記入すれば大丈夫なのでしょうか？
コードの記入は不慣れなもので、何度もの質問申し訳ありません。よろしくお願いいたします。
それであれば、両方（page.phpとpage-forfront.php）にさきほどのコードを貼り付ければOKです。
よろしくおねがいします。
横から失礼します。
「ホーム固定した固定ページ下に新着記事一覧を表示させたい」を参考に、トップページにカードタイプの新着記事一覧を表示させることができました。
しかし、アイキャッチ画像を設定すると、投稿ページにもアイキャッチ画像が表示されてしまいます。
・トップページにカードタイプの新着記事一覧を表示させたい
・アイキャッチ画像はトップページのみ表示したい
場合、どのようにすればよいでしょうか？
先日、ここで横から質問させていただいた者です。
・通常の固定ページをトップページに設定している（カードタイプの新着記事を表示させるため）
かつ
・ヘッダーアイキャッチをトップページのみに表示させたい
上記について、自分なりに色々やってみて、以下の設定でなんとかうまくいったので報告します。
力技なので、もし他によい方法があればご教示ください。
１．トップページを通常の固定ページに設定する
２．「よくある質問」の「ホーム固定した固定ページ下に新着記事一覧を表示したい」を実行
３．ヘッダーアイキャッチ画像を登録して表示させる設定にする
４．「page.php」に上記のコードを貼り付ける
５．「featured-header.php」の「<div class="”>」に任意のクラス名を追加（例えば「headerImg」）
６．CSSに「body.blog > div > div.headerImg {display:none;}」を追加
ただし、これだとアップデートした場合に消えてしまいますかね…。
う～む、まだまだ勉強不足です・・・。
申し訳ないです、見落としておりました。
なるほど。
次のアップデートで、「トップページ用の固定ページのサイドバー有バージョン」のテンプレートを用意しますね。
そちらを使えば、トップでのみヘッダーアイキャッチ画像が表示されるようにします。
（カードタイプの新着記事一覧を表示させるには、やはりカスタマイズが必要になりますが・・・。一応、新着記事一覧に使えそうなショートコードも1つ新しく作ります）
お待ち頂ければ幸いです。
いえいえ、お忙しいのにご検討いただき、本当にありがとうございます！これまでの機能でも充分すぎるほど満足していますので、ゆっくりのんびり待っています。
ブログ初心者ですが購入させていただき現在カスタマイズに奮闘中です。
こちらのサイトを見ながらヘッダーアイキャッチ画像を登録したのですが、sango childテーマカスタマイズ中の画面にはきちんと画像が表示されているのに、実際のブログページに行くとヘッダーアイキャッチ画像が反映されていません。それ以外のカスタマイズした事は問題なく反映されているのですが何がおかしいのでしょうか。ホームページ設定欄では最新の投稿を選択しています。どうぞよろしくお願いいたします。
度々申し訳ございません。
投稿は「公開」していたのに、テーマカスタマイズページは「下書き保存」のままで「公開」にしていなかったため、という初歩的なミスに気付き自分で解決することができました。色々他のサイトでも似たトラブルを検索してみてはいたのですが、きっと基本的なミスすぎて同じような方がいなかったのだと思います。ご迷惑お掛けいたしました。
SANGOを愛用させていただいています。
カスタマイズする中でわからない点がありましたので教えてください。
2分割ヘッダーアイキャッチを設定しており、テキスト部分についてですが、
文字の大きさの変更や色付け等を投稿と同じようにしたいのですが可能でしょうか？
投稿のスタイルを適用したものの反応しなかったので、教えていただければと思います。よろしくお願いします。
なるほど。以下のCSSの追加で変更ができます。色（#555）やフォントサイズ（1em）は調整してくださいませ。
早速のご返答ありがとうございます。
私の説明不足ですみません。
2分割ヘッダーのテキスト全文の色を変更するのではなく、
「一部」色やフォントサイズの変更をしたいため、htmlでの入力ができるようにすることは可能でしょうか？
それであれば、parts⇒home⇒featured-header.phpを編集するのが早いかと思います。
このファイルの中の
が2分割ヘッダーのテキストとして表示される部分です。これをHTMLに置き換えればよいかと思います。
子テーマを使って編集を行う場合には、
①子テーマ内にpartsフォルダーを作成
②さらにその中にhomeフォルダーを作成
③その中に親テーマからfeatured-header.phpを複製してくる
④ ③を編集する
という手順で行えばOKです。
早速のご返信ありがとうございます。
誠に恐縮ながら、「HTMLに置き換えればよい」というのは
文字列としては、何に置き換えたら良いのでしょうか？
phpは初心者で詳しくわからないため、よろしくお願いいたします。
表示したい文字列（HTML）に置き換えればOKです。
無事にカスタマイズできました！
ありがとうございました！
サルワカさま
素敵なテーマのご提供ありがとうございます。愛用させていだいております。
ヘッダーアイキャッチ画像内のテキスト全文ですが、2分割のように色を変更することは可能でしょうか。
お忙しいところ恐縮ですが、手段があればご教授くださいますと幸いです。
よろしくお願いいたします。
お世話になっております。以下のCSSで変更可能です。
ご確認よろしくお願い致します。
ご連絡が遅くなり申し訳ありません！
変更ができました。
大変ありがとうございました！！
こんにちは、サンゴ＆ワードプレス初心者です。
ヘッダーアイキャッチ画像がうまく表示できません。
最適なサイズを教えてください。
画像のサイズが大きいのだと思いますが、
PCで（画像がはみ出た部分をカットされたうえで）まぁ見れるかなという画像が、
スマホでは完全にはみ出てうまく表示されません。
デフォルトのサイズ通りに画像をつくれば問題ないのだろうと思うのですが、
教えてください、お願いします。
おそらくですが、よくある質問の「タイトル下のアイキャッチ画像をデフォルトサイズで表示したい」に当てはまるかと思います。外観⇒カスタマイズ⇒ヘッダーアイキャッチ画像⇒文字やボタンを表示しない（画像のみ表示）にチェックを入れればOKです。
お世話になります。ヘッダーアイキャッチの文字の見出しの文字の大きさを調整したいのですが、やり方を教えていただけませんでしょうか？よろしくお願いいたします。
子テーマのstyle.cssなどに
を追加すれば良いかと思います。値は好みで調整してください。
CSS変更後はキャッシュの削除を忘れずに。
お世話になります。解決することができました。ありがとうございます！
お世話になります。ヘッダーアイキャッチ 画像を、PCではONに、モバイルではOFFにする方法がありましたら教えていただけませんでしょうか？度々質問させていただき申し訳ありません。よろしくお願いいたします。
のCSSを追加すればいけるかと思います。
お世話になります。解決することができました。ありがとうございます！
お世話になります。ヘッダーアイキャッチの文字の説明文の文字の太さを調整したいのですが、やり方を教えていただけませんでしょうか？よろしくお願いいたします。
また、見出しの文字色を変更するため上記ＣＳＳを入れたのですが変わりません。
コツがあるのでしょうか
例えば色は、以下のCSSで変更可能です。
フォントサイズなどを指定したい場合は、colorの下に並べて書けばOKです。文字装飾の基本が参考になるはずです。ご確認よろしくお願い致します。
はじめまして！
ヘッダーアイキャッチ画像が、マニュアル通りにやっても上手く設定できないんですが、何か原因は考えられますか？
テーマは本日アップデートしました。
設定しても、表示されないということでしょうか。
よくある質問の「ヘッダーアイキャッチ画像が表示されない」もご確認頂けますと幸いです。
こんにちは。
ヘッダーアイキャッチに設定できるボタンの位置を調整したいのですがどのようにして調整したらよろしいのでしょうか？
ご教示お願いいたします。
位置を調整するというのは、上下の位置のことでしょうか。
下のCSSを追加して10pxの値を小さくすれば上に、大きくすれば下に下がります。
返信ありがとうございます。
説明不足ですいません。
左右の調整CSSも教えていただけませんでしょうか？
よろしくお願いいたします。
例えば、
ですね。値が大きくなるほど、右によります。
お世話になっております。どこかにマニュアルありましたらすみません。（一通り確認はしました）
こちらのサイトや他のヘビーユーザーさんのサイトで、サイトタイトル下に綺麗なグラデーションとテキスト「 例：Ver1.3.2をリリースしました（1/27）」が入っているのですが、こちらカスタマイズで表示出来るように出来ますでしょうか？
ご確認お願いいたします。どうぞよろしくお願いします。
外観→カスタマイズ→ヘッダーお知らせ欄
から設定できます！
ありがとうございます。確認しました。メニューにあったとは…申し訳ありませんでした。
はじめまして！
サンゴありがとうございます。
CSSの編集ができない初心者です。
ヘッダーアイキャッチ画像を最新の記事のアイキャッチ画像に毎回自動的に変更できる方法はありますでしょうか？あるとうれしいです。
はじめまして。恐縮ながらそのような機能はございません。
申し訳ないです。
はじめまして。使いやすいテーマをありがとうございます。
質問ですが、２分割ではないヘッダー画像設定の「見出し」「説明文」「ボタン」のテキストのフォントサイズ・色を
PCで見る際とスマホで見る際にそれぞれ大きさを分けて設定したいのですが、可能でしょうか？
PCでのテキストの大きさは、これまでの解答の中に記載されていましたので変更できたのですが、スマホで確認すると大きさが変わっておりません…。
お手数ですが返信頂けますと幸いです。
スマホ表示は、以下のCSSを子テーマのstyle.cssに追記すれば良いかと思います。
こんにちは。
ご丁寧な対応、誠にありがとうございます！！！
非常に助かりました！
こんにちは！
ヘッダーアイキャッチの場所に記事のスライドショーを載せたいのですがどのようにしたらできますか？
大変申し訳ないのですが、ヘッダーアイキャッチ画像はスライドショーに対応していません。
こんにちは。
wordpress初心者です。初心者にも使いやすいテーマをありがとうございます。
２分割ヘッダーアイキャッチの右の説明文を画像に変更する方法はありますか？
あれば教えていただけますか？
モバイルでのヘッダーのメニュー表示が２項目ごとに改行される（例えば、６項目あれば、１列に２項目表示の３列になる）ようなのですが、見栄えがよろしくないので、例えば、モバイル表示のみ１項目ごとに改行されるようにカスタマイズできますでしょうか？
ガイドのよくある質問など色々と読んだのですが、わかりませんでした。
ＰＣでの表示は問題ないです。ご教示よろしくお願いいたします。
初めまして。デザインが可愛らしくて購入させて頂きました。
ヘッダーアイキャッチの、画像そのものにURLを指定して、画像をクリックしたら指定のURLに飛ばせる方法はありますでしょうか？
できればボタンを使わずにURLに飛ばせたらと考えております。
お忙しいところ恐縮ですが、ご教授お願い致します。
分割しないタイプのヘッダーアイキャッチ画像の方だと簡単です。
①子テーマ内に「parts」という名前のフォルダーを作成
②さらに「parts」フォルダー内に「home」という名前のフォルダーを作成
③さらに「home」フォルダー内に「featured-header.php」という名前のファイルを作成
④ ③の中身は親テーマからコピペ（複製）してください。これで子テーマの「featured-header.php」が読み込まれるようになります。
⑤ 子テーマの「featured-header.php」の
を
に置き換えます。
★リンク先のURL★を置き換えてください。
これで画像をクリックすると、リンク先に飛ぶようになるかと思います。
https://saruwakakun.design/
ですと
ヘッダーアイキャッチ画像を含めサムネイル画像も
retina用の実画像データのピクセル数の50%縮小表示がなされていますが、
これを行う方法をご教示いただけますと幸いです。
特に2分割ではないヘッダーアイキャッチ画像のretina用50%縮小方法が
知りたいです。
どうぞよろしくお願いいたします！
retina用50%縮小表示とはどのようなものでしょうか。
（どの部分を見て、縮小表示がなされていると判断しておりますか？）
特に処理は行っていないのですが・・・。
コメントを書いてから色々気づいたのですが、
50%縮小うんぬん…は私の勘違いでした…。
申し訳ございませんでした。
前回の内容は忘れていただき
あらためてご質問なのですが、
SANGOをiPhoneなどのretinaディスプレイに対応するための
オススメの方法はございますでしょうか？
基本的に大きめの画像（1000px以上だとRetinaでも綺麗に見えることが多いかと思います）をアップロードすると良いと思います。
僕はRetinaのMacを使っていますが、SANGOのデモページなどで画像はぼやけることなく見えています。
お世話になっております
ヘッダーアイキャッチ画像に
svgのオブジェクトを重ねることは可能でしょうか？
カスタマイズが必要になります。
①子テーマ内に「parts」という名前のフォルダーを作成
②さらに「parts」フォルダー内に「home」という名前のフォルダーを作成
③さらに「home」フォルダー内に「featured-header.php」という名前のファイルを作成
④ ③の中身は親テーマからコピペ（複製）してください。これで子テーマの「featured-header.php」が読み込まれるようになります。
⑤ 子テーマの「featured-header.php」の16行目の
を画像タグ（
<img...>）に置き換えれば、ヘッダーアイキャッチ画像のタイトル部分にSVG画像が表示されるようになります。