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

ヘッダー画像の設置や背景画像の設定など、アメブロをカスタマイズする時には、画像を利用することがよくあります。

カスタマイズで画像を利用するには、まず、使いたい画像をアメブロにアップロードします。

そして、アップロードした画像をCSS等から呼び出すために必要な情報である画像のURLを取得し、それを記述して画像を表示します。

当記事では、これら「画像のアップロード方法」と、アップロードした「画像のURLの取得方法」をご紹介しますが、画像を使うカスタマイズをする場合には必須になると思いますので、ぜひ参考にしてください。

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

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

では、ここから実際の手順を説明していきます。

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

これは、記事を書く時に画像をアップロードするのと同じやり方で問題ありません。

記事エディタの右側の「写真」の枠を使って、ドラッグ＆ドロップでアップロードすれば完了です。

「画像をアップロード」と書かれたボタンをクリックして、開いたダイアログボックスで画像を選び「開く」ボタンをクリックする、という手順でアップロードしても大丈夫です。

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

このあとの説明で使う「画像フォルダ」画面でアップロードすることも可能ですが、（画像の枚数が多い場合などは特に）記事エディタからアップロードするほうが圧倒的に楽です。記事エディタからでも画像フォルダからでもアップロードした画像は実は同じ「画像フォルダ」に保存されますので、やりやすい方でアップロードして問題ありません。