トップページだけにメインビジュアルを表示させたい。

そのメインビジュアルは固定画像ですか？
それともページによって変わりますか？

あ、ページとひとまとめに言ってしまいましたが、例えば何かしらのアクションで変わる感じかどうかということです。

固定画像の場合であれば、誰もが忘れてしまっていると思われるbefore-main.phpに、画像を入れるだけでできそうです。ただし、is_front_page, is_homeみたいな条件はいるかと思うんですけれども。

ご返信ありがとうございます。
Hidekichiさん、固定画像で考えているのですが、
わいひらさんに教えて頂いた下記サイト
【Simplicityカスタマイズ。3行でトップページだけにメインビジュアルを表示させる | ズボラしき世界】
で書かれているように
テーマの編集から、子テーマのbefore-main.phpに、
<?php if(is_home()): ?>
<div id=”main-visual”>/images/main-visual.jpg” /></div>
<?php endif; ?>
追加し、子テーマの中のimagesフォルダの中にも画像アップしたのですが変化無しでした。
根本的に当方のやり方が間違ってるのでしょうか・・

わいひらさん、ちょっと抜けていました。
下記をそのままコピペしたんですが変化無しです。
これ自体が不備なんですかね？？
<?php if(is_home()): ?>
<div id=”main-visual”>/images/main-visual.jpg” /></div>
<?php endif; ?>

すいません、投稿すると下記が抜けてしまいます。

<div id=”main-visual”>この部分/images/main-visual.jpg” /></div>

タグで書くと実体化するので、[div class=”test”]test[/div]などと書くと良いかも知れません。
また、わいひらさんの手間が増えますが、スクリプトを範囲選択して、コメント投稿欄の上のcodeボタンでもよいですし、Shift+@で入るバッククォート(だったかな?)で囲んでもcodeが適用されます。

つまりは、

[div id="main-visual"]
  [img src="/images/main-visual.jpg" /]
[/div]

こういうことですよね。

中身がオカシイと考えると、それはパスぐらいなんですが、
is_home() ではなく、is_front_page()ではどうでしょうか？

ちなみに、imgタグで書き出すと、レスポンシプに対応させることで画像の比率(アスペクト的に)がおかしくなる可能性があります。なので、僕がこのトピックで書いた方法でbackground-imageに置いてみてはどうでしょうか？

構造的には、

[div id="main-visual"]
  [div class="inner"][/div]
[/div]

こうです。

で、innerに上のリンクのcssの設定をします。#main-visualは例えば#mainと#sidebarの幅にサイズを合わせたりするような場合にりようできますし、上記の方法なら、更にもう一枚バックグラウンド(#main-visualの)に画像を入れることもできますし、更にinnerの中はカラなのでそこに何かしら入れることもでき応用できまくりです。

で、すっかりクォートの存在を忘れているという(笑)

Hidekichiさん、
is_home() ではなく、is_front_page()で記述するとできました！！
すばらしい！助かりました。ありがとうございます！！！
ちなみに、画像を画面（横幅）いっぱいにするならば、画像のサイズを変更
すれば出来ますでしょうか？
素人質問ばかりですいますん。

#33082 の「ちなみに・・・」の部分のようにすれば、100%しても比率を保てますよ。その際は、

#main-visual {
  width: 100%
}

#main-visual .inner {
  //サンプルのcss部分
}

これでokです。

imgタグで100%にすると、height:autoにすれば、比率的には問題ないものの、問題が出る場合があります。

例えば、PC画面で横100%にしたとします。画像は1024 x 300pxで作ったとしましょう。画面幅に合わせるので1980pxのフルサイズにした時、height:autoなら、縦が580.078125pxになります。
横が980pxの画面幅なら縦は287.109375pxになります。

スマホに合わせて、画像を作ったとします。320 * 100ぐらいにしてみようかと考えます。では1024pxの時縦サイズはどうなるかなのですが、341.3333px、1098pxの時、618.75pxになります。

どちらもPCの時大きすぎると思いませんか？
いや、大きくても良いのです。ただ、heightをauto以外の数値にした場合、縦横のアスペクト比が崩れます。これが問題です。横100%は固定なんです。しかし高さ調節ができないって話になるのが僕が言う問題点です。

なので、これを解決するためには、横100%の時に高さを任意のものに変えられる仕組みが必要なのです。

これを実現するためには、#33082以降の「ちなみに…」のリンクにあるサンプルのように、background-imageで画像を読み込ませ、heightを0にして、paddingで高さを確保します。もちろん他にも設定がいるのですが、これらの方法をうまく使うと、任意の縦横比率でレスポンシブに画像を表示することができるんです。

お試しに「ちなみに…」の後にあるリンクのトピックのサンプルですがfiddleにPCでアクセスして、右下の画面の左側境界を拡大縮小してみて下さい。画像が比率を保ったままレスポンシブにサイズが変わっているのがご理解頂けると思います。

例えば、PC画面の時、高さを変えたいのであれば、paddingにある%の値を変更すればよく、これらはメディアクエリを利用して、paddingの%の値を設定することで可変することができます。そして、必ず画像は(デフォルト設定なら)縦横中央に揃います。

/*pcの時は高さがありすぎるとアレなので*/
#main-visual .inner {
  //あとサンプルにある残りの設定
  padding: 0 0 20%;
}

/*デカイスマホから小さめタブレット*/
@media screen and (max-width: 1024px) and (min-width: 660px){
  #main-visual .inner {
    padding: 0 0 40%; 
  }
}

/*スマホの時は16:9*/
@media screen and (max-width: 659px){
  #main-visual .inner {
    padding: 0 0 56.25%; 
  }
}

ブレイクポイントの幅の数値は適当ですが、こんなふうに高さを変えることができます。もちろんスマホの時に一番小さくしても良いです。高さが任意に変えられるというところがミソなんです。

☓ 1098pxの時、618.75pxになります。
◯ 1980pxの時、618.75pxになります。

いきなりの投稿すみません。
私も素人でPHPといわれると頭が混乱してしまいます…。
試行錯誤してみたのですが途中から本当に訳が分からなくなってしまったので解決策をご教授ください。

私も高橋さんと同じように、サイトのトップページにメインビジュアルを表示したいと思っています。
そこで私なりにこのトピックの方法を利用して、トップページにメインビジュアルを表示できるようにしてみたのですが、なぜか画像が右に寄ってしまいます。
（ナビゲーションの下に画面いっぱいのメインビジュアルを表示しようとしています）

Simplicityの子テーマに記述した内容は以下の通りです。

before-main.php

<?php if(is_front_page()): ?>
<div id="main-visual">
<div class= "inner"></div>
</div>
<?php endif; ?>

style.css

#main-visual {
  width: 1920px;
}

#main-visual .inner {
  background-image: url("http://…/main.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 0;
  display: block;
  padding: 0 0 40%;
  margin: auto;
}

ちなみに画像は1920×680で作成したのですがこれがまずかったでしょうか？

実際どうなっているかを見たらすぐに原因はわかると思うんですが、どのように右に寄っているかがわからないと何とも言えない感じです。

#main-visualがwidth:1980pxというのはあまりよくありません。widthは100%にするか、100%とmax-widthを入れるのが良いのではなかろうかと。
他の要素、ヘッダとかメイン部分とかの要素に合わせて幅を決めるべきです。レスポンシブにする場合、pxで指定するとブラウザのリサイズに対応できない部分が出てきます。

例えばのサンプルとして
サンプル: Simplicity なるべく横幅を使うために | codepen
サンプル: Simplicity メニュー下に画像挿入 | codepen
※ まんま適用しても何かしらレイアウトがおかしくなる部分があるかも知れません。あくまでサンプルです。

Hidekichiさん

サンプルコードを試してみるとうまくいきました！
(SCSSと気づかずに時間がかかってしまいました…)

ありがとうございました！