目次

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

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

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

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

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

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

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

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

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

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

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

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

CSSを編集する「ブログデザインのCSSの編集」というページに「ブログデザインヘッダ・背景用画像の追加」という欄があり、ここでもカスタマイズ用の画像をアップロードできますが、ファイルサイズの制限が厳しく、アップロードできる枚数も5枚までという制限があって扱いづらいのでお勧めしません。
このあとの説明で使う「画像フォルダ」画面でアップロードすることも可能ですが、(画像の枚数が多い場合などは特に)記事エディタからアップロードするほうが圧倒的に楽です。記事エディタからでも画像フォルダからでもアップロードした画像は実は同じ「画像フォルダ」に保存されますので、やりやすい方でアップロードして問題ありません。

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

次は、画像のURLを取得する手順です。

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

1.「管理トップ」で「設定・管理」をクリック

まず、管理トップで画面の左サイドバーにある「設定・管理」というボタンをクリックします。

2.「設定・管理」画面で「画像フォルダ」をクリック

「設定・管理」画面が開いたら、「ブログの各種設定」という一覧の中に「画像フォルダ」がありますのでクリックします。

3.「画像フォルダ」で目的の画像を見つけてクリック

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

4.少し大きく表示された画像を「右クリック」

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

5.右クリックメニューの「画像アドレスをコピー」をクリック

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

これでクリップボードに「画像のURL」がコピーされました。

あとは必要なところに貼り付ければ(ペーストすれば)完了です。

なお、ブラウザの種類やバージョンによっては、右クリックメニューの項目名も変わりますので、使っているブラウザに合わせて読み替えて下さい。

例えば、Edgeで確認してみると「画像リンクをコピー」でした。

また、別の方法として、少し大きく中央に表示された画像を「アドレスバーに向かってドラッグ&ドロップ」するという方法もあります。

この操作によって、アドレスバーに画像のURLがそのまま表示されますので、それをコピーして利用しても良いでしょう。

まとめ

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

画像を使ってアメブロをカスタマイズする際などに必要になると思いますので、よかったら参考にしてください。