Cocoonフォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

コンテンツ上部ウイジェットのモバイルと...
 
共有:
通知
すべてクリア

[解決済] コンテンツ上部ウイジェットのモバイルとPCで出し分けする方法?

17 投稿
2 ユーザー
11 Likes
2,341 表示
momo
 momo
(@momochan)
Trusted Member Registered
結合: 3年前
投稿: 55
Topic starter  

コンテンツ上部ウイジェットに画像を入れてます。

https://momo-express.com/

PC画面で横幅が短くならないように1500pxで連絡先電話番号を画像でtel:リンク付きで入れました。

この画像がiPhoneで表示されると、元画像の横幅が長いからか?文字が小さくなってしまいました。

添付ファイルの丸で囲んだ部分です。

そこで、コンテンツ上部ウイジェットに同じ内容で横幅のpx数が違う画像を二枚入れて、スマホとPCで出し分けしたいと思いました。

テキストウイジェットならcocoonとしてパソコンとモバイルで出し分けが最初から準備されているようですが、画像ウイジェットの場合は、どうすれば出し分け可能になるでしょうか?

 


   
momo
 momo
(@momochan)
Trusted Member Registered
結合: 3年前
投稿: 55
Topic starter  

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

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

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

前略、@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;
}
}

 

 

 

This post was modified 2年前 2回 by リフィトリー

   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@momochan さん

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


   
momo
 momo
(@momochan)
Trusted Member Registered
結合: 3年前
投稿: 55
Topic starter  

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

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

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

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@momochan

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

 


   
わいひら and momo reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@momochan さん

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


   
momo reacted
momo
 momo
(@momochan)
Trusted Member Registered
結合: 3年前
投稿: 55
Topic starter  

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

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

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

ありがとうございます。

 

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

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

 


   
momo
 momo
(@momochan)
Trusted Member Registered
結合: 3年前
投稿: 55
Topic starter  

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

ありがとうございます。

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

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@momochan さん

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@momochan さん

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

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


   
momo
 momo
(@momochan)
Trusted Member Registered
結合: 3年前
投稿: 55
Topic starter  

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

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

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

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@momochan さん

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

 

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


   
わいひら reacted
momo
 momo
(@momochan)
Trusted Member Registered
結合: 3年前
投稿: 55
Topic starter  

そうなんですか!

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

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

実験用 

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

本番用

https://momo-express.com/


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@momochan さん

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

 

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

 

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

This post was modified 2年前 by リフィトリー

   
わいひら reacted
momo
 momo
(@momochan)
Trusted Member Registered
結合: 3年前
投稿: 55
Topic starter  

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

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

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

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

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


   
momo
 momo
(@momochan)
Trusted Member Registered
結合: 3年前
投稿: 55
Topic starter  

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

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

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

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

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

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

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

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

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

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


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました