サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2022年3月27日 17:22
お世話になります。
Amazon商品リンクの下にYouTubeを埋め込んでいますが、間隔を狭くしたいのですが、CSSの設定が分かりません。
例えば下記ページです。
https://eterna825.com/audiophile-vocal10
Amazonの方は.product-item-boxでMargin設定
Youtubeの方は.body .video-containerで設定していますが、うまく反映できません。設定する要素が間違っているのだと思いますが、該当する場所が分からず質問させていただきます。
2022年3月27日 17:38
periさん
ソースの圧縮が掛かっているので、ちゃんとは確認していませんが・・・。
間に改行タグ（brタグ）が入っているように思います。
それを消してしまえば、「.product-item-box」の下のmarginで調整できそうに思うのですが。
いかがでしょうか。
【追記】
「.product-item-box」は、他のCSSが優先度で勝っている気がします。（WordPressの標準のもの？）
そのため、効かないかもしれないです。
圧縮が掛かっているため、何かは分からないです。
セレクタをもう少し詳細に書いて、優先度を上げた方が良さそうに思います。
いずれによせ、改行タグはなくても良い気はします。
わいひら reacted
2022年3月27日 19:51
確かにBRタグが入ってるせいで、そのぶん余白が大きくなっているようです。
とりあえずはまずタグを消すことからかと。
2022年3月27日 19:54
後は個別に.amazon-item-boxのマージン下をCSSで調整するしかないかもしれません。
トピックスターター 2022年3月27日 19:57
アドバイスありがとうございます。
とりあえずCSSの圧縮は解除しました。
Amazonリンクのショートコードのあと、youtubeリンクは例えば
https://www.youtube.com/watch?v=M6PdsVoEw4Q
こんな感じで貼っています。改行が無いとリンクが無効になってしまうので、youtubeリンクを<iframeの形式でやるしかないでしょうか？
トピックスターター 2022年3月27日 20:13
@yhira さま
.amazon-item-boxで下のマージンを小さめにして、youtubeの.body .video-containerの上のマージンを-2emにすることで見栄えは調整できました。本来なら改行を消すべきなのでしょうが、これで不具合出ないか色々チェックしてみます。
ありがとうございました。
2022年3月28日 19:54
Amazonリンクのショートコードのあと、youtubeリンクは例えば
https://www.youtube.com/watch?v=M6PdsVoEw4Q
こんな感じで貼っています。改行が無いとリンクが無効になってしまうので、youtubeリンクを<iframeの形式でやるしかないでしょうか？
これに関しては、実際のエディターページのスクショも貼っていただかないと、詳しいことはわからないかもしれません。
トピックスターター 2022年3月28日 21:54
@yhira さま
クラシックエディターを使っています。
通常は下記のように記載しています。
[amazon asin="B00V1Y9CAI" size="s" desc="直販サイトの方が安く買えると思います"]
https://www.youtube.com/watch?v=M6PdsVoEw4Q
これでもHtml上は<br>が入ってしまうようです。
ここで
[amazon asin="B00V1Y9CAI" size="s" desc="直販サイトの方が安く買えると思います"] https://www.youtube.com/watch?v=M6PdsVoEw4Q
のように一行で書くと、youtubeリンクが反映されません。
トピックスターター 2022年3月28日 21:55
追伸です。画像リンクが1枚しか貼れませんでした。改行なしで書くとこんな感じです。
トピックスターター 2022年3月28日 21:56
たびたびすみません。Amazonリンクも記載したのですが、消えてしまっていました。コードの画像の方でみてもらえますでしょうか。
2022年3月28日 22:16
periさん
YouTubeの埋め込みについては、以下のマニュアルページの通りです。
YouTube動画読み込みを高速化させる方法
https://wp-cocoon.com/youtube-speedup/
上記には「1行につき1つのURLを入力するようにしてください。」とあります。
イメージとしては、pタグの中にYouTubeのURLのみを置くようにした方が良さそうに思います。
（実際にpタグはなくてもいいみたいです、Enterで改行して・・・という意味です）
わいひら reacted
2022年3月28日 22:31
ローカル環境で試しました。
Amazonのものは貼れないので、代わりにとりあえずブログカードを貼りました。
クラシックエディタで、「Shift+Enter」で改行した場合。
間にbrタグが入って間隔が広くなります。
クラシックエディタで、「Enter」のみで改行した場合。
これで、ブログカードの下のmarginと、YouTubeの「video-container」の上のmarginだけで間隔が調整できる感じでした。
（marginの相殺ありますけど。）
（marginの相殺ありますけど。）
【追記】
ブログカードだと、他のmargin-bottmなどもあってややこしそうでした。
「YouTubeの「video-container」との間にpタグが空でも入ってました。重なっていますけど。
「YouTubeの「video-container」との間にpタグが空でも入ってました。重なっていますけど。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。