Speech Bubbleのアイコンを設定する方法

blog, ワードプレス設定

Speech Bubbleのプラグインをインストールしたときに、デフォルトで画像は2種類入っています。デフォルトの画像でもいいのですが、サイトをカスタマイズしている時に、やはりオリジナルの好きな画像を使って吹き出しをさせたいですよね。

私はど素人なので、素人でも分かるように記載させていただきます!

名前.comのレンタルサーバーでアイコンの設定

私は、ドメインはお名前.com 、サーバーもお名前.comレンタルサーバー を使っているので、お名前.comレンタルサーバー で説明させていただきます。

ずぶの素人なのですが、ロリポップ! レンタルサーバー Xserver の説明はあるのに、お名前.comレンタルサーバー での設定方法がなかなか見つからずに、自分でなんとか解決したので、同じように困っている方のために分かりやすくご説明してみます

 

ドメインNaviにログイン

まずは、お名前.com お名前.comレンタルサーバー のドメインNaviログインにログインします

 

 

 

共用サーバーにログイン

 

共用サーバーをクリックして、ログインします。
コントロールパネルが表示されたら「サーバー情報」をクリックします

 

ファイルマネージャーを開く

ファイルマネージャーのURLをクリックします

 

ファイルマネージャーにログインする

FTPアカウントとパスワードを入力してログインします。

ファイルマネージャーのアカウントとパスワード

このFTPアカウントとパスワードを調べるには
Web設定のFTP・SSHアカウントをクリックします

 

管理者アカウント接続情報の画面が表示され、アカウントとパスワードが表示されます。これが、ファイルマネージャーへログインするためのアカウントとパスワードになります

 

ディレクトリ画面設定方法

ファイルマネージャーにログインできたら、ディレクトリの画面が出るので、自分のサイトのドメインの部分をクリックします。

 

 

ディレクトリの下にあるwpをクリック

 

ディレクトリ下に出てくるwp-contentをクリックする

 

ディレクトリの下に出てくるpluginsをクリックする

 

speech-bubbleをクリック

自分がワードプレスに入れているプラグインの一覧が出てくるので、その中から「speech-bubble」をクリック

 

imgをクリック

ディレクトリまたは、ファイル名のどちらかに表示されているimgをクリック

 

アップロードをクリックします

 

ファイルを選択

ファイルを選択をクリックして、あらかじめ用意しておいた画像ファイルを選択したあとに、下にあるアップロードをクリックします。

 

アップロードを確認

アップロード後にファイル名の部分に、アップロードしたファイル名が記載されていたらOKです。Speech Bubbleにアイコンを表示させるときに、このファイル名を記入するので、アップロードする前にファイル名を覚えやすいものにしておいた方がいいです

 

早速使ってみる

下記の「icon=”1.jpg”」「icon=”2.jpg”」の部分に、先ほどアップロードした画像のファイル名を入れます。このときにjpgなのか、pngなのかを間違えないように入力します

neko
これはデフォルトで入っていた 「1.jpg」
neko
こっちはデフォルトで入ってた「2.jpg]

↑これを入力すると↑

neko
これはデフォルトで入っていた 「1.jpg」
neko
こっちはデフォルトで入ってた「2.jpg]

↑このように表示されます↑

 

neko
こちらのアイコンが今回入れたアイコン
neko
こっちは以前に入れといたアイコン

↑これを入力すると↑

neko
こちらのアイコンが今回入れたアイコン
neko
こっちは以前に入れといたアイコン

↑このように表示されます↑

まとめ

いかがでしたか?私の場合はお名前.com お名前.comレンタルサーバー を使っているので、同じサーバーを使っている方は参考にしてみてはいかがでしょうか?

blog, ワードプレス設定

Posted by neko