タグでなんちゃってバナーを作る方法２
なんちゃってバナーを作るpart２、です。
今回も意地でもCSSは使いませんよ。
前ページのなんちゃってバナー内文字リンク左寄せに、もうひと手間加えてみる。
↓
PCで見ている方はカーソルを当ててみればわかると思うんですが、文字だけじゃなくボックス全体がリンクになっています。
＜a href="リンク先URL" style="text-decoration:none;font-size:24px;"＞NOVEL＜/a＞
の中にdisplay:block;という記述を追加して、
＜a href="リンク先URL" style="display:block;text-decoration:none;font-size:24px;"＞NOVEL＜/a＞
にするとこうなります。
↓タグ。background-image:url(素材URL)の部分、カッコ→url()は消さないこと。
だんだん本物のバナーっぽくなってきましたが、同時にタグが長くなってきたのですこし削ってシンプルにしてみます。
角丸なしバージョン。左寄せ。
さらに枠線なしバージョン。
この状態でボックス内のリンク色を変更するなら
＜a href="リンク先URL" style="display:block;text-decoration:none;font-size:24px;"＞NOVEL＜/a＞にcolor:カラーコード;を追加して…
＜a href="リンク先URL" style="display:block;text-decoration:none;font-size:24px;color:カラーコード;"＞NOVEL＜/a＞にすればいい。
↓
応用。
ボックス全体をリンクにしたまま、中央寄せにしてボックスの大きさを240×24pxに、文字の大きさを14pxに変えてみる。
さらにfont-weight:bold;を追加して文字自体を太線に。
目を引く必読リンクの出来上がり。
応用その２。もちろんボックス全体リンクの状態のまま、
リンク文字を左寄せにしたうえで、aタグにpaddingをさらに追加し左端から10pxの位置に配置。
改行をなくしてタグを詰めればボックスの間の隙間が無くなります……けど、それはちょっとタップしづらいかも。
first
main
memo
clap
re:
使用素材
ほんとはさらにインラインスタイルシートにa:hoverでボックスをへこましたりロールオーバーの指定もしてみたかったんですが香茶には無理(´；ω；`)
-------キリトリ--------
見えない枠に収納。中央寄せの左寄せ(あれ…意味不明な表現に…)。
↓タグ。
色設定はお好きにどうぞ。ただ背景色は白のほうが素材が映える気がしますが…。
動作確認：管理人のPC(Win7 IE11) Android
2014/09/21