素材とタグでなんちゃってバナーを作る方法
敷き詰め素材や写真素材とHTMLでサイトバナーっぽいものを作ってみます。(CSSは使わずあくまでタグだけで、です)
表紙レイアウトのワンポイントとして使ったり、各コンテンツへのリンクボタン(風)にしてみたりしてはいかがでしょう。
ただし、画面上の表みたいなものなので、サイトバナーとして配布することはできません。ご注意を。
バナーは通常200×40pxなので、ボックスをこのサイズに固定。
左寄せ
中央寄せ
右寄せ
background-image:url(素材URL)の部分、カッコ→url()は消さないこと。
ボックス内の文字色を変更するには
＜span style="font-size:24px;"＞SITE TITLE＜/span＞にcolor:カラーコード;を追加して…
＜span style="font-size:24px;color:カラーコード;"＞SITE TITLE＜/span＞にすればいい。(＜＞は実際には半角です。タグを文章で表示させるためにわざと全角にしています)
↑のタグ。
使用素材
素材はjpg形式の写真でもいい。ただし表示位置の指定はしてないので必ず写真の左上が表示される。
元の写真素材
↓
写真がボックス幅(200px)より小さい場合は敷き詰めて繰り返し配置されるので注意。
中の文字をリンクにしてみる。
＜span style="font-size:24px;"＞SITE TITLE＜/span＞の部分を
＜a href="リンク先URL" style="text-decoration:none;font-size:24px;"＞NOVEL＜/a＞に差し替え。
左寄せ
中央寄せ
右寄せ
ボックス内のリンク色を変更するには
＜a href="リンク先URL" style="text-decoration:none;font-size:24px;"＞NOVEL＜/a＞にcolor:カラーコード;を追加して…
＜a href="リンク先URL" style="text-decoration:none;font-size:24px;color:カラーコード;"＞NOVEL＜/a＞にすればいい。
↑のタグ。
応用。角丸の半径を10pxから20pxに拡張。フォントサイズを24pxから20pxに小さくして、さらにリンク色を白(#ffffff)に指定。
タグ。
文字リンクのポジションを細かく指定(positionプロパティ追加)。ボックスの左下に配置。
タグ。
動作確認は管理人のPC(Win7 IE11)とドコモのアンドロイド(arrows)。
2014/09/05