Bloggerでの使用画像をCSS Spritesで一枚の画像にまとめる…page3

Page 3 of 3 マークアップ編

前項でも少し触れましたが…

マークアップには inline 要素の「span」か…

block 要素の「div」を使います…

非表示領域で「span」を使っていると…

CSS の指定方法にもよりますが…

何も表示されない場合に「div」を…ってな感じです…

しかしながら「div」だと画像を横に並べたり…

文字列に絵文字を使ったりなどの場面で…

当然ながら改行されてしまいますので…

CSS で「display:inline-block」を追加しましたね…

更に…絵文字は行の高さなどの指定にもよりますが…

文字横にきれいに表示されない方は…

div { vertical-align: text-bottom; }

…を、記述しましょう…

まぁ…通常は「span」を使いましょう…

いくつか個別のケースを…

サイドバー などのh2(見出し) の場合…

「デザイン」「HTML の編集」「ウィジェットのテンプレートを展開」から…

「Ctrl + F」で該当ウィジェットの「h2」を検索する…

<h2 class='title'><data:title/></h2>

…ってな感じになっていると思いますが赤文字部分を削除して…

<span class='h2 画像のクラス名' title='代替文字'/>

…を記述で OK…

title は必須ではありませんが書かなければ…

画像非表示の場合何も表示されません…

記事部分の絵文字などの場合…

<span class='絵文字画像のクラス名' title='代替文字'></span>

を記述で OK…

Java Script の場合…

画像を表示させる「img」タグはほぼ引用符で囲まれていますが…

引用符が被ると表示されませんので…

<span class="表示させる画像のクラス名" title="代替文字"></span>

…などと引用符を書き換えたうえで「img」タグと入れ替えて下さい…

マウスの ON / OFF で画像を切り替える(ロールオーバー)

当サイトの記事終わりに設置しているホームへ戻るリンク画像は…

マウスの ON / OFF で画像を切り替えています…

それぞれ…CSS Sprites では…
マウス OFF 時の画像
.id74{width:162px;height:20px;background-position:left -340px;background-repeat:no-repeat;display:inline-block}
マウス ON 時の画像
.id75{width:162px;height:20px;background-position:-162px -340px;background-repeat:no-repeat;display:inline-block}

…として登録されています…

クラス「id74」の画像にマウスが載った時…

クラス「id75」の画像に切り替えたい訳ですから…

CSS に以下を追記します…

別記したほうが管理が楽なので main-wrapper 部分に書きましょう…

a:hover .id74 { background-position: -162px -340px; }

そのうえで記事の表示させたい個所に…

<span class='id74' title='Back to Home'></span>

…と書けばマウスの ON / OFF で画像が切り替わります…

default の id「#」表記から class「.」表記に変更している事を…

前提としています…下記ページャーから前項を参照して下さい…

尚…ホームページへのリンクですので…

実装では以下のように記述して右寄せにしています…

<div align='right'><a href='//passer-by198-infinity.blogspot.com/'><span class='id74' title='Back to Home'></span></a></div>

使用頻度の高い絵文字などの画像は…

定型文登録をしておくとお便利です…

 Clibor / クリップボード履歴と定型文管理ソフト

 Tonttu / テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」

• Prev
• 1
• 2
• 3
• Next

Tips Header Sidebar Main Footer Current-Label : Universal