HatenaBlog にアップロードした写真を小さくする

HatenaBlog にアップロードした写真を小さくする

はてなブログでは、記事に写真を貼ることができます。

ただ、とても大きく表示されて、困ることがあります。
スマートフォンではキレイなのに、パソコンでは写真が超巨大…↷( ó╻ò)

イメージに近い形で写真を載せるために、いくつかの方法を紹介します。

---

はてなブログを書くときに変更する

---

編集モードが みたまま の方

写真を貼り付けた後、drag & drop で好きなサイズにします。

---

編集モードが はてな記法 の方

写真を貼り付けた後、divタグ で囲みます。
divタグの style で width を設定して好きなサイズにします。

<div style="width: 320px;">
  [f:id:xxxxxx:plain]
</div>

---

編集モードが Markdown の方

写真を貼り付けた後、divタグ で囲みます。
divタグの style で width を設定して好きなサイズにします。

<div style="width: 320px;">
  [f:id:xxxxxx:plain]
</div>

---

---

はてなブログを書くまえに変更する

---

はてなフォトライフ

はてなブログでは、投稿した写真は はてなフォトライフ に保存されます。
保存先は はてなフォトライフ の「Hatena Blog」フォルダです。

なんと、このサービスでは、写真のサイズを変更できました。

---

写真を選択したあと、「画像の編集」を選択します。

下のような画面になります。
そこで、 画像サイズ を好きな値に変更して、保存します。

保存は、左下の「この内容に変更する」ボタンです。

これで、好きな大きさの写真が新しく作られます。

元の写真も残ったままになるので、必要に応じて削除して、終わりです。

---

どちらの方法がいいの？

---

はてなブログで大きさを変えると、
記事の写真をクリックしたときには、もとの大きさの写真を表示できます。

記事の上でだけサイズが変わるので、こちらが おすすめ です ٩(•ᴗ• ٩)

---

逆に、はてなフォトライフで大きさを変えると、
記事の写真をクリックしたときにも、同じ大きさの写真が表示されます。

---

---

【追記】Markdown と はてな記法 では、[ ]で囲まれた文字に追記することでも、サイズを変えられました。

<div style="width: 320px;">
  [f:id:xxxxxx:plain]
</div>

と同じ効果が、次で実現できます。
「:w320」と追記してます。

[f:id:xxxxxx:plain:w320]

シンプルです。

---

ありがとうございました。