Ver1.5 Released !

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

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

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

カスタマイザーを開く

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

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

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


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

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

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

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

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

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

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

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

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

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

 

チェックをつけると…

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

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


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

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

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

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

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

文章は簡潔に

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

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

96 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です。
よろしくおねがいします。

返信する
ちょこ

横から失礼します。
「ホーム固定した固定ページ下に新着記事一覧を表示させたい」を参考に、トップページにカードタイプの新着記事一覧を表示させることができました。
しかし、アイキャッチ画像を設定すると、投稿ページにもアイキャッチ画像が表示されてしまいます。

・トップページにカードタイプの新着記事一覧を表示させたい
・アイキャッチ画像はトップページのみ表示したい
場合、どのようにすればよいでしょうか?

ちょこ

先日、ここで横から質問させていただいた者です。
・通常の固定ページをトップページに設定している(カードタイプの新着記事を表示させるため)
かつ
・ヘッダーアイキャッチをトップページのみに表示させたい

上記について、自分なりに色々やってみて、以下の設定でなんとかうまくいったので報告します。
力技なので、もし他によい方法があればご教示ください。

1.トップページを通常の固定ページに設定する
2.「よくある質問」の「ホーム固定した固定ページ下に新着記事一覧を表示したい」を実行
3.ヘッダーアイキャッチ画像を登録して表示させる設定にする
4.「page.php」に上記のコードを貼り付ける
5.「featured-header.php」の「<div class="”>」に任意のクラス名を追加(例えば「headerImg」)
6.CSSに「body.blog > div > div.headerImg {display:none;}」を追加

ただし、これだとアップデートした場合に消えてしまいますかね…。
う~む、まだまだ勉強不足です・・・。

サルワカくん

申し訳ないです、見落としておりました。
なるほど。
次のアップデートで、「トップページ用の固定ページのサイドバー有バージョン」のテンプレートを用意しますね。
そちらを使えば、トップでのみヘッダーアイキャッチ画像が表示されるようにします。
(カードタイプの新着記事一覧を表示させるには、やはりカスタマイズが必要になりますが・・・。一応、新着記事一覧に使えそうなショートコードも1つ新しく作ります)
お待ち頂ければ幸いです。

ちょこ

いえいえ、お忙しいのにご検討いただき、本当にありがとうございます!これまでの機能でも充分すぎるほど満足していますので、ゆっくりのんびり待っています。

みほ

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

返信する
みほ

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

返信する
キヨミズ

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

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

返信する
サルワカくん

なるほど。以下のCSSの追加で変更ができます。色(#555)やフォントサイズ(1em)は調整してくださいませ。

.divheader__text .divheader__headline {/*2分割ヘッダー見出し*/
  color: #555!important;
  font-size: 1em;
}
.divheader__text .divheader__descr {/*2分割ヘッダー説明文*/
  color: #555!important;
  font-size: 1em;
}
返信する
キヨミズ

早速のご返答ありがとうございます。

私の説明不足ですみません。
2分割ヘッダーのテキスト全文の色を変更するのではなく、
「一部」色やフォントサイズの変更をしたいため、htmlでの入力ができるようにすることは可能でしょうか?

返信する
サルワカくん

それであれば、parts⇒home⇒featured-header.phpを編集するのが早いかと思います。
このファイルの中の

<?php echo esc_attr(get_option('divheader_sml_txt')); ?>

が2分割ヘッダーのテキストとして表示される部分です。これをHTMLに置き換えればよいかと思います。
子テーマを使って編集を行う場合には、
①子テーマ内にpartsフォルダーを作成
②さらにその中にhomeフォルダーを作成
③その中に親テーマからfeatured-header.phpを複製してくる
④ ③を編集する
という手順で行えばOKです。

返信する
キヨミズ

早速のご返信ありがとうございます。
誠に恐縮ながら、「HTMLに置き換えればよい」というのは
文字列としては、何に置き換えたら良いのでしょうか?
phpは初心者で詳しくわからないため、よろしくお願いいたします。

サルワカくん

表示したい文字列(HTML)に置き換えればOKです。

キヨミズ

無事にカスタマイズできました!
ありがとうございました!

佐藤

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

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

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

返信する
サルワカくん

お世話になっております。以下のCSSで変更可能です。

.header-image__text .header-image__headline {
    color: #色コード;/*見出し色*/
}
.header-image__text .header-image__descr {
    color: #色コード;/*説明文色*/
}

ご確認よろしくお願い致します。

返信する
佐藤

ご連絡が遅くなり申し訳ありません!

変更ができました。
大変ありがとうございました!!

返信する
ハック

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

返信する
サルワカくん

おそらくですが、よくある質問の「タイトル下のアイキャッチ画像をデフォルトサイズで表示したい」に当てはまるかと思います。外観⇒カスタマイズ⇒ヘッダーアイキャッチ画像⇒文字やボタンを表示しない(画像のみ表示)にチェックを入れればOKです。

返信する
ピピノブ

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

返信する
サルワカくん

子テーマのstyle.cssなどに

.header-image__headline {
font-size:2.5em;
}

を追加すれば良いかと思います。値は好みで調整してください。
CSS変更後はキャッシュの削除を忘れずに。

返信する
ピピノブ

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

返信する
サルワカくん
@media screen and (max-width: 500px)  {
  .home #divheader, .home #header-image {
   display:none;
 }
}

のCSSを追加すればいけるかと思います。

返信する
ピピノブ

お世話になります。解決することができました。ありがとうございます!

返信する
長濱

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

返信する
サルワカくん

例えば色は、以下のCSSで変更可能です。

.header-image__text .header-image__headline {
    color: #色コード;/*見出し色*/
}
.header-image__text .header-image__descr {
    color: #色コード;/*説明文色*/
}

フォントサイズなどを指定したい場合は、colorの下に並べて書けばOKです。文字装飾の基本が参考になるはずです。ご確認よろしくお願い致します。

返信する
まえだ

はじめまして!
ヘッダーアイキャッチ画像が、マニュアル通りにやっても上手く設定できないんですが、何か原因は考えられますか?
テーマは本日アップデートしました。

返信する
サルワカくん

設定しても、表示されないということでしょうか。
よくある質問の「ヘッダーアイキャッチ画像が表示されない」もご確認頂けますと幸いです。

返信する
ゆうや

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

返信する
サルワカくん

位置を調整するというのは、上下の位置のことでしょうか。
下のCSSを追加して10pxの値を小さくすれば上に、大きくすれば下に下がります。

.header-image__text p {
    margin-top: 10px;
}
返信する
ゆうや

返信ありがとうございます。
説明不足ですいません。

左右の調整CSSも教えていただけませんでしょうか?

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

返信する
サルワカくん

例えば、

.header-image__btn .raised {
    margin-left: 10px;
}

ですね。値が大きくなるほど、右によります。

返信する
パットメセニー

お世話になっております。どこかにマニュアルありましたらすみません。(一通り確認はしました)
こちらのサイトや他のヘビーユーザーさんのサイトで、サイトタイトル下に綺麗なグラデーションとテキスト「 例:Ver1.3.2をリリースしました(1/27)」が入っているのですが、こちらカスタマイズで表示出来るように出来ますでしょうか?
ご確認お願いいたします。どうぞよろしくお願いします。

返信する
サルワカくん

外観→カスタマイズ→SANGOオリジナル機能の管理→ヘッダーお知らせ欄
から設定できます!

返信する
パットメセニー

ありがとうございます。確認しました。メニューにあったとは…申し訳ありませんでした。

返信する
ピコ

はじめまして!
サンゴありがとうございます。
CSSの編集ができない初心者です。
ヘッダーアイキャッチ画像を最新の記事のアイキャッチ画像に毎回自動的に変更できる方法はありますでしょうか?あるとうれしいです。

返信する
サルワカくん

はじめまして。恐縮ながらそのような機能はございません。
申し訳ないです。

返信する
マサック

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

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

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

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

返信する
サルワカくん

スマホ表示は、以下のCSSを子テーマのstyle.cssに追記すれば良いかと思います。

/*スマホ表示でのヘッダーアイキャッチ*/
@media screen and (max-width: 480px)  {
  .header-image__text .header-image__headline {
    font-size: ◯em;/*見出しのサイズ*/
  }
  .header-image__text .header-image__descr {
    font-size: ◯em;/*説明文のサイズ*/
  }
  .header-image__btn .raised {
    font-size: ◯em;/*ボタンの文字サイズ*/
    background-color: #EFEFEF;/*ボタンの色*/
  }
}/*END スマホ表示でのヘッダーアイキャッチ*/
返信する
マサック

こんにちは。

ご丁寧な対応、誠にありがとうございます!!!
非常に助かりました!

返信する
simon

こんにちは!
ヘッダーアイキャッチの場所に記事のスライドショーを載せたいのですがどのようにしたらできますか?

返信する
サルワカくん

大変申し訳ないのですが、ヘッダーアイキャッチ画像はスライドショーに対応していません。

返信する
おおしま

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

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

返信する
なぴ助

モバイルでのヘッダーのメニュー表示が2項目ごとに改行される(例えば、6項目あれば、1列に2項目表示の3列になる)ようなのですが、見栄えがよろしくないので、例えば、モバイル表示のみ1項目ごとに改行されるようにカスタマイズできますでしょうか?

ガイドのよくある質問など色々と読んだのですが、わかりませんでした。

PCでの表示は問題ないです。ご教示よろしくお願いいたします。

返信する
はるちゃん

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

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

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

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

返信する
サルワカくん

分割しないタイプのヘッダーアイキャッチ画像の方だと簡単です。

①子テーマ内に「parts」という名前のフォルダーを作成
②さらに「parts」フォルダー内に「home」という名前のフォルダーを作成
③さらに「home」フォルダー内に「featured-header.php」という名前のファイルを作成
④ ③の中身は親テーマからコピペ(複製)してください。これで子テーマの「featured-header.php」が読み込まれるようになります。
⑤ 子テーマの「featured-header.php」の

<div class="<?php if (get_option('limit_header_width')) echo 'maximg'; ?>">
	<img src="<?php echo esc_url(get_option('original_image_upload'));?>"/>
</div>

<a href="★リンク先のURL★" style="display:block">
<div class="<?php if (get_option('limit_header_width')) echo 'maximg'; ?>">
	<img src="<?php echo esc_url(get_option('original_image_upload'));?>"/>
</div>

に置き換えます。
★リンク先のURL★を置き換えてください。
これで画像をクリックすると、リンク先に飛ぶようになるかと思います。

返信する
にゃんたろう

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

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

返信する
サルワカくん

retina用50%縮小表示とはどのようなものでしょうか。
(どの部分を見て、縮小表示がなされていると判断しておりますか?)
特に処理は行っていないのですが・・・。

返信する
にゃんたろう

コメントを書いてから色々気づいたのですが、
50%縮小うんぬん…は私の勘違いでした…。
申し訳ございませんでした。

前回の内容は忘れていただき
あらためてご質問なのですが、
SANGOをiPhoneなどのretinaディスプレイに対応するための
オススメの方法はございますでしょうか?

返信する
サルワカくん

基本的に大きめの画像(1000px以上だとRetinaでも綺麗に見えることが多いかと思います)をアップロードすると良いと思います。
僕はRetinaのMacを使っていますが、SANGOのデモページなどで画像はぼやけることなく見えています。

返信する
H

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

返信する
サルワカくん

カスタマイズが必要になります。

①子テーマ内に「parts」という名前のフォルダーを作成
②さらに「parts」フォルダー内に「home」という名前のフォルダーを作成
③さらに「home」フォルダー内に「featured-header.php」という名前のファイルを作成
④ ③の中身は親テーマからコピペ(複製)してください。これで子テーマの「featured-header.php」が読み込まれるようになります。
⑤ 子テーマの「featured-header.php」の16行目の

<?php echo esc_attr(get_option('header_big_txt')); ?>

を画像タグ(<img...>)に置き換えれば、ヘッダーアイキャッチ画像のタイトル部分にSVG画像が表示されるようになります。

返信する
たいやき

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

返信する
サルワカくん

お世話になります。
文字が画像をはみ出ることがないように、
文字数やデバイスに応じて、画像サイズが調整されるようになっております。
そのためヘッダーアイキャッチ画像の設定にて「文字やボタンを表示しない(画像のみ表示)」にチェックを入れると、
画像が切り取られることはなくなります。
よろしくお願いします。

返信する
ひで

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

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

返信する
サルワカくん

WAFをたしかに解除されているとなると、ファイルのどこかに文法エラー等がある可能性がありますね。
(特にfunctions系のファイルで間違いがあるとそのような問題が起こる可能性があります)
子テーマ、プラグインを一度すべて停止してみて、同様の問題が起きるかご確認いただけますか?
直接テーマを編集されている場合には、原因の特定は困難かもしれません。

返信する
HIDE

昨日「ロゴとメイン画像が変更できない」とコメントしたものですが、キャッシュのようでした。
お手数おかけしました。

返信する
へいも

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

返信する
サルワカくん

Ver1.3〜の追加機能です。
外観⇒カスタマイズ⇒SANGOオリジナル機能の管理⇒ヘッダーお知らせ欄
にて設定ができます。

返信する
池本えいみー

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

返信する
サルワカくん

こちらの件、メールで返信もしたと思うのですが…

画像サイズが小さいことが原因だと思われます(縦横比は良いですが、画像のサイズ自体が小さい)。

.home .header + div img {
    width: 100%;
}

というCSSを追加すれば、常に横いっぱいに広がるようになりますが、
大きな画面で見ると、ぼやける可能性が大です。
「最大幅に制限を設ける」にチェックを入れることをおすすめします。

返信する
MIHO

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

返信する
サルワカくん

はじめまして。ヘッダーメニュー文字色が白(=背景色)となっているため、結果として見えなくなってしまっているようです。
外観→カスタマイズ→色 から設定を見直して頂ければと思います。

返信する
MIHO

基本的なことで申し訳ありませんでした。
お忙しい中、早々にお返事いただきありがとうございました。

返信する
nene

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

返信する
JOE

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

返信する
JOE

ご返信ありがとうございます。WAFを無効にしたらカスタマイズ自体は「公開」を押せるようになりましたが、ヘッダー画像は設定できないです。
なお、その後もう一度WAFを有効に戻しても「公開」はできる状態のままでした。

何か他に想定できることはございますでしょうか?

返信する
サルワカくん

ヘッダーアイキャッチ画像を設定(ヘッダーアイキャッチ画像を表示に忘れずにチェックを入れる)し、公開を押して保存後、トップページを確認しても表示されていませんか?
また、固定ページをトップページに固定している場合には、表示されない場合があります。

返信する
JOE

返信遅くなり申し訳ないです。

>ヘッダーアイキャッチ画像を設定(ヘッダーアイキャッチ画像を表示に忘れずにチェックを入れる)し、公開を押して保存後、トップページを確認しても表示されていませんか?

ダメですね。

>また、固定ページをトップページに固定している場合には、表示されない場合があります。

これで表示することができました!

トップページを固定ページにするとダメなんですね。これは仕様ですか?それとも、人によって…みたいな感じでしょうか?

サルワカくん

バージョンによって違いがあるという感じですね。最新のSANGOであれば、トップページ用固定ページでも、ヘッダーアイキャッチ画像を表示することができます。

キム

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

返信する
サルワカくん

サイトを見てみると、header.phpに本来書かれているはずの

<meta name="viewport" content="width=device-width, initial-scale=1 ,viewport-fit=cover"/>

が見当たらないようなのですが…。
カスタマイズ時に消してしまっていませんか?

返信する
サルワカくん

どのテンプレートを選んでいますか?
子テーマにはテンプレートファイルは入っていませんよね?

返信する
まいける

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

返信する
サルワカくん

大変申し訳ないのですが、現状では対応していないですね・・・。
イメージ通りになるかは分かりませんが、スライダー系のプラグインを入れて、トップページ用固定ページの最上部に挿入するのが楽な方法かと思います。

返信する
まいける

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

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

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

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

返信する

コメントを残す

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