サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023年10月28日 08:22
SWELLのフォーラムで反応がなさそうなので、こちらに投稿させていただきました🙏
むすび | Association of Nation Building Musubi (kmsb.jp)
フルワイドの中に、カラムで２列並べて画像を入れているのですが、
２つの画像の画面端に余白を入れたいです。（スマホで見た時も、画像の左右に余白が入っている状態にしたい）
追加ＣＳＳをいろいろ入れて試していますが、変更されません。
フルワイドからサイト幅に試してみたりしましたが、極力画面いっぱいに、でも、画像を画面の端っこに
くっつかないようにしたいです。
どういう追加ＣＳＳで変更できるでしょうか？
それと、テーブルの線の色をもう少し濃くしたいのですが、追加CSSを検索して色々試しましたが、色が変更されません。以下のCSSは間違っているのでしょうか？
table th, table td {
border-color: #ccc;
}
This topic was modified 1年前 by aoinyan
2023年10月28日 11:01
Topic starter
2023年10月28日 11:15
ご教示ありがとうございます🙏
ただ、教えていただいたCSSでは、余白が変更されませんでした。
テーブルの線の色も同様、どうもSWELLの場合は、追加CSSのコードがコクーンと違っていることが多い気がします。
一応、カスタマイズしやすいような仕様のテーマではあるようですが。
2023年10月28日 11:30
私が試した感じでは反映されました(添付画像参照)。
現在もCSSを適用していますか？
現在は画像部分にCSSが適用されていなかったので、適用しているつもりであるならCSSの追加方法が間違っているかも知れません。
一度確認して現在は削除しているのであればこの限りではありません。
どうもSWELLの場合は、追加CSSのコードがコクーンと違っていることが多い気がします。
CocoonとSWELLだからというのではなく、他のテーマであってもテーマごとに使用するCSS(セレクタ)は違います。
例えばCocoonでヘッダーのロゴを非表示にしたい時は
.site-logo-image {
display: none;
}
としますが、SWELLでは
.c-headLogo {
display: none;
}
とします。
なので「WordPress カスタマイズ CSS」などで検索してCSSを見つけたとしても、使用しているテーマによって描くべき内容は変わります。
私の認識ではSWELLもカスタマイズしやすいテーマだと思います。
テーマの問題ではなくaoinyanさんのCSSに対する理解不足の問題だと思います。
Topic starter
2023年10月28日 12:00
ご教示ありがとうございます！！🙏ＣＳＳは大初心者なので、大変助かります！
テーマごとで使用するＣＳＳも違うのは、知りませんでした。
今、もう一度教えていただいた追加ＣＳＳを適用してみましたが、やはり余白ができません。
そのまま添付したり、「m」の文字の左横の空白を詰めてみたりしましたが、やはり変更されません。
どこが間違っているのでしょうか？
.wp-block-image {
margin-left: 10px /* 任意の値 */
margin-right: 10px /* 任意の値 */
}
Topic starter
2023年10月28日 17:08
ご教示ありがとうございます！！余白ができました！🙏✨
このＣＳＳは、２つの画像の両方の左右に余白ができる形だと思いますが、
画面端っこの余白幅と、２枚の画像を挟んで中央にある余白幅を同じにするＣＳＳをご存じであれば、
教えていただけないでしょうか？
それか、左の画像の左余白と、右の画像の右余白を指定する形になるのかなと思いました。
何度もすみません、知っていたらで構いません🙏
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。