【LION MEDIA】 カスタマイズ応用編(LINE風吹き出し設定)、見栄えも分かりやすさも向上!

【LION MEDIA】 カスタマイズ応用編(LINE風吹き出し設定)、見栄えも分かりやすさも向上!

【LION MEDIA】 カスタマイズ応用編(LINE風吹き出し設定)、見栄えも分かりやすさも向上!

記事を投稿していくと、説明をする上で吹き出しを使用したいくなる場面があります。更に、会話を吹き出しにしたくなるときもあり、LINE風の吹き出しが出来れば!?と思うときがありますよね。そんな方にオススメです。

LINE MEDIAでも簡単に単純な吹き出しからLINE風の吹き出しまで作成することが可能です。LINE MEDIAの標準のCSS設定には、吹き出しは組み込まれておりませんので、CSS定義を追加することで対応します。

 

単純な吹き出し

単純な吹き出し設定ですが、LION MEDIAの標準のCSSには組み込みされておりませんので、CSSにデザインを追加する必要があります。CSSに追加する定義と、実際に画面(HTML)側で定義する内容を以下に記載しますので、コピーして活用してください。

以下の吹き出しを例として内容を記載します。

僕もお母さんに何かプレゼントするワン!お母さんに喜んで欲しいワン!

CSSの定義

 

HTMLの定義

 

 

LINE風の吹き出し設定

LINE風な吹き出し設定ですが、LION MEDIAの標準のCSSには組み込みされておりませんので、CSSにデザインを追加する必要があります。CSSに追加する定義と、実際に画面(HTML)側で定義する内容を以下に記載しますので、コピーして活用してください。

以下のLINE風の吹き出しを例として内容を記載します。

 

fan
YouTuberになろうと思ったきっかけはなんですか
桐崎えいじとかタケヤキみたいなユーチューバーを知って漏れもやりたいって思ってはじめました。

CSSの定義

 

HTMLの定義

 

 

♡おすすめ記事♡

ミー
本サイトで人気のおすすめ記事も読んでね!
豊富な商品紹介から、LION MEDIAやサイト構築の技術紹介、
趣味や人気YouTuberの紹介などなど、
たくさん見てね♥

 

【LION MEDIA】のカテゴリを見よう!
WordPressのテーマ「LION MEDIA」に関するカスタマイズ内容やテクニック、知らなきゃ損する情報を提供します。
【レンタルサーバ】のカテゴリを見よう!
サイト運営に必要なレンタルサーバーの選択ポイントや、各社のレンタルサーバを比較した結果を紹介!

LION MEDIAカテゴリの最新記事