アメブロカスタマイズで使う画像のアップロード方法と画像URLの取得方法

アメブロのカスタマイズをする時は、画像を利用することが多々あります。

画像を利用する場合は、まず、使用する画像をアメブロにアップロードし、アップロードした画像にアクセスできる「画像のURL」を取得して使用します。

この手順は、記事を書くときの画像の貼り付けとは違うため、初心者の場合、やり方が分からず悩むことも多い部分ですね。

そこで、当記事では、アメブロのカスタマイズで使うため「画像をアップロードする方法」と、アップロードした「画像のURLを取得する方法」についてご紹介したいと思います。

カスタマイズで使う画像をアメブロにアップロードする方法

まずは、画像をアップロードする方法ですが、アメブロの記事エディタの一つである「最新版エディタ」を利用すると簡単です。

ドラッグ&ドロップや、複数画像の一括アップロードも可能ですので、とても便利ですね。

最新版エディタの開き方ですが、普段から最新版エディタを使って記事を書いている方の場合は、いつも通りに新しい記事を作成する「ブログを書く」というページを開けばOKです。

マイページにもボタンがありますので、そのボタンをクリックすれば一発で開きます。

また、普段は最新版エディタを使っていない(タグ編集エディタを使っているなど)という場合でも、いつも使う記事エディタを変える必要はありません。

実は、記事エディタのURLの後に「?editor_flg=5」を付けて開くと最新版エディタを開くことができます

よく使う場合は、ブラウザにブックマーク(お気に入りに追加)しておいて下さいね。

最新版エディタを開くことができたら、この記事エディタの機能を使って、早速画像をアップロードしてみましょう。

画像のアップロードに使用するのは、最新版エディタの記事を書く箇所の右側にある写真アップロードの機能です。

画像のように(カメラマークのアイコン)と「写真」をクリックすると使えます。

アップロードは以下のどちらかの方法でできます。

  • 画像一覧(上記画像の赤枠で囲った部分)に使いたい画像をドラッグ・アンド・ドロップする
  • 画像一覧の左上隅にある「アップロード」と書かれたアイコンをクリックし、開いたダイアログボックスで使いたい画像選び「開く」ボタンをクリックする

どちらの方法でも、複数の画像を一括でアップロードできますので、使いたい画像がたくさんある場合でもとても楽にアップロードできますね。

カスタマイズで使用する画像のURLを取得する方法

画像のアップロードができたら、次は、画像のURLの取得方法です。

最新版エディタで画像をアップロードすると、画像は「画像フォルダ」というところに保存されています。

記事を書く時にタグ編集エディタなどを使っている場合、記事エディタから「画像フォルダ」を開くことができますのでお馴染みだと思います。

ですが、最新版エディタを使っている方は見たことがないかもしれませんね。

画像フォルダはこちらから開くことができますので、今後もよく使いそうでしたらブックマークしておいて下さい。

もちろん、アメブロの管理画面のメニューから開くことも可能です。

さて、画像フォルダを開くと、アメブロにアップロードしてある画像を一覧表示できます。

これらの画像をカスタマイズで使う場合は、以下の手順で「画像のURL」を取得しましょう。

  1. 対象の画像のサムネイルをクリック
  2. 表示された画像をアドレスバー(検索バー)にドラッグ&ドロップ
  3. アドレスバー(検索バー)に表示されたURLをコピー

です。

(ほかにも方法がありますが、当記事では、Google Chrome、Firefox、Internet Explorer 11など、多くのブラウザで共通の操作となるこの方法をお勧めします)

以下、一例として、Google Chromeで操作した場合です。

1.対象の画像のサムネイルをクリック

まず、画像フォルダに表示される画像の一覧から、URLを取得したい画像をクリックしましょう。

すると、その画像が、画面の中央付近に少し大きめに表示されます。

2.表示された画像をアドレスバー(検索バー)にドラッグ&ドロップ

次に、少し大きめに表示された画像の上でマウスの左ボタンを押し下げ、ボタンを押し下げたままブラウザのアドレスバーまでマウスカーソルを移動し、そこでマウスの左ボタンを離します(ドラッグ&ドロップします)。

3.アドレスバー(検索バー)に表示されたURLをコピー

すると、ブラウザには対象の画像が(大きく)表示され、アドレスバー(検索バー)にその画像のURLが表示されます。

このURLをコピーすれば画像のURLを取得したことになりますので、あとは、必要なところへ貼り付けましょう。

(もしも、取得した画像のURLが「http://」で始まっている場合は、その部分を「https://」に修正して使いましょう)

また、画像フォルダをもう一度表示するには、ブラウザの「戻る」ボタンをクリックして下さい。

その他の画像アップロード先は・・・

ところで、アメブロには、画像フォルダの他にも、

  • ブログデザインヘッダ・背景用画像
  • プロフィール画像

という画像アップロード先があります。

ですが、当記事公開時点では、これら「画像フォルダ以外のアップロード先」は、カスタマイズで使う画像のアップロード先として、

  • アップロードできる枚数が少なすぎる
  • JPG形式の画像をアップロードすると劣化が激しい

という画像フォルダには存在しないマイナス要因があります。

このため、個人的には、これらの利用価値はないと考えています。

画像フォルダの使い方を覚えておくだけで十分でしょう。

まとめ

以上、アメブロカスタマイズで使う画像をアメブロにアップロードする方法と、アップロード済みの画像のURLを取得する方法をご紹介しました。

カスタマイズで画像を利用する際に必要になります、ぜひマスターしておいてくださいね。

よろしければフォローお願いします

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。