Cocoonフォーラム

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

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

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

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

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

サイドバーで2行になった文字列が重なっ...
 
共有:
通知
すべてクリア

[解決済] サイドバーで2行になった文字列が重なって表示されてしまう

7 投稿
2 ユーザー
4 Reactions
1,878 表示
(@nafokof)
New Member Registered
結合: 4年前
投稿: 3
トピックスターター  

はじめて投稿します。
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
----------------------------------------------

解決方法を教えていただけますと助かります。よろしくお願いいたします。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

前略、nafokof さん

同じ段落内の行間は、CSSの

line-height

プロパティで調節することができます。

セレクタ名 {
line-height: 1.4;
}

このような感じです。

値の数値に単位は つけない方が良いようです。


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

nafokof さん

CSSのセレクタ名は、実際のページを拝見しないと、正確なセレクタ名がわかりません。

 

あと、サイトのカスタマイズは、必ず子テーマで行ってください。

 

親テーマでカスタマイズすると、アップデートした際に、カスタマイズ部分がリセットされてしまう可能性が大きいです。

 

親テーマ、子テーマの概要については、以下のトピックが参考になるかと思います。

 

[解決済] 親テーマと子テーマについてです。

 

Cocoonテーマをインストールする方法


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

nafokof さん

CSS等のコードの編集には、テキストエディットは使用せず、CotEditor 等の文字コードをUTF-8(BOMなし)でプレーンテキストを扱うことができる適切なテキストエディターをご使用になることをオススメします。

 

 

文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

nafokof さん

サイトを公開状態にしていただくと、より具体的なアドバイスがいただけるかもしれません。

 

その際は、Cocoonの高速化設定はOFFにして、キャッシュ系のプラグイン等をお使いの場合は、停止しておいていただくと良いと思います。

 

ちょっと、外出してしまうので、わかる方が回答くださるかもしれません。

 


   
わいひら reacted
(@nafokof)
New Member Registered
結合: 4年前
投稿: 3
トピックスターター  

リフィトリーさま

早速ご返信くださり、ありがとうございます!

セレクタですが、テーマエディターからCSSをみてみたところ、.sidebar のようでした。

が、申し訳ありません! リフィトリーさまの返信からヒントをいただいて、追加CSSを再度確認したところ、以前、サイドバーの行の高さを調整したくて、追加CSSに

.sub-menu {
line-height: 0.15;
font-size: 0.7rem;
}

と書き込んでいたためのようでした。
このへんの調整をいろいろ試してみます。
のちほどご報告させていただくか、もしわからない点があれば、再度質問をさせてください。

ひとまずは、ありがとうございました!


   
(@nafokof)
New Member Registered
結合: 4年前
投稿: 3
トピックスターター  

リフィトリーさま

先ほどはありがとうございました。

.sub-menu の行の高さを元に戻すと、意図よりもだいぶ行間があいてしまうので
追加CSSで

.sub-menu {
line-height: 0.15;
}

…など希望の高さに設定し、2行になってしまう部分は個別にID指定して

#menu-item-791{
line-height: 1.2;
}

…など、重ならないように指定する形にしました。
あまりきれいなやり方でないと思いますが、ちょっと時間がないので、とりあえずこうしておき、のちほど勉強して整えたいと思います。

子テーマについてもご教示ありがとうございます。たいへん参考になります。
のちほど子テーマをつくって、カスタマイズの記述を移したいと思います。


   
共有:

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

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

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

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

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

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

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

タイトルとURLをコピーしました