JINで吹き出し横幅いっぱいしたい人WordPressでテーマはJIN使ってます。
導入文とか、記事中には「吹き出し」使ったら良いって聞いてます。
いざ、「吹き出し」使ってみると、パソコンだと表示が狭すぎるんですけど、広げられますか？
横幅いっぱいにできたら、縦長にならずにレイアウトできるので助かります。
今日は↑↑上記の↑↑お悩みに答えていきます。
あいうえおLIFEこんにちは！あいうえおLIFE（@pledge17uchs）です。
- JINで吹き出しを横幅いっぱいにする
- JINのForumでは、左から吹き出しのみ
- 右から吹き出しの横幅いっぱいCSSを公開
くろーむちなみに、ぼくはブロックエディタなので、「吹き出し」っていうブロックを選択してポチポチって作ってるよ。
くまそうなんだー。
ぼくは、テキストエディタだから、ちょっと面倒なとこもあるんだよね。あちこち打ち込みしたりと。
↑上記のとおりですが、くまさんの使用環境のテキストエディタでは、下記の6項目を編集しないといけません。↓↓
[chat face="画像情報"
name="キャラクター名"
align="配置"
border="枠の色"
bg="背景色"]
吹き出しの内容
[/chat]↑↑上記のリンク（公式マニュアル）に、テキストエディタでの「吹き出し」の使い方を確認できますので、どうぞ。
くろーむ「吹き出し」っていう点だけいうと、ブロックエディタは簡単だよ。
どうぞ最後まで、お読みくださいね。
JINで吹き出しを横幅いっぱいにする
今回のカスタマイズは、【外観】→【カスタマイズ】→【追加CSS】にコード追加してもらうとサクッとできます。作業時間は5分です。
以下は、注意点です。
追加CSSを編集する際は、
上記の通り、3点は必須ですので、カスタマイズは自己責任でご了承ください。
※とまあ、↑上記の脅かすような内容かいてますが、今回はがっつりしたカスタマイズではないので、ご安心を。
とはいえ、上記の3点は遅かれ、早かれ、必須なので、実施しましょう。↑↑
あいうえおLIFE下記で、「左側からの吹き出し」と「右側からの吹き出し」の横幅をいっぱいにするCSSを解説していきますね。
1-1：左側からの吹き出し
@media (min-width: 768px){
.balloon-left .balloon-serif {
margin: 0 0px 40px 125px;
}}上記の通りですが、こちらのJINのForumから拝借したコードを追加CSSに書き込みます。
下記が、ビフォーアフターです。
アフター↓↓
1-2：右側からの吹き出し
次は、右からの吹き出しで横幅いっぱいに表示していきます。
吹き出しの右側からいくか、左側からいくかは、ポイントが１つあります。それは下記です。
上記の通りですが、吹き出しの1つ上の文章が短ければ、右側から吹き出しがおすすめ。
吹き出しの1つ上の文章が長ければ、左側から吹き出しがおすすめです。
@media(min-width: 768px){
.balloon-right .balloon-serif {
margin: 0 100px 30px 0px;
}}上記のコードは、左側から吹き出しのコードを編集して、右側から吹き出し用に調整しました。
もし、ずれてしまう時
margin: 0 100px 30px 0px;を編集します。
右側からの吹き出しアフター↓↓
上記の通り、右側からの吹き出しを横幅いっぱいにできました。
JINで吹き出し使うメリット
ここでは、ひとしきり作業も終わったとこでしょうから、「JINで吹き出し使うメリット」をピックアップしました。下記の2つです。
- 記事にメリハリがつく
- 読者や筆者の心の声を代弁できる
上記の通りですが、JINで「吹き出し」使うのには、プラグインも不要なので是非使いましょう。
下記で、詳しく解説します。
2-1：記事にメリハリがつく
文章がずっと続くと、読者は疲れてしまいます。そこで下記のように、「吹き出し」が入ると、メリハリがつきます。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
ぼうやテキストテキストと文章がひたすら続いていたら、マジで読みにくいし、疲れる。論文かよってなっちゃうわ。
ブログの特性上、読者は文字を1つずつ捉えてはいません。
ほぼ、流し読みで、画像のように捉えて読んでいます。
なので、「吹き出しの画像や話し言葉」を入れて、目を止めさせたり、注目させることが読者満足度を上げるポイント。
2-2：読者や筆者の心の声を代弁できる
文章を読んでいて、スッと入ってくるのは、「話し言葉調」です。
例え話が皆無で、ただただ自分語りをしている文章では飽きます。
興味や関心が湧いてこないですよね。
あいうえおLIFEぼくも読者として、置いてかれてる感を持ってしまいます。
そこで、「吹き出し」があると、コミュニケーションが起きて、会話のように内容が入ってきます。
くろーむ吹き出しあると、「ツッコミ」できるんよね。「いやいや、そうは言うけど、こうじゃん！」とか。
らいおん文章の中に、主張や言いたいことの反論的なこと書いてあっても、他の文章と違いが目につきにくいし、普通にスルーしてしまうわ。
会話みたいに、「心の声」とか書いてあると、図星の時とかめっちゃ心に刺さる。
上記の通りですが、「吹き出し」の有効活用はオススメ。
まとめ | 吹き出しを横幅いっぱいにすると会話文もコンパクト
「吹き出し」はブロックエディタを使うぼくも、正直「めんどくさいなー」っていう時期もありました。
あいうえおLIFEとはいえ、読みやすいブログとか研究してみると、「吹き出し」が要所で使われてるんだよね。
読者ファーストで記事書こうとしたら、やっぱり「吹き出し」は効果的に使うべきって結論になるよ。
本記事を読んだら、JINの人は「横幅いっぱい吹き出し」を使って、たくさんの読者を満足させられる記事を書いて欲しいな。
まずは、追加CSSに下記のまとめからコードを追加してみてください。
コードまとめ
あいうえおLIFE吹き出しブロックをもっと簡単に使えるのは、有料テーマ「SWELL」。
下記に記事リンク置いておきます。