【iPhoneユーザー必見!】プライム会員でAmazon ミュージック Unlimitedを月額980円にする手順

はてなブログの画像URLを調べる方法は?「はてなフォトライフ」を使って出来ます

悩み人

「はてなブログ」でサイトに画像を貼り付けたいけど、画像URLってどうやって調べるの?

そんな疑問にお答えします。

どうも、ブログ運営者のポチ(@sunrise_033)です。

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

この記事では、はてなフォトライフから画像URLを調べる方法を画像付きで解説してきます。

この記事を書いた人
「高コスパ」大好きブロガー:日の出ポチ

「日常のお得なもの」「グルメ」をテーマにしたブログ2つを運営

当ブログの特徴Amazonサービス・Yahooトラベル・節約Wi-Fi・ダイソー・ワークマン

月間54,000PV/収益5桁達成

目次

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

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

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

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

f:id:sanrisesansan:20200630215038j:plain

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

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

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

上記のようにブログパーツに画像を使う時は、画像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まで利用できるので、どんどん画像を保存して利用していきたいですね。

「ブログ村ランキング」参加中!
PVアクセスランキング にほんブログ村

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次