MRが楽しい

MRやVRについて学習したことを書き残す

はてなブログに画像をアップロードしてブログのデザインに貼り付ける

本日ははてなブログの小ネタ枠です。
はてなブログに画像をアップロードしてブログのデザインに貼り付ける手順を記事にします。
f:id:bluebirdofoz:20211021030011j:plain

はてなブログに画像をアップロードする

ブログのデザインに画像を利用するには「はてなフォトライフ」に画像をアップロードしておく必要があります。
初めにサービスのプルダウンから[はてなフォトライフ]を開きます。
f:id:bluebirdofoz:20211021030019j:plain

ブログのデザイン用の画像をアップロードするフォルダを作成します。
[フォルダ]欄の[新規]ボタンをクリックします。
f:id:bluebirdofoz:20211021030029j:plain

フォルダの作成ページが開くので[フォルダ名]を入力して[フォルダを作成する]を実行します。
f:id:bluebirdofoz:20211021030037j:plain

次にフォルダへ画像をアップロードします。
作成したフォルダを選択した状態で[アップロード]ボタンをクリックします。
f:id:bluebirdofoz:20211021030046j:plain

アップロードページが開くので、デザインに利用したい画像をドラッグしてアップロードします。
f:id:bluebirdofoz:20211021030056j:plain

これで画像をアップロードできました。
参照の方法を確認するため、[フォルダを編集]ボタンをクリックします。
f:id:bluebirdofoz:20211021030104j:plain

参照したい画像を選択して[ブログに貼り付ける]ボタンをクリックします。
f:id:bluebirdofoz:20211021030112j:plain

これでアップロードした画像を参照するための[HTMLタグ]または[はてな記法]を確認できます。
今回は[HTMLタグ]を利用します。
f:id:bluebirdofoz:20211021030129j:plain

ブログのデザインに画像の参照HTMLを張り付ける

ブログのサイドバーにアップロードした画像を張り付けてみます。
トップページのプルダウンから[デザイン]を開きます。
f:id:bluebirdofoz:20211021030139j:plain

[カスタマイズ]タブを開き、[サイドバー]を開きます。
[モジュールの追加]をクリックします。
f:id:bluebirdofoz:20211021030148j:plain

モジュールの種類一覧から[HTML]を選択し、先ほど取得した[HTMLタグ]を貼り付けます。
[適用]をクリックするとモジュールが追加されます。
f:id:bluebirdofoz:20211021030158j:plain

追加したモジュールを[サイドバー]内の配置したい位置にドラッグします。
これでブログのデザインに画像を貼り付けることができました。
f:id:bluebirdofoz:20211021030206j:plain

参考ページ

nazlife.hatenablog.com