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

  • これからアメブロのカスタマイズをしようと思っている。
  • アメブロのカスタマイズで画像を使いたいが、どうすれば使えるのか?手順がわからない。

アメブロカスタマイズで画像を使うには

ヘッダー画像の表示や背景画像の設定など、アメブロのカスタマイズをする時は、画像を利用したいことが多々あります。

画像を利用する場合、まず使いたい画像をアメブロにアップロードし、アップロードした画像にアクセスするための「画像のURL」を取得し、そしてそのURLを使って画像を表示します。

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

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

アメブロカスタマイズで画像を使う場合は必須ですので、ぜひ参考にしてマスターしてくださいね。

画像をアメブロにアップロードする方法

まず、画像をアップロードする方法です。

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

βテスト公開中の「新タグ編集エディタ」でも「最新版エディタ」と同様にできます。

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

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

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

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

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

もし、今後も使う可能性がありそうでしたら、ブラウザにブックマーク(お気に入りに追加)しておいて下さいね。

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

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

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

アップロードは以下のどちらかの方法で行いましょう。

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

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

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

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

画像のURLは、「画像フォルダ」を使うと簡単に取得できます。

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

「画像フォルダ」は、アメブロの利用歴の長い人にはお馴染みだと思いますが、最近、最新版エディタを使ってアメブロを書き始めた方は見たことがないかもしれませんね。

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

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

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

ここから、カスタマイズで使いたい「画像のURL」を取得する手順は、以下のようになります。

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

です。

ほかにも方法はいくつもありますが、当記事では、Google Chrome、Firefox、Internet Explorer 11など、多くのブラウザで共通の操作となるこの方法をご紹介します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

というマイナス要因があります。

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

これらのマイナス要因は、現状、画像フォルダには存在していませんので、画像フォルダの使い方を覚えておくだけで十分でしょう。

まとめ

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

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

関連記事

コメントを残す

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

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