【解決】Cocoon吹き出し文字が重なる現象(行間余白)【WordPress】

WordPressロゴ WordPress

WordPressテーマのCocoonには、吹き出しの機能が装備されています。

吹き出し機能をプラグイン無しで使えるのはとても便利ですよね。

私も吹き出し機能を使っていたのですが、ある日不具合に気が付きました。

吹き出しの中のセリフって長文になると決まった文字数で自動的に改行されるんですよね。

通常であれば吹き出しの枠が改行に合わせて大きくなるだけなんですが、私の場合1行目と2行目の余白が無く文字が重なってしまうという現象が発生しました。

吹き出しの行間余白が無い

1行で収まっている吹き出しでは不具合に気が付かないし、 吹き出し機能を使い始めたのはブログ運営初期で手探りで作業を進めていたので、自分がどこで設定をおかしくしたのか、どのタイミングで発生したのかも特定できませんでした。

Cocoonの吹き出し設定を見ても行間余白の設定が見当たらず、Cocoonフォーラムを見てもGoogle検索しても関連情報が見つけられなかったので、仕方なく長文になる吹き出しは使用せずにブログを書くようにしていました。

それから数か月、WordPressのカスタマイズも少し詳しくなって来たこともあり、やっと解決方法にたどり着くことができたので、世間に需要があるかは微妙ですが記事にします。

吹き出しの行間余白調整後

ただし、正規の解決方法かは解りませんのでそこはご了承下さい。

もっと良いやり方があるかもしれませんが、私は今回の方法で解決しました

追加CSSで吹き出し内の行間余白を設定する

HTMLの画面

WordPress管理画面(ダッシュボード)⇒「外観」⇒「テーマエディター」で、「Cocoon Child: スタイルシート (style.css)」内に、下記の追加CSSコードをコピペで追加して下さい。

※既に他のコードがある場合は、その下にコピペして下さい。

/*吹き出し内の行間余白*/
.speech-balloon p {
line-height: 1.60;
}

 

コピペ後の状態

CocoonのCSS追加

 

② 下にある「ファイルを更新」をクリックして下さい。「ファイルの編集に成功しました」と表示されます。

ファイルを更新

 

参考記事⇒【CSS】無料WordPressテーマCocoonにて吹き出し文の行間を変更する方法

 

吹き出し内の行間余白の調整方法

CSSアイコン

★吹き出し内の行間余白を調整する場合は、CSSタグの1.6の数字を変更して下さい。

 

吹き出しの行間余白を調整


これで長い間、モヤモヤしていたのがスッキリしました。

コメント