Nekonote

Nekonote(ねこのて)もかりたい

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

このエントリーをはてなブックマークに追加

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

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

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

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


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


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

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

f:id:herrscherinnen:20190331113646p:plain

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

写真を貼り付けた後、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」フォルダです。

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


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

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

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

f:id:herrscherinnen:20190331122642p:plain

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

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


どちらの方法がいいの?


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

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


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



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

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

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

[f:id:xxxxxx:plain:w320]

シンプルです。


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

おすすめ 記事