フリーランスの道具箱

WordPressに会話の表現力を実装 吹き出しプラグインSpeech Bubbleのアイコン画像設定方法

WordPressブログの記事にて、メッセンジャーのような会話形式の表示を実現するのが「Speech Bubble」プラグインです。プラグインをインストール・有効化すると、設定する必要もなくショートコードを記述するだけで、吹き出しの会話形式の表示を作ることができます。

ただ、顔写真のアイコン設定を一工夫しておかないと、プラグインアップデートのタイミングで、カスタマイズしたアイコン画像が消える場合があるようです。

アイコン画像はブラグインフォルダの中にある

アイコン画像はプラグインフォルダの中にある img フォルダに格納されています。ここへFTPにて画像ファイルをアップロードすると、オリジナルのアイコン画像を使えるようになるのですが、下のような問題点があります。

  • 画像アップロードでFTPの知識が必要
  • プラグインのアップデートで、img フォルダが書き換えられて、アップロードした画像が消える場合がある

2つの目のプラグインのアップデートによって、アップロードした画像が消えることは、再度、画像をアップロードすれば良いのですが、面倒なのも本音です。

メディアにアイコン画像をアップロードすればいい

WordPressのメディアへアイコン画像をアップロードして、それを表示に使えると、上の2つの問題も回避できます。ただ、http://study314.jp/wp-content/uploads/2016/05/mono96.jpg というようなURL形式をショートコードに書くと、アイコン画像が表示されません。

そこで、下のような相対バス形式で記述します。

icon=”../../../uploads/2016/05/mono96.jpg”

これで、メディアにアップロードした画像をアイコン画像として表示できます。

サンプルのショートコード

画像のパスはあくまで例です。

もう一つ、記事を読んで行かれませんか?

広告

もっと
a. WordPressのこと
について読む


この記事を書いた人 :

profile2016autumn

ブロガー・Web&Blogコーチ・親指シフトユーザー・orzレイアウト考案者。WordPressが得意。HTML・CSS・PHPも熟知し広範囲の知識を持つ。ブログは年間 1450記事を更新した経験も(2013年)。

誰でもインターネットを活用できる時代だから、頭でモヤモヤしている「こんなのを実現したいなぁ」を引き出して形にし実現させるお手伝い、そして、インターネットを上手に使えるようにサポートするのが得意です。

iPhoneやAndroidなどのガジェット、デジタルだけでなく文房具などのアナログなツールも大好きです。写真や旅を楽しむこと、おいしいお食事、楽しい・ワクワクすることが大好きです。

Twitterやfacebookでも情報発信中、よろしければフォローしてください。



Instagram
follow us in feedly

ご依頼・講座開催情報はこちら

ブログ・情報発信でお困りごと、モヤモヤ、解決。あなたのステップアップをサポートしています。

広告

情報発信コンサルティング・コーチ

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。
・Webを活用して本気でビジネス・人生を切り開きたい方
・Webのテクニカルな改善でお悩みの方
・アイディアはあるのに、記事の文章にするのがうまくいかない方
・親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みもダイレクトにアドバイス。ブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

お申し込みは
お問い合わせフォーム
からお願いします。

うまく表示されない時は
こちらをご覧下さい。

お申し込みは
お問い合わせフォーム
からお願いします。

こちらの記事も役立ちます
follow us in feedly