【プラグイン無し!】LINEっぽくブログに画像付きで表示させる CSS【WordPress】

LINE2
 

車掌秋葉仁

こんにちは 秋葉仁です!
 
前回、ブログの記事内でLINEっぽく表示させるプラグインをご紹介したのですが、プラグインを何種類もインストールするとサイトが重くなったり気軽にカスタマイズもしにくいですよね?
 
できればCSSだけで表示させ、自分の好きなようにカスタマイズしたい!
 
ということで作ってみました。

 


 
 

LINEっぽくブログに画像付きで表示させる CSS

 
まずは下記をご覧ください。
 

 

左側の写真

プラグインを使わずに表示することできたの?

右側の写真

うん。 CSSだけで表示してるのでデザインのカスタマイズや使い分けがしやすくなったよ。

左側の写真

しっかしあんたも暇ね~
これ、facebookみないな表示もできるの?

右側の写真

うん。吹出しの可変や固定も出来るし色を変える事が可能。
おまけに画像の大きさや丸みも手軽に変えることができるのでオリジナルが作りやすくなったよ。

 
プラグインを使わずにCSSだけで表示させることができました。
左右に発言者の画像も付いているので見やすく面白みがあるのではないでしょうか?
 
下記のCSSは見やすいように左右に分けて書いてあります。
そのままコピペで使うこともできますし、自分好みにカスタマイズすることも可能です。
 
 

 
 

記事内のソース

 
 

 
 

ワンポイント的な表示も可能

 

車掌秋葉仁

このCSSをちょこっといじればこのようにブログの中で「ワンポイント」的に使うことも可能となります。記事にアクセントが付いていいかもしれませんね。

 

ワンポイント的な吹き出しのCSS

 

 
 
左右に分けてないのでごちゃごちゃしていてごめんなさい。
 
 

記事内のソース

 

 
 

最後に

 
使用用途としては「ワンポイント」的な吹き出しの方が多いのかも知れません。
CSSで自由にカスタマイズ出来るのはやはり便利ですね。
 
とはいえ、素人のソースなので間違っている部分もあるかとは思いますが、大目に見ていただければと思います。
 
参考になりますでしょうか?
 
ではまた~!
 
 

HOME

管理人

秋葉仁

秋葉原で生まれて育ち、会社も秋葉原で設立し、店舗も秋葉原という秋葉原だけの生活。そんな秋葉 仁は大の機械ヲタク。 ビデオカメラ、デジタルカメラ、撮影機材、DJ機材、そしてPC!とにかく機械ならば何でもいい状態。 そんな機械ヲタクが YouTube などを使い様々な機械を紹介。 少しでも購入前の検討材料になれば幸いです。 ぜひともよろしくお願い致します。

カラーコード表

月別

秋葉のおすすめ