before-main.phpで、グローバルメニュー下に追加した画像をレスポンシブ対応させたい。

PR 2018/1/26

このトピックには3件の返信、1人の参加者があり、最後にかうたっくにより8年、 8ヶ月前に更新されました。

3件の返信スレッドを表示中

投稿者

投稿
- 2018年1月26日 8:49 PM #58456
  いけもと
  ゲスト
  お世話になります。
  
  下記の方法（before-main.phpを利用）で、
  トップの場合だけ画像を表示するように、なんとかできました。
  ですが、画面幅を狭めると画像幅自体も小さくなってしまい、比率がおかしくなってしまいます。
  
  Javascriptなどがよく分からないため、
  CSSでレスポンシブ対応することは可能でしょうか？
  
  大変お手数おかけしますが、どうぞよろしくお願いいたしますm(__)m
  
  ＜行ったカスタマイズ＞
  ①子テーマのfunctions.phpに以下を追加。
  //トップページにウィジェットで固定メッセージを表示
```
if (function_exists('register_sidebar')){
    register_sidebar(array(
        'before_widget' => '<div class="top_main_widget" id="%1$s">'."\n",
        'after_widget' => '</div>'."\n",
        'before_title' => '<h3>',
        'after_title' => '</h3>',
        'name' => 'トップメイン',
        'id' => 'top_main_widget'
    ));
}
```
  ②子テーマのstyle.cssに以下を追加
```
/* トップページにウィジェットで固定メッセージを表示用 */
.top_main_widget {
  background-color:#eee;
  padding:10px;
  margin-bottom:10px;
}
```
  ③Simplicityに元々入っている before-main.php で表示。
```
if (is_front_page()){
    dynamic_sidebar('top_main_widget');
}
```
  ④外観＞ウィジェット
  →トップメイン　というウィジェットエリアから、画像を表示する。
- 2018年1月26日 9:16 PM #58459
  
  かうたっく
  ゲスト
  
  ウィジェットを入れなくてもおそらく表示できると思います。
  
  入れても表示できると思いますが、CSSでどのような書きかたをしてるかよくわかりません。その画像の高さをautoにすると比率は正常になりませんか？
  
  どのような画像を入れたのかなど不明なので何とも言えませんが…。
  
  全く違っているようでしたら、URLを置いていただけますか。
  
  ※テーマカスタマイズに関する質問は、カスタマイズ対象ページのURLと対象部分の詳細を書き込んでください。
- 2018年1月26日 11:39 PM #58461
  
  いけもと
  ゲスト
  
  かうたっく様
  
  情報不足で、申し訳ありません。
  
  画像を
  width=”100%” height=”auto”
  にしてみると、画面幅に合わせて表示できました！
  
  URLは、https://ikedesign.jp　です。
  
  今は、適当な画像を貼っております。
  
  初歩的な質問で申し訳ありません。
  
  そして、ウィジェットでなくても表示できるのですね。。
  
  autoを今まで使ったことがなくて、勉強になりました。
  ありがとうございましたm(__)m
- 2018年1月27日 5:49 AM #58463
  かうたっく
  ゲスト
  いえ、レスポンシブ対応できたようで良かったです＾＾
  
  URLを置いてもらってるのは、CSSで対応したいってこと？だろうかと思ったので。
  
  画像を
  width=”100%” height=”auto”
  にしてみると、
  
  今は、適当な画像を貼っております。
  
  とありますが、アップロードした画像を同じ場所に貼りなおすだけでしたら、以下のCSSでいけると思います。
```
.top_main_widget img {
	max-width: 100%;
	height: auto;
}
```
投稿者

投稿