サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2021年3月4日 11:48
はじめて投稿します。
cocoon(ver.2.2.7.4)を使って、はじめてサイト制作しています。未公開です。
サイドバーにナビゲーションメニューを表示させていますが、長いメニュー項目(ページタイトル)が2行になったとき、行が重なってしまいます。添付画像の赤矢印部分をごらんください。
重ならない状態で2行で表示させたいです。その場合、行間は通常の改行より狭くしたいです。
無理があれば、この行のみフォントサイズを小さくする対応でも構いません。
初心者のため、カスタマイズは追加CSSでおこなっています。(一部、親メニューを書き換えていますが、バックアップをとっています)
環境情報は下記のとおりです。
----------------------------------------------
サイト名:Fujimoto Nahoko - artworks and texts
サイトURL: https://nafokof.net
ホームURL: https://nafokof.net
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
WordPressバージョン:5.6.2
PHPバージョン:7.4.14
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:86.0) Gecko/20100101 Firefox/86.0
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.7,en;q=0.3
----------------------------------------------
解決方法を教えていただけますと助かります。よろしくお願いいたします。
2021年3月4日 12:01
前略、nafokof さん
同じ段落内の行間は、CSSの
line-height
プロパティで調節することができます。
セレクタ名 {
line-height: 1.4;
}
このような感じです。
値の数値に単位は つけない方が良いようです。
わいひら reacted
2021年3月4日 12:05
nafokof さん
CSSのセレクタ名は、実際のページを拝見しないと、正確なセレクタ名がわかりません。
あと、サイトのカスタマイズは、必ず子テーマで行ってください。
親テーマでカスタマイズすると、アップデートした際に、カスタマイズ部分がリセットされてしまう可能性が大きいです。
親テーマ、子テーマの概要については、以下のトピックが参考になるかと思います。
2021年3月4日 12:18
nafokof さん
CSS等のコードの編集には、テキストエディットは使用せず、CotEditor 等の文字コードをUTF-8(BOMなし)でプレーンテキストを扱うことができる適切なテキストエディターをご使用になることをオススメします。
2021年3月4日 12:31
nafokof さん
サイトを公開状態にしていただくと、より具体的なアドバイスがいただけるかもしれません。
その際は、Cocoonの高速化設定はOFFにして、キャッシュ系のプラグイン等をお使いの場合は、停止しておいていただくと良いと思います。
ちょっと、外出してしまうので、わかる方が回答くださるかもしれません。
わいひら reacted
トピックスターター 2021年3月4日 13:26
リフィトリーさま
早速ご返信くださり、ありがとうございます!
セレクタですが、テーマエディターからCSSをみてみたところ、.sidebar のようでした。
が、申し訳ありません! リフィトリーさまの返信からヒントをいただいて、追加CSSを再度確認したところ、以前、サイドバーの行の高さを調整したくて、追加CSSに
.sub-menu {
line-height: 0.15;
font-size: 0.7rem;
}
と書き込んでいたためのようでした。
このへんの調整をいろいろ試してみます。
のちほどご報告させていただくか、もしわからない点があれば、再度質問をさせてください。
ひとまずは、ありがとうございました!
トピックスターター 2021年3月4日 15:54
リフィトリーさま
先ほどはありがとうございました。
.sub-menu の行の高さを元に戻すと、意図よりもだいぶ行間があいてしまうので
追加CSSで
.sub-menu {
line-height: 0.15;
}
…など希望の高さに設定し、2行になってしまう部分は個別にID指定して
#menu-item-791{
line-height: 1.2;
}
…など、重ならないように指定する形にしました。
あまりきれいなやり方でないと思いますが、ちょっと時間がないので、とりあえずこうしておき、のちほど勉強して整えたいと思います。
子テーマについてもご教示ありがとうございます。たいへん参考になります。
のちほど子テーマをつくって、カスタマイズの記述を移したいと思います。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。