会話形式で表示してくれるCSSを導入してみました！
めちゃくちゃ簡単だったのでご紹介です。
やりかた
今回は、じょーじ(id:george-gogo)さんの「急がば 急いでまわれ！」のモノを使用しました！
コピペだけで導入できるので、超簡単です！
CSS欄にコピペして、会話用のHTMLを使って記事を書くだけ！
どんな感じになるのか？
どんな感じになるのか試してみました。
このように、左右にアイコンとフキダシが表示されて会話してるように表示してくれます。
アイコン画像も自分の好きなものを設定できます。
ただし、ある程度余白をもった画像を設定しないと、画像がなんなのかわからないよ！
設定する画像のカスタマイズ
この仕組みは導入うすると、超絶簡単に会話形式で表示してくれます。
しかし弱点は
コレ用に画像を用意しないとよく見えない
という事ですね。
例えばぼくのアイコン。オリジナル版はこちらです。
コレを設定すると
こうなります。
なので、こんな感じにしてあげます。
すると、こんな感じになります！
この画像は、200x200pxのモノですが、四方に40pxほどの余白をいれました
あとがき
いかがでしたでしょうか？
今までWeb関係の言語は、なんとなくしか知りませんでしたが、ブログをやり出してから関心しっぱなしです(笑)
こんなに色々とカスタマイズできるんだなぁと、色々見るたびに思っています。
普段気にせずネットを見ていると、普通になりすぎていて、あまり気づきませんが……
ある意味それが正解なのかもしれませんが、こういうのに関心を持てたのがブログを始めたメリットの1つかもしれません、と最近思っていたり。
