ワードプレスで大きいアイコンで吹き出しを表示させる方法

こんにちは、桃太郎です。

この記事を読むとこんな吹き出しが使えるようになります。

桃太郎
どやっ

 

桃太郎のアイコンを変えました!
前は可愛い感じだったんですが、今回はかっこよく描いてみました。

桃アイコン

アイコンを変えたのは、吹き出しを使いたいな~と思ってで、アイコンを描くついでに表情別で何パターンか作ってみました。

で、吹き出しくらい簡単に設置出来るだろうとあまく見てたら、なんとまぁ難しいこと。

簡単にプラグインで設置できるってんだから、早速設置してみたらアイコンが小さいこと小さいこと。

折角表情を分けて書いたのに全く表情が見えない。

吹き出しのアイコンが小さい

パソコンから見たアイコンのサイズ。 Speech Bubble使用

これはイカンと、このプラグインを使用してなんとかアイコンを大きくしたかったんですが、出来ませんでした。

なので、今回はプラグインなしで吹き出しを設置でき、さらにアイコンのサイズ変更も出来る記事を発見したので、ご紹介させていただきます。

吹き出し記事紹介

Lognote WordPressで会話風ふきだしを表示させるCSSカスタマイズ

こちらを参考にさせていただきました。(というかコピペ)
この記事ではコードの全文を引用しないので、この吹き出しを使用する際は上記のサイト様からお借り下さい。

この吹き出しの特徴

アイコンサイズを自分で変えられる

アイコンサイズは、紹介されてる記事では60pxになっています。
なので、もう少し大きいほうがいい方はこちらを変更してください。

//会話風ふきだしショートコード
function kaiwasc1Func( $atts, $content = null ) {
return ‘<div class=”kaiwa-box kaiwaicon1 clearfix”><div class=”kaiwa-face”><img src=”アイコンURL” width=”60px”><div class=”kaiwa-face-name”>アイコンの名前</div></div><div class=”kaiwa-area”><div class=”kaiwa-hukidashi”>’.$content.'</div></div></div>’;
}
add_shortcode(‘kaiwa1’, ‘kaiwasc1Func’);

.kaiwa-face{
text-align:center;
display: table-cell;
width:60px;
vertical-align:middle;
}

.kaiwa-face img{
border-radius: 60px;
border: 1px solid #ccc;
margin-bottom:5px;
}

.kaiwa-face-name {
color: #333333;
font-size:70%;
line-height:1.5;
max-width:60px;
}

(一部抜粋)

画像は正方形がよさげ

私のアイコンは、綺麗な正方形じゃないので、少しだけ縦長くなってしまっていますw

桃太郎
ちょっと縦長(照れ

アイコンが左固定

これだけが残念です(・・;)
まぁ、ごちゃごちゃ記述が増えまくってしまうくらいなら左のみでもいいのかもしれません。

※右アイコン吹き出しも作って下さいましたヽ(^◇^*)/
WordPressで会話風ふきだしを表示させるCSSカスタマイズ

 

右バージョンを使用する際は、左は自分のアイコンを登録、右は別キャラを登録にすると便利です。

右も左も自分のアイコンを登録すると自分が自分と会話してるようになっちゃうので(笑)

 

アイコンの数だけ登録が必要

私の表情アイコンは8つあるのですが、ひとつひとつfunctions.phpに登録しました(^▽^)

逆に、アイコンを全て登録してあるからこそ、実際にHTMLを打ち込む時の記述が少なくてとても便利になってます。

HTMLの記述が簡単

こちらの吹き出しだと、

  1. [kaiwa1]テキスト[/kaiwa1]

のみで吹き出しが表示されます。
最初の設定が面倒なだけで、それ以降はすこぶる楽です。

わたしはAddQuicktagにコードをぶちこんで、ボタンひとつで使えるようにしているので、本当に楽ですw

クイックタグ

※ちょっと注意するところ

一応、引用元の記事でも書かれてあるのですが、見落としてしまいそうだったので、こちらに記載しておきます。

function kaiwasc1Func( $atts, $content = null ) {
return ‘<div class=”kaiwa-box kaiwaicon1 clearfix”><div class=”kaiwa-face”><img src=”アイコンURL” width=”60px”><div class=”kaiwa-face-name”>アイコンの名前</div></div><div class=”kaiwa-area”><div class=”kaiwa-hukidashi”>’.$content.'</div></div></div>’;
}
add_shortcode(‘kaiwa1‘, ‘kaiwasc1Func’);

複数のアイコンを登録するときは、この赤い部分の数字の数字も一緒に変更してくださいね。

実際に使うとこんな感じ

アイコンの大きさは120pxにしています。
スマホで見たときにアイコンがでかすぎたので、80pxにしました。
パソコンだと少し表情がわかりにくいのですが、スマホ優先にします。

ついでにアイコンの紹介もしておきますねw

アイコン吹き出し紹介
・・・なんとまぁイラストの手抜き加減が酷いですね(;^_^A
時間とやる気があれば、もうちょっと別バージョンのイラストも描いてみたいなーと思います!

まとめ

ほとんどのサイトさんが、Speech Bubbleの紹介ばっかりだったのでどうしようか途方にくれていましたが、良記事を発見できてよかったです^^

本日のスペシャルサンクスLognote: WordPressで会話風ふきだしを表示させるCSSカスタマイズ(左バージョン)

 

桃太郎

名前もアイコンも男っぽいですが、女です。
好奇心旺盛で、やりたいと思ったことに色々手を出したりするので、このブログも色々なジャンルを書いています。
いわゆる雑記ブログ。

 この記事へのコメント

  1. Lognote より:

    ご紹介ありがとうございます(^^♪
    勝手ではございますが、こちらの記事を紹介させていただきました!
    アイコン右バージョンも作ってみましたので、参考にしていただければ幸いです。

    • 桃太郎 桃太郎 より:

      あわわΣ(゚Д゚;)
      このたびは素晴らしい吹き出しを記事ありがとうございました!
      そしてご紹介ありがとうございます!
      アイコン右バージョン、とても嬉しいですヾ(*´∀`*)ノ
      是非参考にさせていただきます!!

  2. […] 参考ワードプレスで大きいアイコンで吹き出しを表示させる方法 […]

 COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です