The following two tabs change content below.
小澤朋子
現在、初心者のためのワードプレス・スタートアップアドバイザーとして活動中!ワードプレスの導入・設定でお困りの、あなたのための、お手伝いをしています!本格的にネットで集客をお考えのあなたのためのサービスです。また、時間や場所に捕らわれない「ノマドライフ」を堪能する日々を送っています(^-^)/メール:info@triz-web.com




WordPressなのに、意外にFTP(ファイル転送)を使用する機会が多いなぁと感じる@「ノマド」な主婦Toroです(^-^)/

WordPressのサイトは、管理画面からなんでも出来てしまいますよね?

でも、様々なプラグインを使用していると、ファイルや画像などを、サーバー内のどこどこのプラグインのフォルダ内に入れてね?

って、簡単に伝えている記事多いと思います。

ですが、Wordpress触って、間もない方は、???ってなりますよね!

だって、Wordpress管理画面で完結できるとしか、考えたことないんですから!

なので、今回はWordpress始めたばかりで、自分のPCのファイルをサーバーへ送るにはどうしたらいいんだろう?

という人に、サーバー別での画像アップ方法をお届けします!

今回もお馴染みの、シロクマ先生とその仲間たちが、お伝えしますね(^-^)/

シロクマ先生
こんにちは、「シロクマ先生」だよ
ペン子
いま、うちが表示されてる
プラグイン使いたいんや!
シロクマ先生
このプラグインは、
「Speech Bubble(スピーチバブル)」って言います!
クロ美
私も使いたいわ!
シロクマ先生
では、スピーチバブルを題材に、
サーバー別の画像アップ方法をお伝えします!
スポンサーリンク

画像の準備 Speech Bubble(スピーチバブル)

会話で使用されている画像の大きさは、約60×60ピクセル(px)なので、

その大きさに近い画像を作成してください。

この場合、縦横比率を同じにしないと、伸びたり、縮んだ画像になったます。

ペン子
これが、うちの普通やねん!

通常のペン子。(W100×H100)px

細いペン子
ふふ。。痩せてへん??

ちょっとダイエットした感じ。(W100×H80)px

太いペン子
おーーーい!!

こんどは、太すぎやな。。(W80×H100)px

シロクマ先生
と、言うように元の画像大きさに注意してね!

 

このプラグイン(スピーチバブル)の使用方法を詳しく解説している記事はこちら↓
>>WordPressの吹き出しプラグインSpeech Bubbleで会話形式のブログコンテンツが作れる!

画像アップロード(ロリポップ編)

シロクマ先生
ペン子さんは、ロリポップでしたよね?
ペン子
どうやって、画像アップするか教えてちょ。
シロクマ先生
では、画像は既に用意できていますか?
ペン子
もちろんや!
ちゃんと、タテヨコ比も同じやで!

では、最初にロリポップの管理画面に入るために、ログインしてください。

画像アップの場所(ロリポップ!FTP)

roripoFTP

ログインしたら、左のメニューの「WEBツール」⇒「ロリポップ!FTP」をクリックしてください。

そうすると、ロリポップ!専用のファイルマネージャが開きます。

ファイル一覧が表示されるので、該当するフォルダをクリックしてください。

ロリポップ管理画面

該当するフォルダをクリックすると、Wordpressのフォルダ+ファイル達が見えます。

ロリポップ管理画面

その中の「wp-contents」というフォルダをクリックします。

次の順に開いていきます。

「plugin」 ⇒ 「speech-bubble」 というフォルダがあるので、クリックします。

ロリポッププラグイン

スピーチバブルの中に「img」というフォルダがあります。

その中に、自分が使用したい(会話に登場させたい)画像をアップします。

画像ファイル

画像アップロード

①画面の一番左上に、アップロードボタンがあるので、クリックします。

画像アップロード

②ファイル選択で、自分のPC内で、スピーチバブルで使用したいファイルを選択します。

③選択したら、「アップロードする」をクリックすれば、下表に追加されています。

ロリポップ画像アップのまとめ

  1. ロリポップ!の管理画面へログイン。
  2. ロリポップ!FTP(ファイルマネージャ)を開く。
  3. 「wp-contents」⇒「plugin」⇒「speech-bubble」⇒「img」を開く。
  4. 「アップロード」 ⇒ 「アップしたい画像の選択」 ⇒ ロリポップへ画像アップ!
ペン子
おーー!
出来たでーー!!
シロクマ先生
場所さえ分かれば、簡単でしょ?

画像アップロード(エックスサーバ編)

クロ美
あら?なんかペン子さんと表示が違うんだけど。。
シロクマ先生
そうなんです。。
サーバによって、入り方・表示のされ方は違います。

エックスサーバーのログインページを開きます。

右の方のファイルマネージャーを選択します。

下のユーザID・パスワードを入れ、「ログイン」をクリックします。

xserverインフォ

エックスサーバーWebFTPが開きますね。

xsurverフォルダ

そしたら、該当のフォルダをクリックします。

そうすると、見たことないフォルダが並ぶので、「public_html」をクリックしてください。
※エックスサーバのみ「public_html」というフォルダが絡みます。

xserverpublic_html

そのあとの、フォルダ構成は、ロリポップの時と同じです。

「wp-contents」⇒「plugin」⇒「speech-bubble」⇒「img」順にクリックしたら、

右側に「ファイルのアップロード」があるので、「参照」ボタンから、画像をアップしてください。

xserver画像アップ

画像アップロードした時点で、左の一覧に追加されます。

エックスサーバー画像アップのまとめ

  1. エックスサーバーログイン画面からファイルマネージャー選択しログイン。
  2. エックスサーバーWebFTPで作業。
  3. 「public_html」⇒「wp-contents」⇒「plugin」⇒「speech-bubble」⇒「img」を開く。
  4. 「ファイルのアップロードの参照」 ⇒ 「アップロード」 ⇒ エックスサーバーへ画像アップ!
クロ美
あら?結構簡単じゃない!
シロクマ先生
ファイル一覧の右に、操作できる箇所があるので、
解りやすいかもしれませんね。
クロ美
サーバーによって、少しだけど、操作が違うのね。。

画像アップロード(X2サーバ編)

風呂美
X2サーバーへの画像アップの方法お教えてよ。。
シロクマ先生
誰だろう。。。
風呂美
ねぇ、早くってば!
シロクマ先生
あ。。分かりました。。

100GB無制限レンタルサーバー【X2】のログイン画面に行きます。

x2serverログイン

左側の「ファイルマネージャー」をクリックし、アカウントとパスワードを入れて、「ログイン」してください。

X2サーバーのファイルマネージャーが開きます。

そしたら、フォルダを順に開いていきます。

x2server画像アップ

左側のファイルツリーで、画像アップしたい場所までクリックしていきます。

「wp-contents」⇒「plugin」⇒「speech-bubble」⇒「img」まで行ったら、

画面の一番上の「アップロード」という、ボタンをクリックします。

そして、画像の参照パネルが表示されるので、アップしたい画像を選択し、「アップロード」をクリックして完了です。

X2サーバー画像アップのまとめ

  1. X2サーバーのログイン画面でファイルマネージャーからログイン。
  2. 100GB無制限レンタルサーバー【X2】ファイルマネージャーで作業。
  3. 「wp-contents」⇒「plugin」⇒「speech-bubble」⇒「img」を開く。
  4. 画面上部のアップロードから「ファイル選択」 ⇒ 「アップロード」X2サーバーへ画像アップ!
風呂美
ふーん。。結構簡単じゃん。。
シロクマ先生
入口が他のサーバーと少し違いますが、
基本的には一緒ですね。
風呂美
ありがとさん!
今度、おじさんに伝えとくから。。
シロクマ先生
ん??
おじさん??



まとめ

今回は、プラグイン「speech-bubble」スピーチバブルの画像のアップロードの方法を、サーバー別に解説しました。

画像は、横縦比率は1:1で作成しよう!

画像の大きさは、100px前後で作成しよう!
※60×60pxに強制的に表示されるため。

ファイルマネージャーの入り方や、フォルダが少し違っていましたね。

ファイルマネージャーの入り方

  • ロリポップ!:ログイン後、「ロリポップ!FTP」を選択。
  • X・X2サーバー:ログイン画面から、「ファイルマネージャー」選択し、別アカウントで入る。

フォルダの場所の違い

  • ロリポップ・X2:「wp-contents」⇒「plugin」⇒「speech-bubble」⇒「img」
  • エックスサーバー「public_html」⇒「wp-contents」⇒「plugin」⇒「speech-bubble」⇒「img」を開く。

このように、サーバーの種類によって、微妙に違っています。

慣れてくれば、どのサーバーでも基本的な場所などは同じなので、迷うことはないと思います。

最初は、画面すら違うと、どうして良いか分かりにくいかもしれません。

また忘れてしまったら、ここを見に来てくださいね!

プラグインとテーマに関して、アップしなければいけない場合は、「wp-contents」フォルダ内にありますよ!

シロクマ先生
今日は知らない子がいたな。。