2010年05月01日

ブログバナーの作り方(一例)

日本ローカルでは200×40サイズが多い(一応世界標準と言われているのは88×31)
このサイズで画像を作成。GIFで作成するのが一般的(jpg,png,gifの何れか)64KB以内
画像はjpgで加工修正して、必要ならgif,pngに変換する方が簡単

基本的に<a href="リンク先のアドレス">リンクしたいテキストや画像</a>でリンクに。
target="_blank" は別ウインドウで開く。border="0" は枠線太さ 0 。
=============================================================
<a href="リンク先のアドレス" target="_blank"><img src="画像の保存先アドレス" width="画像の幅" height="画像の高さ" border="0" alt="画像が表示されない場合のテキスト表示" title="マウスポインタした時の表示" /></a>
=============================================================
※<div align="center">センタリング</div>

1.ブログを拡大しプリントスクリーンでjpg保存
2.トリミングソフトbuffで、比率(200x40,88x31)を決めて[ブログ名と説明]を切取り
3.その画像を適当に縮小、必要ならgif,pngに変換
4.バナー画像をアップロード(「サムネイル」のチェックを外して)
5.画像の保存先アドレスをコピーして
リッチテキストとHTML編集でリンクの編集(画像の保存先アドレスの貼付け)
HTMLタグ表示で、リッチテキストへの切替が手間なら特殊文字変換ツールを使う
---特殊文字変換ツール--- http://naminorito.blogspot.com/2009/05/html.html

・バナー:サイズ 200 x 40
光と酒の誘惑 画像なし
<a href="http://tamba-yu.269g.net/" target="_blank"><img src="画像の保存先アドレス" width="200" height="40" border="5" alt="光と酒の誘惑" title="by 丹波yu" /></a>

光と酒の誘惑 画像なし
<a href="http://tamba-yu.blog.eonet.jp/" target="_blank"><img src="画像の保存先アドレス" width="200" height="40" border="0" alt="光と酒の誘惑" title="by 丹波yu" /></a>
-----------------------------
・バナー:サイズ 88 x 31
光と酒の誘惑 画像なし
<a href="http://tamba-yu.269g.net/" target="_blank"><img src="画像の保存先アドレス" width="88" height="31" border="3" alt="光と酒の誘惑" title="by 丹波yu" /></a>

光と酒の誘惑 画像なし
<a href="http://tamba-yu.blog.eonet.jp/" target="_blank"><img src="画像の保存先アドレス" width="88" height="31" border="0" alt="光と酒の誘惑" title="by 丹波yu" /></a>

簡単バナーの作り方|まこぷの裏ブログ
http://ameblo.jp/makop0810/entry-10373590033.html
バナーの貼り方 詳しい説明ページ
http://kojo-com.main.jp/bannernosetsumei.html
バナーの作り方
http://www.bannerkoubou.com/start.html
IMGのalt属性・title属性について考える(後編) | HiGash.Net
http://higash.net/20081120/alternate-2.html
 
[ブログバナーの作り方]---rev2010/05
----------------------------------------------------------------
上記は標準エディタ ---(注)特殊文字変換で ["]を変換しないと[mce_href=]が編集途中に出る
269g【追記】標準エディタとリッチテキストエディタ
下記はリッチテキストエディタ

target="_blank" は別ウインドウで開く。border="0" は枠線太さ 0 。
=============================================================
<a href="リンク先のアドレス" target="_blank"><img src="画像の保存先アドレス" width="画像の幅" height="画像の高さ" border="0" alt="画像が表示されない場合のテキスト表示" title="マウスポインタした時の表示" /></a>
=============================================================
※<div align="center">センタリング</div>

・バナー:サイズ 200 x 40
光と酒の誘惑 画像なし
<a href="http://tamba-yu.269g.net/" target="_blank"><img src="画像の保存先アドレス" width="200" height="40" border="1" alt="光と酒の誘惑" title="by 丹波yu" /></a>

・バナー:サイズ 88 x 31
光と酒の誘惑 画像なし
<a href="http://tamba-yu.269g.net/" target="_blank"><img src="画像の保存先アドレス" width="88" height="31" border="1" alt="光と酒の誘惑" title="by 丹波yu" /></a>
 

posted by 丹波yu at 19:39 | PC便利法 | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。