バナーやリンクボタンをHTMLタグコードで作成する方法
こんにちワ。三浦春馬です。。ワンタンですww
普通、バナーやリンクボタンって、画像加工ソフトやボタン生成サイトで画像を作って、それを画像リンクにさせる事が多いと思います。
ただ、それだと後から変更したい時に、画像そのものを作り変えないとなりません。
今回は、Hタグを使って画像のように見えるリンクボタンを作成する方法を御案内します。
バナーやリンクボタンをHTMLタグコードで作成する方法
こんなのです。
⇓
「ブログを書く」で「HTML表示」にして（タグ編集エディタを採用されている方はそのままで）以下のHタグを「編集画面」の表示させたい箇所に貼り付けます。
<div align="center"><span style="border-style: solid;border-color:#0000ff;background-color:#F2F2F2; border-width: 2px;padding: 10px 74px 5px 74px;border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;box-shadow: 5px 5px 5px #99cccc;"><a href="http://ameblo.jp/wantan-52/" target="_blank"><b><font size="4">⇒この続きは、明日の朝刊で・・</font></b></a></span></div>
※1.緑字の箇所は、 枠線の色です。（※この場合は青。）
※2.青字の箇所に 移動先のURLを記入します。
※3.赤字の箇所に 表示させたいテキスト（文章）を記入します。
※『コードの補足説明』
<div align="center"><span style="border-style: solid;border-color:#0000ff;background-color:#F2F2F2; border-width: 2px;padding: 10px 74px 5px 74px;border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;box-shadow: 5px 5px 5px #99cccc;"><a href="http://ameblo.jp/wantan-52/" target="_blank"><b><font size="4">⇒この続きは、明日の朝刊で・・</font></b></a></span></div>
※4.ピンク色の箇所は、 ボタンの背景色です。（※この場合は、薄い水色。）
※5.紫色の数字が枠線の太さです。大きくすると太くなります。
※6.赤字の箇所の数字が、 境界線からの余白を指定する数字です。左から「上」、「右」、「下」、「左」の順になります。（※「下」の数字が少ないのは、影の分の5pxがあるためです。）
こちらに、以前つくったサンプルが、いくつかあります⇒sample.1
、sample.2※参考⇒色見本と配色サイト - color-sample.com
よかったら参考にして下さいね('-^*)/
猫さまの運動神経ときたら♪
ね！？