このサイトのリンク用バナーを作りました。ご使用の折は、ダウンロードしてお持ち帰りください。
ソースは左から順に
<a href="http://any-1.com/sozai/"><img src="画像のURL/Animation27.gif" width="88" height="31" alt="web素材屋カラーパレット" border="0"><a/><a href="http://any-1.com/sozai/"><img src="画像のURL/lnk_bn_2.gif" width="88" height="31" alt="web素材屋カラーパレット" border="0"><a/>
<a href="http://any-1.com/sozai/"><img src="画像のURL/lnk_bn_1.gif" width="88" height="31" alt="web素材屋カラーパレット" border="0"><a/>
お気に入りに追加の機能を画像で表示します。
ソース
<a href="javascript:window.external.AddFavorite('http://サイトのurl/','サイトの名前')">
<img src="画像のurl" border="0" alt="お気に入りに追加"></a>
検索ボックスの送信ボタンを画像に変更する方法を紹介します。ついでに先頭にも画像を置いてみました。(この検索ボックスは、機能しないようにしてあります。)
画像を置いていない状態
<center>
<form method=get action="省略 ">
<table bgcolor="#FFFFFF"><tr><td>
<input type=text name=q size=20 value="">
<input type=submit name=btn value="検索">
</td></tr></table>
</form>
</center>
<center>
<form method=get action="省略 ">
<table bgcolor="#FFFFFF"><tr><td>
<img src="画像のurl" width="画像の横幅" height="画像の高さ" alt="search" align="absmiddle">
<input type=text name=q size=20 value="">
<input type=image name=submit src="画像のurl" width="画像の横幅" height="画像の高さ" alt="検索" align="absmiddle">
</td></tr></table>
</form>
</center>
スタイルシートのリスト形式 (li) の背景画像でリストマークにアイコンを表示させると、下の例のように上下・左右の微調整が必要な場合があります。
ボタン素材
アイコン素材
table素材
そこで、background-positionの数値で配置を調整します。
li {
list-style: none;
padding-left: 17px;
background: url(list.gif) no-repeat 0px 0.5em;
}
no-repeat の後ろの数値は、
0px ：左からの画像配置 (左ぴったり)
0.5em ：上からの画像配置 (上から行の高さの1/2) の位置に画像を配置することを示します。emのかわりにpx表示でもよいです。
tableタグを使った素材(このサイトでは、コメント枠・吹き出し/更新履歴/フォトフレームが相当します)を、記事投稿欄に貼り付けると ↓ のようにドローンと間延びする場合があります。
| ◆テキストSAMPLE |
| ここに内容を記入します。 書いた分だけ、縦にどんどん伸びます。 どんどん どんどん |
この現象を解決するには、２つの方法があります。
1.自動改行設定をオフにする
2.ソースの記述を改行なしの１行に修正する
1.はテキスト記述部分も自動改行オフになるため、適当な箇所で改行を入れる必要があり、記事の編集が煩わしくなります。個人的に.は、テキスト部分に影響がない２.をお勧めします。
また、このサイトのようにMovable Typeをお使いの場合は、直前に空き行があると改行が挿入されないという独特の性質を利用して、ソースの直前に１行の空き行をつくるときれいに表示されます。
| ◆テキストSAMPLE |
| ここに内容を記入します。 書いた分だけ、縦にどんどん伸びます。 どんどん どんどん |
