【Luxeritas】吹き出しの定型文の作り方。余白を調節して見やすくしよう!

当ページのリンクには広告が含まれています。
吹き出し定型文の作り方
女性
吹き出しを毎回最初から作るのが大変だわ・・・。
ネコ
定型文登録しておけば簡単で時短になるよ!
目次

吹き出しの定型文とは

吹き出しの定型文登録とは、上記のように吹き出しのパターンの登録しておくことです。いつでも簡単に吹き出しと画像のセットを表示させ、吹き出し内の言葉を編集することができます。

写真や文章では表せない、表情や対話を表現することが出来ます。吹き出し定型文を上手に使いこなせるようになることで、あなたのブログは見やすくレベルアップしますし吹き出しを作成する作業時間を短縮できますよ。

吹き出し定型文の作成方法

それでは実際に吹き出しの定型文を作成してみましょう。

私は可愛いイラストや実用的な写真が無料でダウンロードできる 無料イラストなら【イラストAC】 を利用しています。

①画像の用意をする

ダッシュボードメニュー【メディア】の【新規追加】をクリックする。

ワードプレスのメディアに画像をダウンロードする。

②吹き出し定型文の設定をする

ダッシュボードメニュー【ルクセリタス】→【パターン登録】の【HTML定型文】タグを開き、サンプル登録をクリックする。

吹き出し(右)と吹き出し(左)にチェックを入れる。

吹き出し用のCSSを読み込むにチェックを入れる。

文字色、背景色、枠線の色をカスタマイズできます。

【変更を保存】を忘れずにクリックしておきましょう。

吹き出し定型文の登録方法

【ルクセリタス】→【パターン登録】→【HTML定型文】→【新規追加】をクリックします。

①ラベル・・・吹き出しを識別できるように分かりやすい名前を付けておく。

②HTML定型文・・・

rightかleftかを入力することで、右側からの吹き出しか左側からの吹き出しかを区分します。後は上記の青枠の通り、画像が保存されている場所のURL、画像の縦幅、横幅の数字、吹き出し画像の下に表示する言葉を入力します。

③囲み型・・・チェックを入れると枠がもう一つ出てくるので、そこに下記を入力する。吹き出しの右も左も共通している。

</div></div>

④【保存】をクリックする。

③吹き出しの定型文を使用するには

記事内で定型文挿入エディターを選択する。

定型文をクリックして、先ほど登録した吹き出しを選ぶ。

吹き出しにしゃべらせたい言葉を青枠の個所に入力します。

保存してプレビューで表示してみてください。下記のようになります。

吹き出しに空白の余りがあって美しくないです。次項で吹き出しの見た目を良くしたいと思います。

④吹き出し内の余白の設定

子テーマのスタイルシートに設定を書き込む必要があります。

吹き出し内の余分な空白が無くなりました。これで完成です。

まとめ

アクティブマネーまとめ&ポイント

吹き出しを上手に使うことで感情を表現したり、長文を読みやすくすることができます。

お気に入りの吹き出し定型文を作成すると、つい吹き出しを多用しがちになりますがデメリットもあります。

吹き出しを多用することで逆に文章が読みにくくなり、読者にくどい印象を持たれます。あと文の長さに気を付けないと、携帯で表示した時に1ページのほとんどが吹き出しなんてことになります。

記事が出来たらパソコンと携帯の両方で実際に表示して確認をするようにしましょう。

無料イラスト【イラストAC】
よかったらシェアしてね!
  • URLをコピーしました!
目次