サイドバーのウィジェットの余白 | Cocoonテーマに関する質問 | Cocoon フォーラム

2018.02.10

書き込みの前に以下の3点をご確認ください。

1つのトピックにつき1つの質問を書き込んでください
不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください
該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

また、有用な返信があった場合は「いいね！」リンクもご活用ください。返信者の励みになります。

「いいね！」機能はフォーラム登録者のみが利用できる機能です。

（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

直近のフォーラムへの書き込み100件

詳細なカスタマイズ依頼をするならこちら。

Cocoonカスタマイズ依頼

フォーラムのTwitterアカウント（@CocoonForum）はこちら。

Notifications

Clear all

[解決済] サイドバーのウィジェットの余白

最終の投稿

RSS

JNL2019

(@JNL2019)

ゲスト

参加: 8か月前

投稿: 2

2019年12月1日 11:24

コクーンを利用させていただき感謝しております。

初歩的な質問になると思いますがさせていただきたく書き込みしました

内容ですがサイドバーのウィジェットの項目の余白の設定をどのようにしたら
よろしいかということです。

イメージとしてはこのコクーンのページのサイドバーのようにできればと思っています。
アドバイスを頂けると幸いです。よろしくお願いいたします。

----------------------------------------------
サイト名：『旅行力』向上委員会
サイトURL： https://firstclassjourney.net
ホームURL： https://firstclassjourney.net
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/skin-ganchan12/style.css
WordPressバージョン：5.3
PHPバージョン：7.2.17
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.0.1
カテゴリ数：8
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.0.6
----------------------------------------------

未解決

わいひら

(@yhira)

メンバーサイト Admin

参加: 3年前

投稿: 10385

2019年12月1日 19:54

単に「サイドバーのウィジェットの余白」と言っても余白にはいろいろあります。

どの部分の余白のことか、どの部分をどのようにしたいかをできるだけ詳細に書いていただければと思います。
加えて、スクリーンショットツールなどで該当部分を撮影して注釈等あれば助かります。

かうたっく

(@kautakku)

メンバーサイト Moderator

参加: 2年前

投稿: 4765

2019年12月1日 19:55

.sidebar .widget h3 {
	margin: 0 30px;
}

これはだれが書いたstyleでしょうか？？

Cocoon設定・高速化のCSSの圧縮を停止していただけたらコチラで確認できました。

書き込みの前に以下の3点をご確認ください。
1つのトピックにつき1つの質問を書き込んでください
不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください
該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください

この部分です。

イロイロすっ飛ばして、今あるstyleからさらに上書きしてCSSを追記すればいい。事であれば、以下styleを適応してご確認ください。

.sidebar .widget h3 {
	margin: 20px 30px;
}

margin: 20px 30px;

赤色にした部分を2em　にすれば現状のCocoonサイトの該当部分の余白になるかと思います。

ただ優先順位があるので書いて反映されなければ、子テーマCSSの一番下にでも追記すれば優先順位的に問題ないのでご確認後、結果を教えてください。

現状

どっかのstyleをご自身で変更した可能性がある。かも知れない前提のstyle。

https://gyazo.com/6b825a0c4567523120090e9a8584b84c

styleの上書きが成功した場合の装飾：上記CSSの結果

https://gyazo.com/f636d51f9003f429236239fec3b4c93e

わいひら件のいいね！

JNL2019

(@JNL2019)

ゲスト

参加: 8か月前

投稿: 2

2019年12月2日 06:16

ご回答ありがとうございました。高速化の無効の設定がわからず書き込みしましたが対応をしていただきましたお二方には感謝申し上げます。また分からないところがありましたら教えていただけますと幸いです。よろしくお願いいたします。