特典機能について

コンテンツ上部ウイジェットのモバイルとPCで出し分けする方法? | CSSカスタマイズ相談 | 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. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

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

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


momo
(@momochan)
Trusted Memberサイト
結合: 2年前
投稿: 55
momo - Facebookmomo - Twitter
Topic starter  

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

https://momo-express.com/

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

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

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

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

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

 


momo
(@momochan)
Trusted Memberサイト
結合: 2年前
投稿: 55
momo - Facebookmomo - Twitter
Topic starter  

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

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

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6770
 

前略、@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 リフィトリー

わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6770
 

@momochan さん

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


momo
(@momochan)
Trusted Memberサイト
結合: 2年前
投稿: 55
momo - Facebookmomo - Twitter
Topic starter  

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

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

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

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6770
 

@momochan

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

 


わいひらmomo 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6770
 

@momochan さん

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


momo 件のいいね!
momo
(@momochan)
Trusted Memberサイト
結合: 2年前
投稿: 55
momo - Facebookmomo - Twitter
Topic starter  

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

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

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

ありがとうございます。

 

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

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

 


リフィトリー 件のいいね!
momo
(@momochan)
Trusted Memberサイト
結合: 2年前
投稿: 55
momo - Facebookmomo - Twitter
Topic starter  

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

ありがとうございます。

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

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6770
 

@momochan さん

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6770
 

@momochan さん

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

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


momo
(@momochan)
Trusted Memberサイト
結合: 2年前
投稿: 55
momo - Facebookmomo - Twitter
Topic starter  

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

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

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

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6770
 

@momochan さん

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

 

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


わいひら 件のいいね!
momo
(@momochan)
Trusted Memberサイト
結合: 2年前
投稿: 55
momo - Facebookmomo - Twitter
Topic starter  

そうなんですか!

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

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

実験用 

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

本番用

https://momo-express.com/


リフィトリー 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6770
 

@momochan さん

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

 

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

 

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

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

わいひら 件のいいね!
momo
(@momochan)
Trusted Memberサイト
結合: 2年前
投稿: 55
momo - Facebookmomo - Twitter
Topic starter  

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

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

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

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

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


リフィトリー 件のいいね!
momo
(@momochan)
Trusted Memberサイト
結合: 2年前
投稿: 55
momo - Facebookmomo - Twitter
Topic starter  

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

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

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

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

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

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

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

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

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

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


わいひらリフィトリー 件のいいね!
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは7日以内なら無料自動復旧可能
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
×DBは手動で復旧(データ取得は無料)
×ファイルも手動で復旧(データ取得は無料)
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
×ファイルは手動復旧(データ取得は無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:6年

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