セミナー行こうよ!

2006年03月08日

リンクのボタン

先日、お客さんと話したことです。

リンクをボタンで作っているのですが、できればテキストリンクがいいですよとアドバイスしました。でも、好みもありますし、今のデザインを大幅に変更したくないとの事で、ボタンっぽいテキストリンクの作り方を説明しました。

普通、リンク用のボタンはこんな感じだと思います。
100-20-text

これをテキストリンクにする場合の作業を説明します、作業はホームページビルダーで簡単にできます。

※ボタンの大きさは、100px×20pxと仮定します。

まずは、100px×20pxのボタンの背景となる画像を作成します。
100-20

まず、テーブルを作ります、テーブルの属性でHを100px、Wを20pxに指定、背景画像を先ほど作った画像に指定します。そして、セルに私のブログと書いて、中央揃え、(今回は)フォントサイズを小さくしました。

ソースで表示するとこんな感じです。

<TABLE width="100" height="20" background="100-20.gif">
<TR>
<TD align="center">
<A href="http://moko.livedoor.biz/">
<FONT size="-1">私のブログ</FONT>
</A>
</TD>
</TR>
</TABLE>

出来上がりのイメージはこうなります
link
(すみません、これも画像で作ってしまいました)

更に、リンクの文字色を設定すれば完成です。

本来ならば、背景画像やテキストなどはスタイルシートで指定すると、もっと自由度が高まるのでお奨めの方法です。

-------------------------------
3月20日
広告戦略 アクセス数を増やすために必要なこと!


mokomix at 07:53│Comments(8)TrackBack(0)WEBの小技 

トラックバックURL

この記事へのコメント

1. Posted by ITおやじ   2006年03月08日 14:36
自分でウェブインテグレーションの会社を経営していながらほとんど作り方を分かっていません。。。
いかんですね。
2. Posted by 川島康平/ネクストサービス   2006年03月08日 15:00
私はドット単位の微調整に時間がかかりすぎて、仕事が遅いのが欠点です・・・。

↓みたいなCSS、あまり見たことありません(笑

.mt00{margin-top:0px;}
.mt02{margin-top:2px;}
.mt04{margin-top:4px;}
.mt06{margin-top:6px;}
.mt08{margin-top:8px;}
.mt10{margin-top:10px;}
.mt12{margin-top:12px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt25{margin-top:25px;}
.mt30{margin-top:30px;}
3. Posted by 栗原敏彰   2006年03月08日 15:04
5 中沢さんは、WEBの超プロなんですね。
うらやましいです。むずかしいHTMLなんか簡単そうに、さばいていますね。
4. Posted by 中沢   2006年03月08日 23:23
ITおやじさんこんばんは

いや、こんなことを社長ブログに書いている
ことじたいが間違っていると思うのです、
作成と経営は別物にしないといけないと
思っているのですが。
こんばんは
いつも勉強になります
わたしのブログは文章と写真以外は
スタッフに手伝ってもらってるので
そろそろ自分でしなくちゃ
いけないなぁ
と思っているのですが
6. Posted by 中沢   2006年03月09日 01:05
川島さんこんばんは
こっ・・細かいですね
私は、そこまで
性格的に出来ません。
7. Posted by 中沢   2006年03月09日 01:08
栗原さんこんばんは

いや、超が付くほどのことは
出来ていません。
でも、WEBは情報です、中身です、
難しい技術など知らなくても
情報が整理されて詰まっている
栗原さんのブログみたいな物が
必要とされているんだと思います。
8. Posted by 中沢   2006年03月09日 01:11
やまちか社長こんばんは

・・・あの、ハードスケジュールを
こなし終わって、夜中はブログの
更新・コメントですか。
さすが、パワーが違いますね。

社員の方にやってもらえる部分は
任せちゃっていいのじゃないかなと
思いますが?

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔   
 
 
 
最新記事
コメント



tomcat.co.jp & web-seminat.jp
ホームページ制作/ マーケティングセミナー/ 中小店は情報発信で活!/