アメブロの画像アップロード方法と画像URLの取得方法

  • アメブロ
  • このエントリーをはてなブックマークに追加

アメブロをカスタマイズするとき(もちろん記事を書くときもですが)、画像を利用することがよくあります。

アメブロのカスタマイズで画像を利用する場合、通常、画像をアップロードしてから、CSSやフリースペース、フリープラグイン等に記述する画像のURLを取得する必要があります。

ですが、初心者の中には、この部分で悩む方も多いようです。

そこで、当記事では、アメブロでの画像アップロード方法と画像URLを取得する方法についてご紹介したいと思います。

画像アップロード先は主に2種類ある

アメブロに画像をアップロードする際のアップロード先には、主に2種類あります。

また、これら2種類のアップロード先にはそれぞれ異なる制限があります。

まず1つめは、

  • 1枚の画像容量1MB以内
  • 画像の横幅や高さの制限は特になし
  • アップロード枚数は5枚まで

ブログデザインヘッダ・背景用画像です。

そしてもう1つは、

  • 1枚の画像容量は2MB以内
  • 画像の横幅800ピクセル以下(超える画像は800ピクセルに縮小される)
  • アップロード枚数の制限は特になし

画像フォルダです。

画像フォルダは、普段の記事で使う画像のアップロード先としても利用します。

(他にプロフィール画像をアップロードするところなどもありますがここでは割愛します。)

何れも決して制限は緩くありませんが、それぞれの特徴を考えると、概ね、

  • 画像は基本的には画像フォルダへアップロードする
  • どうしても横幅が800ピクセルを超える画像のみブログデザインヘッダ・背景用画像へアップロードする

という方針で良いのではないでしょうか。

なお、どちらアップロード先も、アップロードできる画像形式は「jpg」「png」「gif」のみで、「bmp」や「ico」などはアップロードできません。

では、以下、それぞれのアップロード先への画像アップロードのやり方と、アップロードした画像のURLの取得方法についてご紹介します。

(操作は、当記事を執筆時点のWindows版Google Chromeの最新版の場合です。他のブラウザでは違う箇所もあると思いますので、適宜読み替えて下さい。)

「画像フォルダ」への画像アップロードと画像URLの取得方法

まずは、画像フォルダに画像をアップロードし、アップロードした画像のURLを取得する方法です。

「マイページ」から「画像フォルダ」を開く

アメーバのマイページからスタートします。

マイページの右上にあるメニューアイコン(「すべてのAmebaサービス一覧」を開く横三本線のアイコン)をクリックし、開いた小窓の中にある画像フォルダをクリックして下さい。

画像フォルダに画像をアップロードする

画像フォルダが表示されたら、ファイル選択ボタンをクリックし、アップロードしたい画像を選択します。

画像は最大5つまで選択できるようになっています。

アップロードする画像を選択できたら、アップロードボタンをクリックして画像をアップロードしましょう。

アップロードが完了すると、画像一覧(「チェックした画像を記事に追加」と書かれたボタンの下側)に、アップロードした画像のサムネイル画像(縮小画像)が表示されます。

画像フォルダの画像のURLの取得方法

画像フォルダにアップロードした画像をアメブロのカスタマイズでりようするための画像URLを取得するには、まず、画像フォルダの画像一覧から、URLを取得したい画像のサムネイル画像をクリックします。

すると、画像のタイトル変更という見出しの付いた小窓が開きますので、そこに表示されている画像の上で、右クリックメニューを出して、画像アドレスをコピー(Google Chromeの場合)をクリックしましょう。

これでクリップボードに画像のURLがコピーされましたので、あとは、必要なところに貼り付けて使うことができます。

「ブログデザインヘッダ・背景用画像」への画像アップロードと画像URLの取得方法

次に、ブログデザインヘッダ・背景用画像です。

以下の手順で画像をアップロードし、画像のURLを取得することができます。

「マイページ」から「デザイン変更」ページを開く

まず、マイページの右上にあるメニューアイコン(「すべてのAmebaサービス一覧」を開く横三本線のアイコン)をクリックし、開いた小窓の中にあるデザインの変更をクリックして下さい。

「CSSの編集」ページを開く

デザインの変更ページが開いたら、上の画像の位置にあるCSSの編集というリンクをクリックしましょう。

もしCSSの編集というリンクがない場合は、CSS編集用デザイン(アメブロのデザインを自由にカスタマイズするためのベースのデザイン)になっていないと思いますので、まずそこからチェックしてみてください。

画像を選択してアップロードする

次に、いよいよ画像をアップロードします。

ブログデザインのCSSの編集というページが開きましたら、ブログデザインヘッダ・背景用画像の追加という欄に注目して下さい。

ここにある、ファイル選択ボタンをクリックしてアップロードしたい画像を選択し、アップロードボタンをクリックすれば、画像のアップロードが始まります。

そして、アップロードが完了すると、その下の欄アップロードされた画像にアップロードした画像のサムネイル画像(縮小画像)などが追加表示されます。

正常に追加されていれば、画像のアップロードは完了です。

画像のURLを取得する

ブログデザインヘッダ・背景用画像へアップロードした画像は、その画像のURLを使ってカスタマイズで利用することができます。

画像のURLを取得するには、アップロードした画像のサムネイル画像の下にある黄色いテキストボックスを右クリックし、表示された右クリックメニューからコピーをすればOKです。

これでクリップボードに画像のURLがコピーされましたので、あとは、必要なところに貼り付けて使うことができます。

まとめ

以上が、アメブロへの画像アップロード方法と、アメブロにアップロードした画像のURLを取得する方法です。

アメブロのカスタマイズに画像を利用するには、必ず行うと言っても良い操作だと思いますので、ぜひ覚えておいて下さい。

関連記事

  • アメブロ
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す