やらないと損❕Amazon初回限定 5000円チャージで必ず1000pもらえる♪
Windows10ガイドブック【top3】Amazonなりすまし詐欺メールの見分け方

吹き出し文字の行間余白を調整する|WordPress・Cocoon

Cocoon_吹き出し文字の行間余白の調整WordPress
この記事は約3分で読めます。

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

初心者
 

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

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

 

よしてっく
よしてっく

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

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

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

なかなか不具合に気付かなかったのは、1行で収まっている吹き出しでは問題ないから。

 

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

よしてっく
よしてっく

Cocoonの吹き出し設定を見ても行間余白の設定が見当たらない…

Cocoonフォーラムを見てもGoogle検索しても情報が見つけられなかったので、仕方なく長文になる吹き出しのセリフは書かないようにしてました。

 

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

 

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

 

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

もっと良いやり方があるかもしれませんが、私は今回の方法でとりあえず対策できましたので方法をご紹介します。

 

※追加CSSを初めて使う人注意点を再確認したい場合は下記記事を参照下さい。
関連記事 【初心者向け】CocoonでCSSを追加する手順と注意点|WordPressカスタマイズ

 

スポンサーリンク

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

HTMLの画面

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

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

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

 

コピペ後の状態

CocoonのCSS追加

 

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

ファイルを更新

 

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

 

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

CSSアイコン

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

 

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

 

以上です。実際の吹き出しで確認下してみてさい。

 

よしてっく
よしてっく

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

コメント

  1. アバターすずき より:

    需要ありまくりです!助かりました~!ありがとうございました!!

    • よしてっくよしてっく より:

      すずきさん、初めまして。
      コメントありがとうございます。
      需要あって良かったですw
      お役に立てたなら記事にした甲斐がありました。
      (^^)