ちなみにこの画像はPC画面では丁度良い文字サイズに見えると思うので、スマホ用の画像は、文字サイズはこのままに、途中の帯の長さを短くする形で文字の位置など調整して、横のピクセル数を減らす予定です。

ただ、そうやって画像をスマホとPCで二枚作っても、同じ位置で出し分けをする方法がわからず、あまり難しく無いカスタマイズで対応可能ならばと質問させて頂きました。

現在、子テーマは導入してあるので、子テーマが必要なカスタマイズも少しは可能です。

前略、@momochan さん

安直なやり方ですが、試しにローカルのテストサイトでやってみました。

・コンテンツ上部に画像ウィジェットを2つ（PC用とスマホ用）を入れ、それぞれの画像をセットする

・子テーマのCSSファイルに以下のコードを追記する（画像ウィジェットのIDは、デベロッパーツールでソースコードを見ることで簡単に調べることができます）

#media_image-2 {/*PC用*/
   display: block;
}

#media_image-3 {/*スマホ用*/
   display: none;
}

@media screen and (max-width:480px) {/*画面幅が480px以下のとき*/
   #media_image-2 {/*PC用*/
      display: none;
   }

    #media_image-3 {/*スマホ用*/
      display: block;
   }
}

@momochan さん

注意点としては、画像ウィジェットを一旦、削除して、再びセットし直したときは、画像ウィジェットのID番号が都度変わってしまうと思われるので、その場合は、また、デベロッパーツールでIDを調べて、CSSのコードを修正する必要があろうかと思われます。

リフィトリーさん、詳細にアドバイスありがとうございます。

丁度今帰宅して、実験開始したのですが、正に、その現象なのか？

リフィトリーさんのデモ画像のようにならなくて苦戦中です。

今頂いたアドバイスを元に最初からやり直してみます。

@momochan

テスト用に作ったスマホ用の画像のサイズは、480px × 200px です。

@momochan さん

できたっぽいですけど、私の作った画像は適当なので、どこか間違っているかもしれないので、お気をつけください。 ? 

リフィトリーさん、何度もやり直していたら、今、お陰様で出来ました。

画像もとても良いレイアウトとサイズだったので、厚かましくも、そのまま利用させて頂きました。

想像以上に素晴らしい動作で嬉しいです。

ありがとうございます。

でも、私の場合は、idとcssファイルの関連がイマイチ理解して出来てないのか？　何度もウイジェットの削除と追加を繰り返して、偶然にも今は成功している感じがありまして、この状態を崩さないでいられるのか？

ちょっとまだ自信が持てない状態です(笑)。

@leafytree　さん、確認してくださったのですね。

ありがとうございます。

先ほどすれ違いになりましたが、成功のご報告させて頂きました。

サンプルに作成して頂いた画像は、私には最高の画像でした。記載内容もバッチリ素晴らしいので、そのままで愛用させてください。

@momochan　さん

今一度、誤字脱字チェックをお願い致します。

@momochan さん

車の画像は要らないのですか？

画像ウィジェットは３つでもイケそうですけど・・・

@leafytreeさん、実は、入れたいのですが、ここまで既に何度も画像ウイジェットの削除と追加を繰り返して、偶然にも成功したと言う情けない状態です。

またレスポンシブ対応が壊れるかも？

と思ってビビって車の画像には未着手でした。

もう一つの実験サイトの方で、この状況を作って、この部分を自由自在に触れるように練習すべきかもしれません。

@momochan さん

あまり無責任なことは書けないのですが、スマホ用の画像ウィジェットの下に入れてみてもいいかもしれません。

もし仮に、どこか崩れたら、追加した画像ウィジェットを削除すれば、元に戻るような気がします。

そうなんですか！

それなら実験は簡単ですね。

とは言え、間も無く実験用サイトに複製が完了したので、そこでやってみますね。

実験用　

https://cocoon.momo-express.com/

本番用

https://momo-express.com/

@momochan さん

テスト用のサイトがあれば、練習できますね。

画像ウィジェットのIDを調べるには、画像を右クリックしてChromeなら、検証を選択すればデベロッパーツールが開くので、簡単です。

HTMLのタグの中に id="hogehoge" となっていたら、CSSのコードでは、セレクタ名を ＃hogehoge のように最初に半角のシャープをつければOKです。

今後の練習方法のご指導もありがとうございます。

先ほどコピーした練習サイトにて、

リフィトリーさんの言われた通りで、車両の写真で画像ウイジェット３つめを追加して、問題なく動作しました。

今後、何かで動作不良に陥った場合に備えて、ウイジェットのidを見て、cssを直す手順に慣れてはおきたいと思います。

今から本番サイトに、練習サイトの状態をコピーしたいと思います。

リフィトリーさん、お陰様で、本番サイトにもレスポンシブな連絡先画像と、元の車両のヘッダー画像を入れることが出来ました。

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

まさか、こんな感じに仕上がるとはビックリでした。

cocoonに切り替えるに当たって、一番の障害となっていたのがお客様が急ぎの場面で敏速に連絡先を見つけて頂く方法でした。

LightningProのその機能は、PCとスマホで表示が最適化されており、クリックする領域によって電話発信とメール作成画面に切り替わるなど素晴らしいのですが、今回の画像切り替え方式は、画像が上手に作れた場合は、画面サイズに応じて最適なレイアウトで表示出来る点ではLightning同等となりました。

将来的に気分次第で、また画像は更新出来ると思うので、ホームページのイメージチェンジにも活用できそうです。その点ではこっちの案が良い部分ですね。

従来、子テーマの利用から逃げてきましたが、これでいよいよ子テーマがデフォルトになりました。

カスタマイズの道に片足の先の小指の先？くらい突っ込んでしまいました(笑)。

長い目で見て、軸足がカスタマイズ側になれたら良いなあと漠然と感じつつあります。

今回の件、そして最近は常に誠にお世話になっております。リフィトリーさんありがとうございます。