こんにちは！あいうえおLIFE（@pledge17uchs）です。
JINで吹き出し横幅いっぱいしたい人
- WordPressでテーマはJIN使ってます
- 導入とか、記事中には「吹き出し」使ったら良いって聞いてます。
- いざ、「吹き出し」使ってみると、パソコンだと表示が狭すぎるんですけど、広げられますか？
- 横幅いっぱいにできたら、縦長にならずにレイアウトできるので助かります。
今日は↑↑上記の↑↑お悩みに答えていきます。
- JINで吹き出しを横幅いっぱいにする
- JINのForumでは、左から吹き出しのみ
- 右から吹き出しの横幅いっぱいCSSを公開
あいうえおLIFEの «NOTEや «YouTubeもありますので是非そちらも見てくださると励みになります。
本記事の信頼性
- この記事を書くぼくは、日頃から地域密着の医薬品登録販売者として働き、700軒のエンドユーザーの方々の意見や生活、価値観と触れ合っています。
- WordPressでテーマはJINを使って８ヶ月になり（2020/12現在）、ひとしきりカスタマイズ関係は網羅してきました。
↑↑上記の気になるところ↑↑から、見てみてくださいね。
ちなみに、ぼくはブロックエディタなので、「吹き出し」っていうブロックを選択してポチポチって作ってるよ。
そうなんだー。ぼくは、テキストエディタだから、ちょっと面倒なとこもあるんだよね。あちこち打ち込みしたりと。
↑上記のとおりですが、くまさんの使用環境のテキストエディタでは、下記の6項目を編集しないといけません。↓↓
[chat face="画像情報"
name="キャラクター名"
align="配置"
border="枠の色"
bg="背景色"]
吹き出しの内容
[/chat]»https://jin-theme.com/manual/atlas-editor03/
↑↑上記のリンク（公式マニュアル）に、テキストエディタでの「吹き出し」の使い方を確認できますので、どうぞ。
「吹き出し」っていう点だけいうと、ブロックエディタは簡単だよ。
JINで吹き出しを横幅いっぱいにする
今回のカスタマイズは、【外観】→【カスタマイズ】→【追加CSS】にコード追加してもらうとサクッとできます。作業時間は5分です。
以下は、注意点です。
追加CSSを編集する際は、
上記の通り、3点は必須ですので、カスタマイズは自己責任でご了承ください。
※とまあ、↑上記の脅かすような内容かいてますが、今回はがっつりしたカスタマイズではないので、ご安心を。
とはいえ、上記の3点は遅かれ、早かれ、必須なので、導入しましょう。↑↑
下記で、「左側からの吹き出し」と「右側からの吹き出し」の横幅をいっぱいにするCSSを解説していきますね。
1-1：左側からの吹き出し
@media (min-width: 768px){
.balloon-left .balloon-serif {
margin: 0 0px 40px 125px;
}
}
上記の通りですが、こちらのJINのForumから拝借したコードを追加CSSに書き込みます。
下記が、ビフォーアフターです。
アフター↓↓
上記の通りで、左からの吹き出しが「見出し」の端まで吹き出し内容が表示されるようになりました。
1-2：右側からの吹き出し
次は、右からの吹き出しで横幅いっぱいに表示していきます。吹き出しの右側からいくか、左側からいくかは、ポイントが１つあります。それは下記です。
- 読者の目線の流れを意識して、Zスタイルで配置する。
上記の通りですが、吹き出しの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：読者や筆者の心の声を代弁できる
文章を読んでいて、スッと入ってくるのは、「話し言葉調」です。
例え話が皆無で、ただただ自分語りをしている文章では飽きます。
興味や関心が湧いてこないですよね。
ぼくも読者として、置いてかれてる感を持ってしまいます。
そこで、「吹き出し」があると、コミュニケーションが起きて、会話のように内容が入ってきます。
吹き出しあると、「ツッコミ」できるんよね。「いやいや、そうは言うけど、こうじゃん！」とか。
文章の中に、主張や言いたいことの反論的なこと書いてあっても、他の文章と違いが目につきにくいし、普通にスルーしてしまうわ。会話みたいに、「心の声」とか書いてあると、図星の時とかめっちゃ心に刺さる。
上記の通りですが、「吹き出し」の有効活用はオススメです。
まとめ | 吹き出しを横幅いっぱいにすると会話文もコンパクト
「吹き出し」はブロックエディタを使うぼくも、正直「めんどくさいなー」っていう時期もありました。
とはいえ、読みやすいブログとか研究してみると、「吹き出し」が要所で使われてるんだよね。
読者ファーストで記事書こうとしたら、やっぱり「吹き出し」は効果的に使うべきって結論になるよ。本記事を読んだら、JINの人は「横幅いっぱい吹き出し」を使って、たくさんの読者を満足させられる記事を書いて欲しいな。
まずは、追加CSSに下記のまとめからコードを追加してみてください。
Website vector created by stories – www.freepik.com
Computer vector created by stories – www.freepik.com
Technology vector created by freepik – www.freepik.com
