さんログ

色々と発信する雑記ブログ。食レポ、おすすめ発信や情報、メンタル/不思議系など。

タイトルのテキスト
タイトルのテキスト
タイトルのテキスト

【ブログカスタマイズ】画像URLを「はてなフォトライフ」で調べる!

f:id:sanrisesansan:20200818221338p:plain

 

はてなブログ」のカスタマイズでサイトに画像を貼り付けたいけど、画像URLってどうやってしらべるの?

結論からいうと、はてなフォトライフから画像URLを調べることができます。

 

今回は、はてなフォトライフから画像URLを調べる方法を解説します。

ぜひ参考にしてみてください。

 


スポンサードリンク
 

はてなブログ内で画像を挿入する時は「はてなフォトライフ」にアップロードする必要があるよ!

はてなブログで画像を挿入する時は「はてなフォトライフ」にアップロードしなければ使用できません。

アップロード方法は、記事作成時は、記事の編集ページに使いたい画像を「ドラッグ&ドロップ」するか、「写真を投稿」→画像を選択してアップロードで出できます。

 

しかしサイト本体にカスタマイズする時(トップメニューのパーツに画像を入れたい時)などの場合は、貼り付けるHTMLコードに画像URLを貼り付ける必要があります。

f:id:sanrisesansan:20200630215038j:plain

たとえば僕のサイトでは、トップページのヘッダ部分にアイキャッチ画像を表示する場所に画像URLを貼り付けています。

これはバンビさん(id:zuboraca) のカスタマイズ記事で紹介されてるのをありがたく使わせてもらいました。

気になる人は参考にしてみてください。

www.bambi.pro

上記のようにブログパーツに画像を使う時は、画像URLを調べるという手間がかかってしまうんですね。

【手順】「はてなフォトライフ」から画像URLを調べる方法

画像URLの調べ方は、「はてなフォトライフ」を使います。

→https://f.hatena.ne.jp

 

画像がアップロードされていない場合の手順は下記の通りです。

 
記事作成画面からアップロードする場合
記事の編集ページに使いたい画像を「ドラッグ&ドロップック」
記事編集画面にある「写真を投稿」→画像を選択してアップロード
はてなフォトライフ」からアップロードする場合
「アップロード画面」から使いたい画像を選んでアップロード
 

はてなフォトライフ」→(「マイフォト」*経由しなくてもOK)→「アップロード」

ポイント

記事作成画面の「写真を投稿」→矢印マークから「はてなフォトライフ」に入った場合は「アップロード」画面に直接飛びます。

f:id:sanrisesansan:20200630222218j:plain

 

f:id:sanrisesansan:20200630222220j:plain

 

f:id:sanrisesansan:20200630222222j:plain

アップロード画面


「旧アップローダーはこちら」→「ファイルを選択」して使いたい画像を選択→選択した時に画面右の「オリジナルサイズの画像を保存」をチェック→「アップロード」

 

f:id:sanrisesansan:20200630223754j:plain

 

f:id:sanrisesansan:20200630223757j:plain

「フォルダを編集」(アップロード後はそのまま移行)画面でカーソルを合わせて「選択」をチェック→画面上にある「ブログに貼り付ける」をクリック→HTMLコードをコピペ

f:id:sanrisesansan:20200630224545j:plain

コピペしたコード内の

https://〜.png” (語尾がファイル形式で終わる)

までが画像URLになります。

f:id:sanrisesansan:20200630225531p:plain

こんな感じです。上記のURLだけをコピペしてヘッダ部分のHTMLコードなどのブログパーツのコートに貼り付けていきます。

まとめ

まとめると、サイトカスタマイズで画像をブログパーツに貼り付ける場合は、

・使いたい画像をはてなフォトライフにアップデート

・「ブログに貼り付ける」で画像URLをコピペ

・その中の「“https://〜.png” (語尾がファイル形式で終わる)」を貼り付ける

以上の方法で画像URLを確認していくことが可能です。

はてなProなら、「はてなフォトライフ」は無料で月3GBまで利用できるので、どんどん画像を保存して利用していきたいですね。

最後まで読んでいただき、ありがとうございます。

この記事が良いと思ったら、ポチっ!してくれると嬉しいです!

 ブログ村ランキング」参加中!

ブログランキング・にほんブログ村へ