はてなブログ制作者のためのHTML講座

ブログの魅力は、HTMLを知らなくてもWebを作成できること。とはいえ、ブログの見た目をカスタマイズするとなると、やはりHTMLの知識があった方が応用が効き便利です。そこで、「はてなブログ」ユーザーに向けて簡単なHTML講座を開催します。ブログ制作に限定すれば、覚えるべきHTMLはほんの少ししかありません。よって、すぐにHTMLを理解できるようになると思います。

HTMLの基本、開始タグと終了タグ

「はてなブログ」ユーザーの多くは、「見たまま編集モード」でブログ記事を作成していると思います。この編集画面にある「HTML編集」タブをクリックすると、現在作成しているページのHTMLを参照できます。たとえば、このページの場合、以下のような感じでHTMLが表示されます。 

はてなブログ、写真を横に並べて配置

はてなブログに2枚の写真を続けて掲載すると、以下のように、それぞれの写真が縦に並べて配置されます。写真のサイズを小さくしても、写真は横に並んでくれません。

MEGA BEEFにてステーキ半額フェア実施中！

塚井駅の北口にあるステーキ・レストラン「MEGA BEEF」にて、ステーキ半額フェアが実施されています。通常、1080円のステーキ・ランチが540円で食べられる、とってもお得なフェアです。ただでさえステーキ・ランチは割安なのに、さらに半額というのが凄く魅力的ですね。

フェアの開催期間は8月31日まで。もちろん、フェア期間中もポイントを貯めることができます。お値打ちにステーキを食べたい方は、この機会にぜひ訪れてみてはいかがでしょうか？

はてなブログ、自動リサイズの画質を調整するには？

前回の記事で紹介したように、「はてなブログ」は、アップロードした画像を自動的にリサイズする仕組みになっています。このとき、アップロード方法に応じて「リサイズ後の画像サイズ」が変化することも覚えておく必要があります。今回は、このリサイズ機能の画質を調整して、画像を最適なファイル容量にする方法を紹介しておきましょう。

「はてなブログ」に掲載した画像は自動的にリサイズされるの？

今回は、「はてなブログ」に画像を掲載するときの注意点について紹介していきましょう。画像の掲載方法そのものは別に難しくありませんが、その裏で「どのような処理が行われているか？」を知っておかないと、ブログ運営において大きなデメリットを被るかもしれません。「はてなブログ」のユーザーは、いちど確認してみてください。

「はてなブログ」から画像をアップロードした場合

ブログに画像を掲載する方法は大きく分けて2通りあります。1つ目の方法は、「はてなブログ」の編集画面から画像をアップロードする方法です。

以下の写真は、2048×1360ピクセル、1.29MBの写真を「はてなブログ」の編集画面からアップロードした場合の例です。

この場合、画像のサイズが自動的に1024×680ピクセルにリサイズされ、ファイル容量も483KBに縮小されます。このように「はてなブログ」の編集画面から画像をアップロードすると、長辺が1024ピクセルになるように自動リサイズが行われる仕組みになっています。

 なお、長辺が1024ピクセル以下のJPEG画像をアップロードした場合は、自動リサイズが行われず、アップロードした画像がそのままブログ掲載用として利用されます。

「はてなフォトライフ」からアップロードした場合

画像を掲載する2つ目の方法は、あらかじめ「はてなフォトライフ」に画像ファイルをアップロードしておき、この画像をブログの編集画面から選択して掲載する方法です。

この手順で「先ほどと同じ写真」をブログに掲載すると、以下のようになります。

記事上での見た目は何も変わりませんが、こちらの画像は800×531ピクセルにリサイズされ、ファイル容量は306KBに縮小されます。このように「はてなフォトライフ」に画像を直接アップロードした場合は、長辺が800ピクセルになるように自動リサイズされる仕組みになっています。

アップロード方法に応じて異なる画像サイズ

以上の内容をまとめると、

ブログの編集画面からアップロード
　　⇒ 長辺1024ピクセルに自動リサイズ

「はてなフォトライフ」にアップロード
　　⇒ 長辺800ピクセルに自動リサイズ

となります。つまり、アップロード方法に応じて画像のサイズ（ピクセル数）が変化することになります。ピクセル数が違うので、当然ながらファイル容量も異なります。

些細な問題かもしれませんが、実はこれ、ブログを運営する上で「意外と大きな問題」に発展する可能性があります。そこで次回は、「はてなブログ」における画像ファイルの問題点について紹介していきましょう。