サイト内検索
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月19日 03:02
利用させていただいています。
1つわからない点があって、
カスタムHTMLで以下の写真の『-Pick Up-』『ピックアップ』を書いています。
『-Pick Up-』の上と、『ピックアップ』の下の間隔を狭くするにはどこのmargin及びpaddingを減らせば良いでしょうか。
/*インデックストップのウィジェットの、カスタムHTMLのコードです*/
<p class="pickup">ー Pick up ー</p>
<p class="pickup2">ピックアップ</p>
2019年1月19日 08:14
実際のカスタマイズを見てない（HTMLとCSSを見てない）ので様子がまったくわかりません。
不具合・カスタマイズ対象ページのURLを提示してください
以下を試して無理でしたら、上記のとおり該当ページのURLをください。
/*インデックストップのウィジェットの、カスタムHTMLのコードです*/
<p class="pickup">ー Pick up ー<br>ピックアップ</p>
わいひら reacted
Topic starter
2019年1月19日 15:27
2019年1月19日 19:52
.pickup {
margin-bottom: 0px;
}
.pickup2 {
margin-top: 0px;
}
上記コードを以下へ
.pickup, .pickup2 {
margin: 0px;
}
ピック2は変更しても意味無さそうでしたが…
ピックアップ下はウィジェット部分を変更でいけそうです
ただ、ウィジェット部分全体に変更が掛かりますが…
.widget {
margin-bottom: 38px;
}
以下へ変更
.widget {
margin: 0px;
}
トップページかな？の部分がかなり間隔が狭くなるので
それが嫌な場合はmargin-bottomのまま数値を変更してくださいね
わいひら reacted
2019年1月19日 20:07
私であればHTMLを以下のようにして
CSSは以下。
.pickup {
text-align: center;
margin-bottom: 0px;
padding-bottom: 0px;
font-size: 30px;
font-weight: bold;
position: relative;
}
.pickup2 {
font-size: 13px;
position: absolute;
bottom: -13px;
left: 0;
right: 0;
}
そのカスタムウィジェットだけに適応させるなら
#custom_html-4 .pickup {
text-align: center;
margin-bottom: 0px;
padding-bottom: 0px;
font-size: 30px;
font-weight: bold;
position: relative;
}
#custom_html-4 .pickup2 {
font-size: 13px;
position: absolute;
bottom: -13px;
left: 0;
right: 0;
}
-13pxで以下のような感じ。
https://gyazo.com/549ad50ea7a3a59c623d34669d1902cc
bottom: -10px;
に変更したら以下。みたいにすると思います。
わいひら reacted
2019年1月19日 20:11
『-Pick Up-』の上と、『ピックアップ』の下の間隔を狭くする
-Pick Up-・ピックアップ。逆だとおもってました。間違った解釈でした。
haineonsさんのコードのままで
ただ、ウィジェット部分全体に変更が掛かりますが…
.widget {
margin-bottom: 38px;
}以下へ変更
.widget {
margin: 0px;
}トップページかな？の部分がかなり間隔が狭くなるので
該当ウィジェットのみの場合は.widgetを #custom_html-4 と指定してもいいかもしれません。
https://gyazo.com/03ec489396cfba61b47078d850f5ef5b
#custom_html-4 {
margin-bottom: 10px;
}
This post was modified 6年前 by かうたっく
2019年1月19日 22:12
line-height での変更が手っ取り早いかも。
.pickup {
line-height: 1;
}
必要であれば、margin-top を追加。
.pickup {
line-height: 1;
margin-top: 8px;
}
わいひら reacted
2019年1月20日 00:24
.pickup{
text-align:center;
padding-bottom:0px;
font-size:30px;
font-weight:bold;
}
.pickup2{
text-align:center;
padding-top:0px;
font-size:13px;
}
.pickup,.pickup2{
margin:0px;
}
.widget {
margin-bottom: 10px;
}
2019年1月20日 00:32
『
Akiraさんを含めまして。業務連絡です
』
変更を試されていた中かも知れない状況で。Akiraさんの言う
line-height
ある意味そうだ！！って個人的に思い、確認したところ上記の感じで適応されてるようです。※ホントは上記コードを書き込み、間違って送信しちゃいましたが ?
おそらく満足されたようなので？？？良かったのかもしれません？
独自CSSの中の書き込み&チェック。お疲れさまでした ? ? ?
『
Akiraさんを含めまして。業務連絡、おわり❦
』
This post was modified 6年前 by かうたっく
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。