リンクボタンを作ってみよう;FC2ブログ・プチカスタマイズ   

リンクボタンを作ってみよう|FC2ブログ・プチカスタマイズ

  このページはFC2ブログ・プチカスタマイズの ・FC2ブログのテンプレートカスタマイズ | リンクのカスタマイズ| リンクボタンを作ってみよう に関する情報を紹介しています。
  FC2ブログ・プチカスタマイズは、FC2ブログをちょっとだけ改造して、使い易くします。  FC2ブログの魅力は、初心者は初心者なりに、上級者は上級者なりにテンプレートやスタイルシートを改造して色々と変えることができるところ。 このブログでは、初心者から中級者向けのFC2ブログカスタマイズ法をあれこれご紹介。  FC2ブログを楽しみましょう。

 


 
 
Top Page > スポンサー広告 > リンクボタンを作ってみよう・FC2ブログのテンプレートカスタマイズ > リンクのカスタマイズ > リンクボタンを作ってみよう


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




web拍手 by FC2←これはFC2拍手。お礼のコメントがあるよ。拍手してみて。 FC2 Blog Ranking

このエントリーをはてなブックマークに追加

 リンクボタンを作ってみよう。

 ボーダーラインの知識があれば、リンクボタンが作れる。

 

 たとえば、通常のリンクなら『 ボーダーライン・スタイルの種類』という風なリンクになる。

 これをボーダーライン+αを利用してボタンのように表示する。

 

リンクボタンの作り方・HTMLに組み込む場合

<a href="http://tadameru2.blog91.fc2.com/blog-entry-142.html" style="font-size:large;color:#FFFFFF;text-decoration:none;border:10px outset #FF3399; background-color:#FF3399; padding:10px; ">ボーダーライン・スタイルの種類</a>

 と記載すると、下のような表示になる。

 

ボーダーライン・スタイルの種類

 

 マウスを乗っけると、ボタン全体がリンクになっているように見えるはず。

 :largeは文字サイズ。

 text-decorationはテキストに下線・上線・打ち消し線を付けたり、点滅させる際に使用する。

⇒:noneテキストに線をつけない。

⇒underlineテキストに下線が付く。

⇒overlineテキストに上線。

⇒line-throughテキストに打ち消し線。

 

 border:10px outset はボーダーの太さが10px、 outset は、ボーダーラインの種類。

 background-color:#FF3399のbackground-colorは背景、:#FF3399はカラーコード。

 paddingは領域内のスペースを指定する。

 

リンクボタンの作り方・外部スタイルシートで組み込む場合

HTMLの記載

<div class="b1 a"><a href="http://tadameru2.blog91.fc2.com/blog-entry-142.html">
ボーダーライン・スタイルの種類</a></div>

<p class="b1 a"><a href="http://tadameru2.blog91.fc2.com/blog-entry-142.html">
ボーダーライン・スタイルの種類</a></p>

 

外部スタイルシートの記載

.b1 a{
font-size:large;
color:#FFFFFF;
text-decoration:none;
border:10px outset :#FF3399;
background-color:#FF3399;
padding:10px;
display:block;
}

 

外部スタイルシートでリンクボタンを作った場合の例

ボーダーライン・スタイルの種類

 

display:block;が無い場合の例

ボーダーライン・スタイルの種類



サイト内の同タグへのリンク: テンプレート  スタイルシート  HTML  リンク 
他のサイトへのタグリンク : テンプレート スタイルシート HTML リンク

web拍手 by FC2←これはFC2拍手。お礼のコメントがあるよ。拍手してみて。 FC2 Blog Ranking
このエントリーをはてなブックマークに追加
関連記事リスト
  カテゴリ名:[リンクのカスタマイズ]
コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://tadameru2.blog91.fc2.com/tb.php/150-baa87081
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。