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

Simplicityの特徴 フォーラム Simplicityについての質問 トップページだけにメインビジュアルを表示させたい。

  • このトピックには16件の返信、2人の参加者があり、最後に894chにより4年前に更新されました。
16件の返信スレッドを表示中
  • 投稿者
    投稿
    • #33038
      高橋
      ゲスト

      いつも使わせて頂いております。
      素人質問なのですが、トップページだけにメインビジュアルを表示させたいのですが、ご教授ねがえませんでしょうか。
      http://amanjiwo-hair.com/
      こんな感じにしたいのですが・・
      初歩的な質問、申し訳ございませんが、よろしくお願い致します。

    • #33046
      Hidekichi
      ゲスト

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

    • #33047
      Hidekichi
      ゲスト

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

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

    • #33051
      わいひらわいひら
      キーマスター

      書かれている内容だけでは、詳しい仕様はわからないのですけど、以下のような方法ならあります。
      Simplicityカスタマイズ。3行でトップページだけにメインビジュアルを表示させる | ズボラしき世界

    • #33070
      高橋
      ゲスト

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

    • #33076
      わいひらわいひら
      キーマスター

      #33070に書かれているタグ自体に不備があるように思います。

      <div id=”main-visual”>/images/main-visual.jpg” /></div>

    • #33079
      高橋
      ゲスト

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

    • #33080
      高橋
      ゲスト

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

    • #33081
      高橋
      ゲスト

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

    • #33082
      Hidekichi
      ゲスト

      タグで書くと実体化するので、[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の中はカラなのでそこに何かしら入れることもでき応用できまくりです。

    • #33083
      Hidekichi
      ゲスト

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

    • #33085
      高橋
      ゲスト

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

    • #33088
      Hidekichi
      ゲスト

      #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%; 
        }
      }

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

    • #33089
      Hidekichi
      ゲスト

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

    • #49030
      894ch
      ゲスト

      いきなりの投稿すみません。
      私も素人で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で作成したのですがこれがまずかったでしょうか?

    • #49034
      Hidekichi
      ゲスト

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

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

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

    • #49036
      894ch
      ゲスト

      Hidekichiさん

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

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

16件の返信スレッドを表示中
  • トピック「トップページだけにメインビジュアルを表示させたい。」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)