サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年9月8日 07:19
添付写真が現在私の利用しているCTAウイジェットです。
ご覧の通り、電話がメインで、メールは二番手の扱いのCTAウイジェットとなります。
写真の上段はパソコン画面のイメージで、下段はスマホで見た時のイメージを再現したものです。
スマホだと、ちょうど良い感じなのですが、画面の大きなPC画面になると、電話番号の右側が空き過ぎて物足りない感じがしました。
そこで可能であれば、そのPC画面で右側に余った余白には、黄色の○で囲んだような文字列でも入れたいなあと思うのですが、そもそも現状で文字列を増やせばスマホでは溢れてしまう文字数になるので、PCでダケ文字列を追加するか？
あるいは、PCだけって言う事ではなく、PCでは右横に文字を表示して、スマホだと電話番号の次の行に表示でも良いのですが、うまく伝わるでしょうか？
このような感じにPCとスマホでCTAウイジェットの出し分けをするには、どうすれば良いでしょうか？
ちなみに、私はカスタマイズは未体験に近いので、難易度によっては、せっかく頂いたアドバイスを生かせ無い可能性があります事を予め白状しておきます。(笑)
その場合はお時間を無駄にさせてしまう事をお許しください。
2020年9月8日 17:04
widget_pc_textというクラスを付けるとPCでは表示され、モバイルでは表示されなくなります。
逆にwidget_mobile_textというクラスを付けるとモバイルでは表示され、PCでは表示されなくなります。
例えばPCのみで「緊急配送は～」を表示させるなら、CTAウィジェットのメッセージ欄に
配送受付 000-0000-0000<span class="widget_pc_text red"> 『緊急配送は24時間受付』</span>
と入力すればできます。
widget_pc_textは、名前の通り本来は「[C] テキスト（PC用）」のウィジェット用のクラスです。
わいひら reacted
Topic starter
2020年9月8日 17:19
はるさん、先程の類似質問と併せて回答を誠に感謝です。
この２つを組み合わせたら、きっと私の希望のCTAになりそうな予感でワクワクします。
明日、Macで作業するのが楽しみになります。
それにしても
正直言って難しいかな？
と思った事が、ダメ元で聞いてみると回答が頂ける。
はるさんのような回答者の存在とcocoonの自由度の高さに感動です。
はる reacted
2020年9月11日 20:28
こちらのようなカスタマイズに関する質問は、よろしければ「カスタマイズ相談」フォーラムに書いていただけると助かります。
https://wp-cocoon.com/community/customs/
momo reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。