今日は前回に引き続き、Speech bubbleを導入するまでの道のりをお届けします。
前回の内容で基本的な使い方はほぼお伝えしたと思うのですが、肝心のアイコンの変更方法だけがまだでしたね。
では早速変更手順をどうぞ！
その4、アイコン変更はちょっぴりめんどくさい
見出しのまんまなんですが、さすがにアイコン変えるのは今までのように文字の書き換えだけじゃ無理があります。画像を用意してアップロードしなきゃいけないしちょっとめんどくさい。
一度アップしちゃえば文字の書き換えだけで大丈夫なんですけどね。
|
1 |
[speech_bubble type="ln-flat" subtype="L1" icon="1.jpg" name="〇〇さん"]吹き出しに入れたい言葉 [/speech_bubble] |
書き換える位置は御察しの通り？icon="1.jpg"の部分です。
デフォルトで画像は1.jpg, 2.jpgの二種類が用意されているので、1.jpgの部分を 2.jpgに変更すれば会話形式もできないわけではないんですが。
まず、アイコンにしたいjpg画像を用意したら、あなたが契約しているレンタルサーバーの管理画面へとアクセスしましょう。
私はロリポップなので、そこを基準にお話ししますがやり方はどのレンタルサーバーも同じです。
ロリポップユーザー専用ページの左にある項目の中から、Webツールにカーソルを合わせるとさらに項目がいくつか出てくると思うんですが、その中の"ロリポップ！FTP"を選択してください。
すると別枠でFTPのページが開くと思うのですが、そこにたくさん表示されているフォルダの中のwp-contentを開きます。
開けたら同じようにwp-content<plugins<speech-bubble<imgと順番にどんどん開いていきます。
そしてimgのファイルが開いた状態で、左上にあるアップロードのボタンをクリック。
すると画面の保存するボタンのあたりがこのように変わるはずです。
変わったらファイルを選択するからさっき用意しておいた画像を選択したのち、その横にあるアップロードするボタンをクリックすれば、はい終了！
記事投稿画面に戻ってさっきのコード内のicon="1.jpg"部分をicon="〇〇.jpg"に書き換えれば、オリジナルのアイコンが表示されるはずです。
※〇〇部分は自分が画像につけた名前
画像さえ用意してれば3分もあればできる作業だと思います。
そう、これFTP内のフォルダさえ発見できればかなり簡単なんです。
その5、ファイルを選択するボタンがどこにもない事件
ここから先はその4まででうまくできた人は読み進めなくて大丈夫です（笑）
順調にFTP内でwp-content<plugins<speech-bubble<imgとフォルダを開いていってた私なのですが、なぜかimgフォルダでアップロードボタンを押してもファイルを選択するボタンが表示されない事件に遭遇。
いろいろ何回試しても、クリックすらできないアップロードするボタンとキャンセルボタンのみが表示されて、ファイルを選択させてくれない。
ググってもこんな簡単なとこでつまづく奴なんていないだろと言わんばかりの情報しかなく、仕方なくロリポップにメールで問い合わせることに。すると
「ちゃんと表示されますよ？」との回答が。そんな馬鹿な！
急いでもう一度開いてみるも、やっぱりない。どこにもないー！
もういいかと途方に暮れそうになった時でした、一つの大きな可能性に気付いたのは。
ロリポップさんの「ちゃんと表示されますよ？」の言葉の後ろには「ちゃんと表示されますよ？私のパソコンではね！」というメッセージが隠されているのではないのか…？と。
というわけで、パソコン自体に原因があるとにらんだ私は、手元にあったタブレットから同じ手順を行いました。
するとファイルを選択するボタンが表示される代わりに、こんなポップアップが表示されたのです。
”アップロードにはAdobe Flash playerがいるからダウンロードしてね"と。
・・・・えー（笑）パソコンではそんな事一切言わなかったのに。
確かに今時フラッシュプレイヤー入ってないパソコンの方が珍しいですよね。
でも入ってなかったんですよ、奇跡的に。
というわけですぐさまインストールして、初期設定のままじゃ起動しないようになってるので、ロリポップでアップロードするときは起動するように設定しなおし、もう一度試したらボタンが…
でない！
いや、出た！（笑）
ちょっとしたタイムラグはあったものの、無事ボタンが表示されました。よかったー。
その6、画像が表示されないよ事件
無事画像もアップロードできたので、早速投稿内で使ってみることに。すると。
なにかしらのエラーで画像がでない。名前は出るから鶴さんを表示させたいって気持ちは相手に伝わるのかもしれないですが、気持ちだけじゃ伝わらないものもありますよね。鶴さんのお顔とか。
ここまで来てまた壁かぁと一瞬へこみましたが、こちらはすぐに心当たりが見つかったので解決までは早かったです。これまた超初歩的なミスでした。
みなさん、画像の名前は鶴さん.jpgみたいに漢字やひらがなでつけちゃダメですよ！turusan.jpgのように半角英字でつけましょう。
さすがにこれは初心者の私でもいつも気をつけてるんですけどね、うっかりミスでした。
名前を変えてもう一度アップロードして、ぶじ鶴さんのお顔が表示されるようになりました。
その7、あとがき
