2019/09/24 (更新日: 2019/10/16)

[WordPress]ブログで吹き出しデザインを導入した[3分でできる]

こんにちは。kakeです。

ブログで前から導入したかった吹き出しデザインを実際に導入しました。

どんなものかというと、以下のようなものです。

これはテストですこれはテストですこれはテストです

ブログでよく見るやつですね。

Contents

自分で一からHTMLとCSSを書いてもいいのですが、ネットには素晴らしいものがたくさん転がっているので、それを利用した方が、時間短縮できるます。

CSSのデザインなどは以下の「サルワカ」という優れたブログにお任せしちゃいましょう。

今回の吹き出しデザインで参考にした記事は以下のものです。

いろんなパターンがあってすごい助かります。

サルワカさんの記事を参考にします。

この流れで実装していきました。

まず、CSSについてはサルワカさんの記事を丸パクリしました。
CSSで作る！吹き出しデザインのサンプル19選

コピーしたら、WordPressの外観→テーマエディタ→CSSファイルに記述。

これでオッケーです！

次にアイコン画像を決めていきます。

僕はICOOON MONOというサイトで選びました。

僕は以下の画像ファイルをダウンロードしたんですが、これをWordPressにUPします。

お金持ちアイコン1.png

UPの方法としてはまず、WordPressのメディア→新規追加で上記の画像ファイルを選択したらOKです。うまくいくと以下のようになると思います。

簡単ですね。

吹き出し部分のHTMLに画像のパスをimgタグを使って記述しなければなりません。

まず、画像のファイルパスは先ほどのメディアからアイコン画像をクリックします。すると、以下のように出力されているので、それをコピーしてHTMLに記述しましょう。

ここまできたら吹き出し部分のHTMLが完成したと思います。

HTMLはどこかにめもしておくといいです！！

先ほどまでで完成したHTMLを自分のブログで欲しいところに記述したら完成です。

こんな感じです！

多分3分あれば終わると思います！

サルワカさんに感謝です(⌒▽⌒)