【アイコン変更】ブログにLINEの様な会話形式の吹き出しを!Speech bubble/WordPressプラグイン

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

これまで2回に渡りSpeech bubbleについて書いてきましたがいかがでしたでしょうか?たしかに会話風の設定としてLINE風だったり、Facebook風だったりとイイ感じになったように思えます。ただ、ちょっと…このアイコンのままだと無機質な感じしませんか?もう少しオリジナルな感じとかやりたいですよね? そんな時にはちょっと手間がかかりますが、オリジナルの画像や写真を使って変更することが出来ます。

 

ちょっと記事が長くなったので3部構成に分けましたが、必要に応じてご覧いただければと思います。
Speech bubbleインストール方法 / Speech bubble使い方 / Speech bubbleアイコンの変更方法

アイコンを変更してみます。

せっかくなのでアイコンも作ってみました。さちこ(仮)とたけし(仮)です。(ペンタブで適当に書いてたら、知人に似てたので仮名で)

さちこ(仮)
はじめますて。わい。さちこ・ω・。
たけし(仮)
おら、たけし。よろすく!

用意するのはアイコン画像とFTP接続

アイコンの準備

わざわざアイコンを作ったりしなくて良いので、写真とか何かしらアイコン用の画像を用意しておいてください。 TwitterやFacebookユーザーにオススメ!アイコン作成サイトまとめ16選とかで何か作っても良いかも知れないですね。

Miss.sample
こんな感じのアイコン?アバター?がすぐ出来ますよ!
Mr.photo
写真をぶっこむとこんな感じになります。縦横比の関係で潰れてますが、正方形の写真を用意してあげると綺麗になりますね。
アイコン作成サイト記事⇒TwitterやFacebookユーザーにオススメ!アイコン作成サイトまとめ16選

FTPの準備

WordPressファイルの中に入るので、FTPでの接続は必須です。初心者でも使える!フリーのFTPクライアントソフト10選とか見てもらえると良いかも。FTP?何それ?という方にはちょっとやることがいっぱいかもしれませんね。ガンバ!

プラグインフォルダ「speech-bubble」までたどり着く

下記の画像を参考にしてもらえると良いのですが、wp-content ⇒ plugins ⇒ speech-bubble ⇒ imgの中に使いたいアイコンや写真の画像を入れてください。結局リサイズされて小さくなるので、予め小さめの画像を入れた方がいいでしょうね。 1.jpgと2.jpgは冒頭に出てきた無機質な感じのアイコンです。消してもいいですし、他ので上書きしても良いですし、残しておいてもいいです。

さちこ
ちょっと手間かかるけど、だんぜんこの方がええね。

たけし
んだっきゃね!

インストール方法や使い方から、アイコンの変更方法まで3つの記事でご紹介しています。

この記事は元々一つの記事で書いていたのですが、長くなってしまい見づらいので3つの記事に分けました。

  1. Speech bubbleインストール方法
  2. Speech bubble使い方
  3. Speech bubbleアイコンの変更方法
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメント

コメントは停止中です。