サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年1月18日 08:48
いつもお世話になっております。今回WEBページを作るにあたってどうしても画像を並列させた状態でパソコンとスマホの両方に表示させたいため色々と検索して下記のような方法をとりました。
⑴
画像1 画像2 画像3
と
画像1 画像2 画像3(サイズ指定を縦横1/2にしたもの
)をテキストに記載
⑵style.cssに.pc img{display:inline-block;}.sp img{display:none;}@media screen and (max-width: 640px) {.pc img {display: none;}.sp img {display:inline-block;
}}と記載
この方法で並列状態で画像を表示することが出来ましたがヘッダーとメインカラムの余白が大きくなってしまいました(写真の赤丸の部分です)。この余白を消したいのですが可能でしょうか?また上記のやり方よりも適しているやり方などありましたら教えていただけると助かります
Topic starter
2019年1月18日 08:56
訂正
⑴並列させたい画像1,2,3をdiv class="pc"とサイズを縦横1/2したものをdiv class="sp"でそれぞれ囲ってテキストに記載です
2019年1月18日 12:00
うぅんっとですね。その状態のままでお使いになる前提でお答えさせていただきますね。
@media screen and (max-width: 640px) {
.pc {
display: none;
}
}
PCで指定されている領域が表示された分、余白として表示されてます。
***
見てみると色んなミスがあるように思います。リンクがキチンと踏めるか。画像のどこをクリックしてもリんクが踏めるか。などなどご確認いただけたら、ユーザーさんも困らないかもしれません。
※このトピックとは、全く1つも関係ありません。ほんの参考程度にと思いまして。この件のご返信はなしで大丈夫です！
わいひら reacted
Topic starter
2019年1月21日 14:30
>かうたっく様
お返事ありがとうございます。style.cssに追加したところ空白の部分が大分スッキリしました。ありがとうございます。リンクも試したところしっかり踏めているようです。重ねて質問してしまい申し訳ないのですがこれ以上余白は詰めることは難しいんでしょうか?もし出来るのであればロゴの上の空白も消したいです。
2019年1月21日 21:42
おそらく、リンクが踏めないのは、「ネット予約」の部分かと思います。
a href="tel:042-971-5505"
これはスマホではいけるのかもしれませんが、パソコンか確認すると利用できません。
https://www.tagindex.com/html5/text/a_tel.html
もちろん、意図してそのようにしているのであれば全然OKだと思います。
ロゴ部分は、以下のCSSで対処できるかと思います。
.tagline {
display: none;
}
これ以上余白は詰めることは難しいんでしょうか?
これは、ボタンの上下のことでしょうか。できれば、詳細にお願いします（もしくは画像で）。
もしそうであれば、本文（.entry-content）とh3見出し（.article h3）の余白を調整する必要があるかもしれません。
Topic starter
2019年1月22日 09:32
>わいひら様
ご指摘ありがとうございます。質問内容以外にもアドバイスありがとうございます。
また余白部分もわいひら様の提案していただいたようにCSSを編集することで余白部分をスッキリさせることができました。
お二方とも懇切丁寧に教えてくださりありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。