まず自分から。新たな視点(VIEW:ヴュー)をつくりたい。

笑いたければまず笑え

体験記

SpeechBubbleでロリポップ!サーバーに画像をアップロードする方法

投稿日:

Simon / Pixabay

ワードプレスの吹き出しプラグイン

 

「Speech Bubble」

 

よく目にします。
読まれているブログには必ずあるといっていい定番のプラグイン。

 

↓あっ、ちなみにこれがスピーチバブルで作った吹き出しです↓

 

スタバにいきたいキジトラさん
もし9999万9999円あったらさー

上嶋珈琲店にいきたいクロネコさん
うん

スタバにいきたいキジトラさん
もう1円欲しいよね

 

このSpeech Bubbleの良いところは

 

読みやすくなる!!

 

文字をだらだら書いてるより、よくないですか?
読みやすくなることはSEO対策として重要です。

 

グーグルはこう思う。
いかに読み手を思っている記事をつくるか、読まれる記事をちゃんとつくっているか。
そんな記事を検索ページの上に表示したい。

 

そのものさしがサイトの滞在時間や離脱率です。

 

また、吹き出しの中の文章もちゃんと文字数にカウントされます。
100文字の記事より、1000文字の記事のほうが内容が濃いでしょ。
グーグルは文字数も気にしています。
長すぎる文章は今後、評価されなくなるかもですが。

 

かわいいは正義。ねこは正義。
ねこのアイコンだったら、離脱率は少し抑えられるでしょ(もちろんねこ大好き)。ねこかわいいですし。
ここまで読み進めてくれたねこ好きの読み手のみなさんには感謝です。

 

いぬ大好きキジトラさん
いぬさんも好きです

いぬと親友クロネコさん
いぬさんも正義です

 

Speech Bubble(スピーチバブル)吹き出しプラグインのカスタマイズ

アイコンの写真、名前、コメント、吹き出しの種類、会話構成も自由自在に変えられます。
アイコンの登録がややこしいですが、一度登録すれば、コピペで楽ちんです。

 

詳しく知りたいかたはこちらをチェック(詳しく書かれているのでおすすめです)

https://junichi-manga.com/conversation-plugin/ 

この中で触れられていないことを書いていきます。

 

アイコンの登録の仕方を具体的に説明します。

 

SpeechBubble吹き出しプラグインの最大の難所

それは画像の登録(アイコンの切り替え)です。
このページではねこちゃんがしゃべっていますが、もともとは「どノーマル」のシルエットです。

 

 

こんなのです

 

やっぱりねこちゃんにしたいですよね。

 

早速、変更しようとすると
これがちょっとややこしいしめんどい。

 

ここでつまずいてこのプラグインの導入を諦めてしまう人が多い印象です。

 

その理由は

 

サーバーにアクセスして、サーバーに画像をアップロード(登録)しなければならない

 

こうすることで、LINEの初期アイコンみたいなのがねこちゃんに変更できます。
Speech Bubbleをくわしく解説してくれているかたの使っているサーバーはXサーバー
私はロリポップ!サーバーを使用しています。
サーバー自体が別物なので、アップロードの方法が多少違ってきます。

 

対話形式プラグイン「SpeechBubble」でロリポップ!サーバーに画像をアップロードする方法

 

そこでロリポップユーザーのためにロリポップサーバーへの画像アップロード(登録)を解説します。

 

「Speech Bubble」のプラグインを追加
※方法はhttps://junichi-manga.com/conversation-plugin/をご覧ください

 

「ロリポップ ログイン」と検索し、ユーザー専用ページにログインしてください。
※ロリポップ!webメーラーではありません※

ログインに成功したら、左サイドバーのサーバーの管理・設定にカーソルを持っていき、ロリポップ!FTPをクリック

 

 

そこで、ブログのファイル名をクリック
※もし複数のサイトで使用したい場合はその都度、使用したいサイトのファイルに画像をアップロードする必要があります。

 

ファイルを開いたら、保存ボタンの下にこのようなファイルが並んでいます。

 

wp-contentのファイルをクリック

 

 

そうすると、また同じようなページが表示されます。

 

下にスクロールして、pluginsのファイルをクリック

 

 

またまた、同じようなページが現れます。

 

下にスクロールして「speech-bubble」のフォルダをクリック
※どこかには絶対あります。もちろんプラグインを最初に追加していないとダメですが※

 

 

またまたまた同じような画面が出てきます。

 

下にスクロールして「img」のファイルをクリック

 

 

また同じような画面が出てきます。

 

 

ここで「1.jpg」「2.jpg」というデータがあること確認ください。

 

ここに使用した画像のアイコンをアップロード(登録)します。

 

アップロードボタンはここです(左上です)

 

 

アップロードボタンをクリック

 

するとAdobe Flash Player(無料)をダウンロードしてくださいという表示が出てくる場合があります(すでにダウンロードしている場合は出てきません)。
このAdobe Flash Player(無料)をダウンロードしてインストールしてください。

 

Adobe Flash Player(無料)をダウンロードするときの注意

 

Adobe Flash Playerをダウンロードする際にMcAfee(マカフィー)というセキュリティーソフトも同時にダウンロードされる可能性があります。もしセキュリティーソフトを使用していた場合は競合してパソコンの動作が遅くなる場合があります。
McAfeeだけダウンロードしないように、真ん中にあるオプションのプログラムでチェックを外してください
チェックを外さないとAdobe Flash Player以外にMcAfeeの不要なセキュリティソフトも2つダウンロード、アップロードされます。

 

真ん中のチェックを外す!!

 

Adobe Flash Playerが使えるようになれば

 

アップロードボタンをクリックすればこの画面が表示されます。
もし表示されなければ、一度ログアウトして、再度ログインしてみてください。

 

 

左下の黒いボックスをクリックをクリック
Adobe Flasを許可するかという注意表示が出れば、許可するをクリック

 

するとこのような画面に切り替わります。

 

 

「ファイルを選択する」をクリック

 

するとファイルが選択できますのでドキュメントやデスクトップから使いたい画像をクリック
※あらかじめわかりやすい場所(デスクトップとか?)に画像を置いておくと便利です

 

すると、またこの画面に戻ります。

 

 

アップロードするをクリック
これでアップロード(登録)完了

 

アップロードした画像ファイルはスクロールすれば画面の下に表示されています。

 

 

あとは、画像ファイルの名前を変更して、どこかにコピーしておき、必要になれば「Speech Bubble」の
“icon=”〇〇〇.jpg”の〇〇〇に張り付ければ、画像変更ができます

 

詳しい画像変更や位置変更、吹きだし変更は

https://junichi-manga.com/conversation-plugin/を参照ください。

 

初心者の疑問 SpeechBubbleが表示されない!?

コピペしたSpeech Bubbleの挿入コード
「speech_bubble type=〇〇 subtype=〇〇 icon=〇〇〇.jpg name=〇〇〇speech_bubble」

 

みたいなやつは

 

ビジュアルテキストでも文字列(そのままのコード)で表示されています
※通常の挿入コードはビジュアルテキストで実際のサイト表示と同じように表示されます※

 

プレヴューボタンを押して確認すると、実際の吹き出し形式で表示されています。
Speech Bubbleがちゃんと表示されているか確認するときはプレヴューで実際のサイトをご覧ください。

 

ラインのような吹き出しのinin-flatは使えない場合があるので、アップする前にチェックをおすすめします。

 

Speech Bubbleの使い方

 

挿入コードとアップロードした画像ファイル名をコピーしておき、すぐにペースト(貼り付け)できる状態にすれば、めちゃくちゃ便利です。

 

さいごに

Speech Bubble(スピーチバブル)はめちゃくちゃ便利でおすすめのプラグインです。

画像を変更したい。

その中でロリポップ!のサーバーを使っている人のために

その方法を詳しく解説しました。

ロリポップ!ユーザーもそうでない人も

より見やすいサイトを作っていただければ幸いです。

みんなの友達キジトラさん
さいごまでお読みくださり

みんなの友達クロネコさん
ありがとうございました







-体験記

Copyright© 笑いたければまず笑え , 2018 All Rights Reserved Powered by STINGER.