Milkのメモ帳

日々の思いつきを忘れないようにのメモ用です。

Milkのメモ帳

【はてなブログ】画像の大きさを指定する方法


f:id:maxminkun:20160804142653j:plain

日頃私は、はてなブログでは「はてな記法」のモードで書いています。

この方が慣れれば圧倒的に書くのが早いからです。

それに、画像やブログリンクなども結構簡単に挿入出来ます。

ですが最近、画像貼り付けでちょっとつまづいたので、今回は画像の表示の大きさを調整する方法を取り上げます。

追記:この方法はMarkdown記法でも可能であることを確認しました。


写真の大きさ調整

写真の貼り付け方には幾つかの方法があります。

「写真を投稿」の機能の場合

まずは、一般的な写真の貼り付け方から行きましょう。

例えば、普通に写真を挿入します。

f:id:maxminkun:20160729000141p:plain

いくら何でもデカすぎです。

画像の表示の大きさを調整したいですよね;

「はてな記法」上では以下の様になっています。

[f:id:ユーザ名:画像番号:plain]

plainとは、そのままの状態(ブログの横幅を超える場合はそのギリギリまで)で画像を表示しますということです。

これに、横幅のオプションを付け加えます。

[f:id:ユーザ名:画像番号:plain:w100]

f:id:maxminkun:20160729000141p:plain:w100

この最後に付け加えた”w100”は、横幅(width)のpx幅の指定のオプションです。値を変化させることで伸縮できます。

因みに、縦横比は保たれたままですので、”w(数値)”オプションだけの指定でOKです。

「Googleフォト貼り付け」の機能の場合

今度は、Googleフォトから画像を貼り付けた場合です。

はてなブログではGoogleフォトに保存している画像を貼り付けられますが、その方法については割愛しますね。(簡単に説明すると、記事を書く画面の右に機能追加がありますので、「Googleフォト貼り付け」を有効にして下さい。すると、Googleフォトにアクセスして貼り付けが可能になります。)

さて、そのまま画像を貼り付けると・・・大きいなぁ・・・

因みに、「はてな記法」上では以下の様になっています。

表示されない場合はこちらをどうぞ Googleフォトからの挿入 · GitHub

これに、横幅のオプションを付け加えます。

表示されない場合はこちらをどうぞ Googleフォトからの挿入(横幅指定) · GitHub

「はてな記法」の良いところは、結構な割合でHTMLタグのオプションが使えることです。

今回は、imgタグの中に、”width=100”として、横幅のオプションを記述しました。

つまり、”width=(数値)”オプションを付加します。

これも同様で縦横比は維持されますので、横幅指定だけで大丈夫です。

画像の参照貼り付けの場合

応用編です。と言っても、「写真を投稿」の仕方と同じですけどね。

画像を他のWebから参照する場合です。

http://find-travel.cdn-dena.com/picture/articlebody/28649 (画像参照元:http://find-travel.jp/article/782

この画像の表示の大きさを変更してみましょう。

「はてな記法」上では以下の様になっています。

[http://find-travel.cdn-dena.com/picture/articlebody/28649:image=http://find-travel.cdn-dena.com/picture/articlebody/28649]

これに対して、横幅の指定を行いました。

http://find-travel.cdn-dena.com/picture/articlebody/28649 (画像参照元:http://find-travel.jp/article/782

[http://find-travel.cdn-dena.com/picture/articlebody/28649:image=http://find-travel.cdn-dena.com/picture/articlebody/28649:w100]

最後に、”w100”をオプションで付け加えています。

”w(数値)”で横幅の指定が可能です。

これも縦横比は維持されますので、横幅指定だけで大丈夫です。


最後に

今回は、画像の表示の大きさ指定について取り上げました。

あくまでブログでの表示指定ですので、元々の画像の大きさが変わるわけではありません。その点は注意です。

画像本来の大きさは、画像のアップロード等の容量に関する話なので、加工してからアップロードを行うようにして下さいね。

それでは今回はここまで!!

adios!!