はやぶろぐ

読者です 読者をやめる 読者になる 読者になる

はやぶろぐ

福岡在住。自称はてなブログ1のスピッツファンが邦楽、旅先について語る雑記。

“はやぶろぐ”

はてなブログの文章をLINEの会話っぽくする方法

スポンサーリンク

 

 

LINEの会話っぽいのを再現してみたよ!

 

 

おお。君ならやれると思っていたよ。

 

これは私も真似したい!

 

※アイコンに背景色が移っていますが、正方形の画像をアイコンにすれば大丈夫です。

 

はてなブログを「LINE」っぽくする 参考記事 

こちらの記事を参考に、吹き出しの設定を行いました。

georges.hatenablog.jp

 

HTMLやCSSの知識がない方は手こずってしまうかもしれません。

しかしコピペであっという間に出来ちゃうので、興味を持たれた方はぜひやってみてください。

 

 

 

一曲演奏するよりも簡単な設定だったな。

 

 

随分ブログが見やすくなりましたね。特別に芥川賞あげちゃう!

 

 

やったぜ!

 

 

 +α でLINEっぽくする

吹き出しの幅を変更

.talk left{} と .talk right{} の中にある、

width: 70%; を

width: 45%; に変更。

 

吹き出しの幅がアイコンまで伸びないようにするため。

 

 

右の吹き出しの背景色を緑にする

.talk right{ }

の中にある、#fff を#7fff7fに変更。

 

右の吹き出しの背景色を薄い緑色にします。これでだいぶLINEっぽくなりますよ!

 

 

文章中の背景色を青にする 

<style="background-color: #色の値;">ここにLINEの会話を挿入 </div>

これで囲った部分の背景は(#色の値)で指定した色になります。

 

 ここにLINEの会話を挿入

 

 今回は色の値を #68a4d9 にしてみました。

 

 

 

LINEっぽくする まとめ

 

  • 吹き出しの幅を変更(CSSから)
  • 完了したら、右の吹き出しの背景色を変更(CSSから)
  • 文章全体の背景色も変更(記事編集画面から)

 

 

 

自分のブログでやってみよう!

 

 これでアクセス数UP間違いなしや!

 

 

関連記事