リンクをボタン化する

2012-12-05 12:42:34 | ブログカスタマイズ
■エディタ遊びがやめられない!

いや~最近のHTMLとCSSって進化しているんですね~! このところ開眼中です!!

このブログで時々表組みしたいときがあったのですが、テーブルタグを書くのが
めんどくさいのでテキトーにテキストでお茶を濁していました。分かればいいと…

そんな知的怠惰を激しく後悔させる、ブログのテキストエディタ!世界は確実に進化していた!!

下を見ている場合ではなかった。上を見て歩こう!です。

私はHTMLの知識は20年前の知識しか持っていなかったので、人のサイトの構築を
口実に知識をアップデートです。 とりあえず、ブログをHP化するという手法で数日で
サイトは完成したのですが、それを高度化するプロセスで色々いじくり回して古い知識を
アップデートしようという!という魂胆?もくろみ?企画?なのですが・・・(^^)

なんだか、世界の進化に溜息。 まぁ基本を知っているから楽しく勉強できるわけですが、
CSSを使いこなせば、画像ファイルが限りなく要らなくなってくるな~、すごいな~と
思うようになりました。

昔は画像編集がものすごく重要でした。ちょっとしたリンク用のバナーなんかは
画像を容易してそれに<img src=> と <a href=>で書くものだと思っていました。

世間は親切でこんなバナー作成サイトが一杯。アイコンだってネット上で無料で作れるの
ですが。

バナー自動生成サイト:http://www.bannerkoubou.com/
ファビコン生成サイト:http://ao-system.net/favicon/

なので素材サイトを検索して良さそうな素材を見つけるまでが時間が掛かる…
人のサイトだし、デザイナーでもないのでどれを選んでいいのか分からない…(汗)

バナーに何を使うかとか、作るっていうのは専門外っていうか、今ひとつ基本的ナルールを
知らないので、「参ったな…」でした。

でも実は世間は画像が限りなく要らないように進化していたのです!

■ タグにCSSを埋め込む

ところが、昨日、

「あ!そうだ! 外部CSSファイルのPaddingが思ったとおりに有効にならないなら、
 いちいちHTMLにCSSでスタイルを埋め込んじゃえ!」

と思いついてから、開拓中なのが、HTMLタグにスタイルを埋め込む手法・・・コレは使えます!!!

なんともうバナー画像イラナイ・・・全部コーディングで解決できる。

例えばこんなことができるんです。
リンクなのにボタン風
<a hred=>タグの中だけでなく、Pタグにも、何のタグにでもCSSでスタイルを与えれるんです! へぇ~!! 

リンクなのにボタン風

ちなみに上の二つのボタンのコードは

<a style="
font-size:20px;      
font-color:#D3CCFF;      
font-weight: bold;      
display:block;   …★   
width:300px;      
padding-top:10px;      
padding-bottom:10px;      
text-align:center;      
border:2px solid;      
border-radius: 10px;  …★     
border-color:#B593FF ;      
background-color:#FFD8F0;      
box-shadow:5px 5px;
" 

href="" 
target="_blank" 
title="test"> 
リンクなのにボタン風
</a> 


<a style="
 font-size: 5em;    
 font-color: #ffcc00;    
 display: block;    …★   
 width: 200px;    
 padding-top: 10px;    
 padding-bottom: 10px;    
 text-align: center;    
 border: 3px solid;    
 border-radius: 10px;    
 border-color: #00261C;    
 background-image: url('http://blog-imgs-53.fc2.com/m/t/g/mtgd3chan/mikami545.jpg');        background-size: 200px;    
 background-repeat: no-repeat;    
 background-position: center bottom; …★

" title="test" 
href="(URL)" 
target="_blank"> 
 
リンクなのにボタン風 </a> 
です。 私的には …★をつけたCSSプロパティが目からウロコでした! <a要素>もブロックに変換できるとは!! すごいなー!! 

最新の画像もっと見る