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

アメブロのカスタマイズでは、ヘッダー画像や背景、サイドバーの見出し、囲み枠など、画像を利用することが多々あります。

カスタマイズで画像を利用する手順は、

です。

つまり、「画像のアップロード方法」と、「画像のURLの取得方法」を知っておく必要があります。

当記事では、画像を使うカスタマイズには必須となる、これらの方法について紹介します。

以下に記述する手順は、Windows 10とGoogle Chromeを使った場合のものです。OSやブラウザなどの環境が異なると表示や操作が違うこともありますので、ご自身の環境に合わせて読み替えて下さい。

画像のアップロード方法

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

アメブロは画像をアップロードできるところが複数箇所ありますが、当サイトでは、普段の記事を書く時と同じところ（記事エディタの「写真」）にアップロードすることをおすすめしています。

アメブロのユーザであれば今更かもしれませんが、一応やり方を説明します。

新規でも既存記事でも良いので、記事エディタを開いて、画像を記事エディタの右側の「写真」の欄にドラッグ＆ドロップすればアップロード完了です。

複数画像を一気にアップロードすることも簡単にできます。

もちろん「アップロード」ボタンをクリックし、ダイアログボックスで選んでアップロードしても大丈夫です。

ちなみに、後記の「画像フォルダ」画面でアップロードすることも可能ですが、記事エディタからアップロードするほうが圧倒的に楽ですね。

アップロードした画像の保存場所は記事エディタからでも画像フォルダからでも同じなので、やりやすい方を使えば問題ありません。

「ブログデザインのCSSの編集」というページに「ブログデザインヘッダ・背景用画像の追加」という欄があり、ここにアップロードすることを勧めている人も多いですが、ファイルサイズの制限(1MB)や、アップロードできる枚数の制限(5枚)が厳しく扱いづらいので、当サイトではお勧めしません。

次は、画像のURLを取得する方法です。

画像のURLは「画像フォルダ」から以下のような手順で取得できます。

まず、画像フォルダ画面を開きます。

「管理トップ」の左サイドバーにある「設定・管理」から、「画像管理」をクリックして下さい。

「画像フォルダ」画面が開いたら、画像のURLを取得したい画像を見つけてクリックします。

クリックすると、画像は別枠で少し大きく中央付近に表示されますので、その少し大きく表示された画像の上にマウスカーソルを移動し「右クリック」します。

右クリックメニューが表示されたら、その中の「画像アドレスをコピー」（Google Chromeの場合）をクリックします。

このように書くと、何となく大変そうに感じるかもしれませんが、要は、

ということです。

これでクリップボードに「画像のURL」がコピーされますので、あとは必要なところに貼り付ければ（ペーストすれば）完了です。

なお、ブラウザの種類やバージョンによっては、右クリックメニューの項目名も変わりますので、使っているブラウザに合わせて読み替えて下さい（例えば、Edgeで確認してみたところ「画像リンクをコピー」という表示でした）。

ちなみに、右クリック→コピーではない別の方法として、少し大きく中央に表示された画像を「アドレスバーに向かってドラッグ＆ドロップ」するという方法もあります。

この操作でアドレスバーに画像のURLがそのまま表示されますので、それをコピーしてしても構いません。

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

画像を使ったカスタマイズをするときには必要になると思いますので、ぜひマスターしておいて下さい。