サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019-03-21 10:34
改めてcocoon公開１周年おめでとうございます。テーマのクオリティもさることながら、このフォーラムサイトにもとてもお世話になっており、自分のような素人の質問にも丁寧に答えてくださるわいひらさんやメンバーの方々には感謝しかありません。
今回は、youtubeやTwitterの埋め込みが表示された際の下幅についてお聞きしたいと思いトピックを立てました。
自分は、画像の赤矢印の部分「埋め込みで表示されたモノとテキストの幅」をmarginを使って調整したいと考えています。しかし、埋め込みを指定するcss（コード?）がわかりません。そこで調整するにはどのようなcssが適切なのか教えていただけると助かります。
ぜひよろしくお願いします。
2019-03-22 16:23
Twitterカードのしたにあるpタグは属性を付ける
p class="hoge"
/* Twitterカード下 */
twitter-widget {
margin-bottom: 0 !important;
}
.twitter-tweet + p,
script[src^="https://platform.twitter.com/widgets.js"] {
display:none;
}
p.hoge {
margin-top: 0;
}
/* youtube下 */
.video-container { margin-bottom: 0; } .video-container + p { margin-top: 0; }
わいひら reacted
2019-03-22 18:33
.twitter-tweet + p,
script[src^="https://platform.twitter.com/widgets.js"] {
display:none;
}
p.hoge {
margin-top: 0;
}
上記の件。その直後思ったのですが。もっとシンプルにイケる書けそうかも。上のほうはTwitterに隣接する段落に囲まれたscriptですが、CSSで消して問題ないかな？っと思ったまで
あとChromeでみたとき余白になってた部分なのでmarginかpadding：おそらく前者の余白を0にしても良いと思ったまで。
その次にある段落pは .twitter-tweet + p + p であればhtmlを触らなくって良いかも。試す時間を作った時に試します。
もし気付かれた方がいましたらお願いします。
わいひら reacted
Topic starter
2019-03-23 00:46
かうたっくさん、ありがとうございます。
アドバイスを元に、
@media screen and (min-width: 480px) {
.video-container {
margin-bottom: 1.7em;
}
.video-container + p {
margin-top: 0;
}
twitter-widget {
margin-bottom: 1.4em !important;
}
.twitter-tweet + p,
script[src^="https://platform.twitter.com/widgets.js"] {
display:none;
}
p.hoge {
margin-top: 0;
}
}
このような感じにして納得できました。今後、また少しずつ細かい調整をして適切な幅にしていきたいと思います。
それと、別件ですが、かうたっくさんの
https://bibabosi-rizumu.com/shop-info-table-map/
こちらの解説ページを参考にしてテーブルをつくることができました。この場を借りて、お礼させていただきます。ありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。