htmlとCSSを利用してワードプレスで吹き出しを作る方法【ガチ初心者向けの手順解説】

ブログを見ていたらたまに吹き出し見出しって見るじゃない?

ワードプレスのテンプレートSTINGERの見出し2(?)で手軽にできるらしいが、私が使っているテンプレートSimplicityでも吹き出し見出しを作りたい!

ということで調べてみたらCSSを使うことでおしゃれに装飾できるらしい!

CSSってなんぞ?からスタートしたので、詳しいサイトはたくさんあるので、私が調べて吹き出しを作成する方法まで超初心者向けに実際のやり方について書いていく。

スポンサーリンク

CSSとは

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語ですが、ごく簡単にいうと、

CSSとは、HTMLに色や大きさや背景などを加えて見栄えを良くするもの

参考サイト はこちら

ということです!

参考サイト

CSSの吹き出しジェネレーターを参考にして作成。

こちらが数値をいじることができるので、わかりやすかった。

  1. 吹き出しの位置(上下左右)
  2. 吹き出しの大きさ
  3. 吹き出し本体の色
  4. アウトラインの色
  5. アウトラインの太さ

が動かせるもの。

こちらのサイトでスタート時点でのCSSは以下の通りだが、CSSで吹き出しや見出しを作ってコピペさせてもらえるサイトがたくさんあるので、例えば下記のような文字列をコピーしよう。

.arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f5; }

.arrow_box:after, .arrow_box:before { bottom: 100%; left: 50%; border: solid transparent; content: ” “; height: 0; width: 0; position: absolute; pointer-events: none; }

.arrow_box:after { border-color: rgba(136, 183, 213, 0); border-bottom-color: #88b7d5; border-width: 30px; margin-left: -30px; }

.arrow_box:before { border-color: rgba(194, 225, 245, 0); border-bottom-color: #c2e1f5; border-width: 36px; margin-left: -36px; }

吹き出しの位置の変え方

スタートの段階で吹き出しは中央に出ているので、arrow_box:before { bottom: 100%; left: 50%;のなかのleft: 50%; の数字をいじることで吹き出しの位置が変化する。

私のは「10」にして左側に移動させている。

私もこちらで作ってみたらこんな感じ↓

ジェネレーターで作った吹き出しだよ

なかなかそれっぽいね!

ワードプレスでの設定

お気に入りの見出しや吹き出しを見つけてCSSをコピーしたら、続いて

ダッシュボードで「外観」⇒「CSS編集」と進もう。

四角の中にCSSをペーストして、「スタイルシートを保存」

つづいて投稿ページなどに移動しよう。

htmlの書き方

<div class=”***”>ふきだしの中身</div>

***に当たる部分に、”arrow_box”みたいなCSSの名前(呼び出せれば名前は変えていい)を書き入れる。

これで吹き出しができました!

まとめ

  1. 「CSS 見出し」など適当なページを探す。
  2. CSSをコピー
  3. ワードプレスで「外観」⇒「CSS編集」と進みペースト
  4. 投稿でhtmlで呼び出す

私は3と4がわからなくてつまづきポイントだったけど、これでできるようになったので、みんなも吹き出しなど装飾しておくれ!