ただいまの人気記事はこれ!TOP15を公開中

【プラグイン不要】WordPressでアイコン付きのふきだしが使えるCSS

WordPress

前々からずっと使ってみたかった「アイコン付きのふきだし」を実装しました。

「アイコン付きのふきだし」とは、こんな感じのものです。

アイコンは左右どちらでも表示させることができます。

WordPressでCSSを使って出しているので、プラグイン不要で使うことができます。・・・というわけで、実装方法です。

 

会話形式もOK!アイコン付きのふきだし

「アイコン付きのふきだし」実装はCSSを使います。

実装の手順は2つだけです。

  • まずCSSのコードをコピーして、スタイルシート(style.css)に貼りつけます
  • 記事内のふきだしを使いたいところにHTMLタグを挿入します

これで、アイコンとふきだしが表示されます。

では、まずはCSSのコードです。

アイコン付きのふきだしのCSS

コピーしてスタイルシート(style.css)に貼りつけます。Simpliciyの場合は、子テーマの(style.css)でOKです。

ソースコード

つづいて、HTMLです。

HTML

HTMLは、記事内でふきだしを使いたいところに挿入します。WordPressでしたら、テキストモードにして挿入します。

これでアイコンとふきだしが表示されます。

円の中にある画像の大きさ(表示される範囲)を変えたい時は、CSSの「background-size」のあとにある「cover」を、「%」にして「80%」のようにすると範囲が変わります。

まとめ

アイコン付きのふきだしがあると、記事の雰囲気が変わって、書くのも読むのもたのしくなりますね!プラグイン不要で使えるので、便利ですよ!

Firefoxのファビコンが更新されない、表示されない場合の対処法
Firefoxは、サイトに新しいファビコン(favicon)を設定しても、ブックマークのファビコンが反映されない場合があります。 私もその現象にずいぶんと悩まされました。 新しいファビコンが反映さ...