WordPressテーマをJINからSWELLに変更SWELL公式サイト

JINで吹き出しを横幅いっぱいにカスタマイズするには?【CSS】

こんにちは!あいうえおLIFE(@pledge17uchs)です。

JINで吹き出し横幅いっぱいしたい人

WordPressでテーマはJIN使ってます。

導入文とか、記事中には「吹き出し」使ったら良いって聞いてます。

いざ、「吹き出し」使ってみると、パソコンだと表示が狭すぎるんですけど、広げられますか?

横幅いっぱいにできたら、縦長にならずにレイアウトできるので助かります。

今日は↑↑上記の↑↑お悩みに答えていきます。

本記事の内容
  • JINで吹き出しを横幅いっぱいにする
  • JINのForumでは、左から吹き出しのみ
  • 右から吹き出しの横幅いっぱいCSSを公開
くろーむ

ちなみに、ぼくはブロックエディタなので、「吹き出し」っていうブロックを選択してポチポチって作ってるよ。

くま

そうなんだー。

ぼくは、テキストエディタだから、ちょっと面倒なとこもあるんだよね。あちこち打ち込みしたりと。

↑上記のとおりですが、くまさんの使用環境のテキストエディタでは、下記の6項目を編集しないといけません。↓↓

[chat face="画像情報"
name="キャラクター名"
align="配置"
border="枠の色"
bg="背景色"]
吹き出しの内容
[/chat]

↑↑上記のリンク(公式マニュアル)に、テキストエディタでの「吹き出し」の使い方を確認できますので、どうぞ。

くろーむ

「吹き出し」っていう点だけいうと、ブロックエディタは簡単だよ。

もくじ

JINで吹き出しを横幅いっぱいにする

大見出し1

今回のカスタマイズは、【外観】→【カスタマイズ】→【追加CSS】にコード追加してもらうとサクッとできます。作業時間は5分です。

以下は、注意点です。

注意

追加CSSを編集する際は、

  1. JINの子テーマ導入(Jin-child)
  2. バックアップの取得(BackWPup)
  3. ミスした時のリカバリー体制(File Zilla)

上記の通り、3点は必須ですので、カスタマイズは自己責任でご了承ください。

※とまあ、↑上記の脅かすような内容かいてますが、今回はがっつりしたカスタマイズではないので、ご安心を。

とはいえ、上記の3点は遅かれ、早かれ、必須なので、実施しましょう。↑↑

あいうえおLIFE

下記で、「左側からの吹き出し」と「右側からの吹き出し」の横幅をいっぱいにするCSSを解説していきますね。

1-1:左側からの吹き出し

大見出し1
@media (min-width: 768px){
.balloon-left .balloon-serif {
margin: 0 0px 40px 125px;
}}

上記の通りですが、こちらのJINのForumから拝借したコードを追加CSSに書き込みます。

下記が、ビフォーアフターです。

左ビフォー

アフター↓↓

左アフター

上記の通りで、左からの吹き出しが「見出し」の端まで吹き出し内容が表示されるようになりました。

1-2:右側からの吹き出し

次は、右からの吹き出しで横幅いっぱいに表示していきます。

吹き出しの右側からいくか、左側からいくかは、ポイントが1つあります。それは下記です。

読者の目線の流れを意識して、Zスタイルで配置する。

上記の通りですが、吹き出しの1つ上の文章が短ければ、右側から吹き出しがおすすめ。

吹き出しの1つ上の文章が長ければ、左側から吹き出しがおすすめです。

@media(min-width: 768px){
.balloon-right .balloon-serif {
margin: 0 100px 30px 0px;
}}

上記のコードは、左側から吹き出しのコードを編集して、右側から吹き出し用に調整しました。

もし、ずれてしまう時

margin: 0 100px 30px 0px;を編集します。

右側からの吹き出しアフター↓↓

右からアフター

上記の通り、右側からの吹き出しを横幅いっぱいにできました。

あいうえおLIFE

吹き出しブロックをもっと簡単に使えるのは、有料テーマ「SWELL」。

下記に記事リンク置いておきます。

JINで吹き出し使うメリット

大見出し2

ここでは、ひとしきり作業も終わったとこでしょうから、「JINで吹き出し使うメリット」をピックアップしました。下記の2つです。

吹き出しのメリット2つ
  1. 記事にメリハリがつく
  2. 読者や筆者の心の声を代弁できる

上記の通りですが、JINで「吹き出し」使うのには、プラグインも不要なので是非使いましょう。

下記で、詳しく解説します。

2-1:記事にメリハリがつく

文章がずっと続くと、読者は疲れてしまいます。そこで下記のように、「吹き出し」が入ると、メリハリがつきます。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

ぼうや

テキストテキストと文章がひたすら続いていたら、マジで読みにくいし、疲れる。論文かよってなっちゃうわ。

目が止まること、注目させることが大事

ブログの特性上、読者は文字を1つずつ捉えてはいません。

ほぼ、流し読みで、画像のように捉えて読んでいます

なので、「吹き出しの画像や話し言葉」を入れて、目を止めさせたり、注目させることが読者満足度を上げるポイント。

2-2:読者や筆者の心の声を代弁できる

文章を読んでいて、スッと入ってくるのは、「話し言葉調」です。

例え話が皆無で、ただただ自分語りをしている文章では飽きます。

興味や関心が湧いてこないですよね。

あいうえおLIFE

ぼくも読者として、置いてかれてる感を持ってしまいます。

そこで、「吹き出し」があると、コミュニケーションが起きて、会話のように内容が入ってきます。

くろーむ

吹き出しあると、「ツッコミ」できるんよね。「いやいや、そうは言うけど、こうじゃん!」とか。

らいおん

文章の中に、主張や言いたいことの反論的なこと書いてあっても、他の文章と違いが目につきにくいし、普通にスルーしてしまうわ。

会話みたいに、「心の声」とか書いてあると、図星の時とかめっちゃ心に刺さる。

上記の通りですが、「吹き出し」の有効活用はオススメ。

まとめ | 吹き出しを横幅いっぱいにすると会話文もコンパクト

まとめ
吹き出しをなんとなく使う人
  • 吹き出し使うのもめんどかった
  • 文章がダラダラして読む気うせてた
  • JINの吹き出しの横幅狭い気がする

あんまり意識したことはなかった

「吹き出し」はブロックエディタを使うぼくも、正直「めんどくさいなー」っていう時期もありました。

あいうえおLIFE

とはいえ、読みやすいブログとか研究してみると、「吹き出し」が要所で使われてるんだよね。

読者ファーストで記事書こうとしたら、やっぱり「吹き出し」は効果的に使うべきって結論になるよ。

本記事を読んだら、JINの人は「横幅いっぱい吹き出し」を使って、たくさんの読者を満足させられる記事を書いて欲しいな。

まずは、追加CSSに下記のまとめからコードを追加してみてください。

コードまとめ

それでは、今日はここまで読んでいただきありがとうございます!

もくじ
閉じる