【ブログの楽しみ方】バナー画像のサイズを微調整する【ココログ】

この記事の目的

この記事は、HTMLタグの知識があまりない方でも『HTMLの編集』で簡単なタグの編集ができるように説明するものです。前提として、このブログのカテゴリ『cocologの楽しみ方』の過去記事を理解しているものとします。

バナー画像のアップロード

以下に公式FAQを提示します。

1. ファイルマネージャーでファイルを管理する方法を教えてください
2. バナー画像によるリンクをブログのサイドバーに表示する方法を教えてください

1はファイルマネージャーにファイルをアップロード方法で、バナー画像をアップロードする場合に参考になります。2はバナー画像を「メモ」タイプの「マイリスト」を使用してサイドバーに表示する方法を説明しています。

画像のアップロード方法については、あまりお薦めはしませんが、ダミーのブログ記事やwebページを使用して行うこともできるので下に示します。

新規記事を作成し、通常の方法でバナー画像をココログ上にアップロードします。この時、「ページに表示する画像サイズ」は「アップロードした画像をそのまま表示する」を指定します。

記事に貼り付けた画像をバナーとして使用する方法は『【ブログの楽しみ方】リンク先を別タブまたは別ウィンドウで開かせるには？【ココログ】』の「画像にリンクを貼る」で既に説明したので省略します。

この方法で画像をココログにアップロードした後でこの記事を削除しても、画像が削除されるわけではありません。

あまりお薦めできないと書いたのは、記事を使って画像をアップロードすると、ブログに掲載した画像が混在ししてしまい、この画像を差し替えるのが面倒（「マイフォト」の「ブログにアップロードした画像」は一覧性が低い）なためです。

「ファイルマネージャー」を使用すれば、自分で、例えばバナー用のフォルダやアイコン用のフォルダなどを自由に作成できるので管理しやすく、既存のファイルと同じ名前でアップロードしようとすると一度警告が出てファイルの差し替え（上書き）が可能だからです。

画像サイズの微調整

下は「アップロードした画像をそのまま表示する」でバナーをこの記事に貼り付けたものですが、

この部分のHTMLタグを見てみると、下のようになっています。

<img border="0" alt="Banner_hallo" title="Banner_hallo" src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2013/02/28/banner_hallo.png" />

■ブログ記事と画像は別々に存在する

「src="～"」という記述がありますが、これは画像名を指定するものです。ここで理解する必要があるのはブログ記事に画像を貼り付けても、あくまでも「banner_hallo.png」という画像自体は背景色を付けた「http://daishi100.cocolog-nifty.com/photos/uncategorized/2013/02/28/」という場所にあるということです。（この背景色の部分を「パス」（path）と呼びます。つまり、画像に辿り着くための道筋です。）

「src="～"」タグによってその記事に画像が表示されているだけなので、記事を削除してもアップロードした画像が削除されるわけではありません。

<img>タグ内のその他の要素を簡単に説明すると、「border」は画像の周囲に表示する境界線の太さで、「0」（ゼロ）なので、境界線は表示されません。「alt」は代替文字で、画像を誤って削除した場合などで表示する画像が存在しないときに画像の代わりに表示される文字です。「title」は画像の上にマウスを置いたときに表示される文字です。（下図参照）

■画像の表示上のサイズを変更する

ブログ上に画像をアップロードする際、画像の横幅を指定することができますが、例えば「220ピクセル」とした場合、『HTMLの編集』で見ると「 width="220" height="272"」のように記述されています。これは、横幅（width）を220にしたために、縦横比を維持するために高さ（height）が自動的に272に設定されたためです。

バナーをサイドバーに表示する場合、予め適切なサイズに縮小しておく方がいいのですが、実際にサイドバーに表示してから他のバナーとのバランスで、サイズを微調整したくなるケースがあります。

その時は、この横幅と高さの数字を変更するのですが、横幅と高さは片方だけを指定することが可能で、例えば横幅だけを指定すると、縦横比を崩さないように自動的に高さを調節してくれます。

「ご挨拶＆ゲストブック」のバナーは実際は「192px × 58px」のサイズなのですが、例えば横幅を150ピクセルに変更する場合は、「width="150"」という記述を手入力で追加します。

<img width="150" border="0" alt="Banner_hallo" title="Banner_hallo" src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2013/02/28/banner_hallo.png" />

高さを指定していないにもかかわらず、自動的に高さも変わっていることが分かります。

実際のサイズより拡大すると画質が落ちるので避けた方がよいのですが、少しだけ縮小したい場合、「width」と「height」を知っておくと便利です。

　　

■マイリスト（「メモ」）の使い方補足

マイリストには項目を複数作成できますが、項目を複数作成すると新しく作成したものが上に表示され、順序を変えられないのがやや使いづらい点です。

下の画像は、この記事を書いている時点での「このサイトに関して」というマイリストの一部を切り取ったものですが、「ご訪問ありがとうございます。．．．」と書かれている画像は単純に画像を表示しただけ、「ご挨拶＆ゲストブック」と書かれた画像はバナーとしてリンクを貼っています。

このマイリストでは、一つの項目だけを使っており、実際の記述は下のようになっています。

<img src="http://daishi100.cocolog-nifty.com/buhin/hallo.png" border="0"  width="200" >
<br /><br />

<a href="http://daishi100.cocolog-nifty.com/blog/hallo.html"><img src="http://daishi100.cocolog-nifty.com/banner_hallo.png" /></a>
<br /><br />

色を付けた部分はここまでに既に説明したので省略しますが、要素と要素の間の行を開けるためには、改行タグ「<br />」を使用しています。

「メモ」では、キーボードの改行キー（Enterキー」で見た目に改行しただけでは改行されないので、明示的に改行タグを記述する必要があります。

このテクニックを使えば、複数要素を一つの「項目」内に記述することが可能です。

（拍手はブログ主のモチベーション維持程度の目的です。面白かった、役に立った、等々、宜しければクリックしてください。）