日頃私は、はてなブログでは「はてな記法」のモードで書いています。
この方が慣れれば圧倒的に書くのが早いからです。
それに、画像やブログリンクなども結構簡単に挿入出来ます。
ですが最近、画像貼り付けでちょっとつまづいたので、今回は画像の表示の大きさを調整する方法を取り上げます。
追記:この方法はMarkdown記法でも可能であることを確認しました。
写真の大きさ調整
写真の貼り付け方には幾つかの方法があります。
「写真を投稿」の機能の場合
まずは、一般的な写真の貼り付け方から行きましょう。
例えば、普通に写真を挿入します。
いくら何でもデカすぎです。
画像の表示の大きさを調整したいですよね;
「はてな記法」上では以下の様になっています。
[f:id:ユーザ名:画像番号:plain]
plainとは、そのままの状態(ブログの横幅を超える場合はそのギリギリまで)で画像を表示しますということです。
これに、横幅のオプションを付け加えます。
[f:id:ユーザ名:画像番号: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.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.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!!