Page 3 of 5 CSS Sprites ルール設定編
この際だからサイトの画像を1枚にまとめてみよう…っていう方は…
Tonttu/テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」マークアップ
Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】
を…参照してそのままボタンを登録してください…
今回はボタン個数も高が知れていますので画像ソフトだけで作ってみましょう…
お好きな色の画像を新規作成して…
前項で作ったボタンをピックツールで位置を指定して重ねていきます…
当サイトの場合 231x42 でこんな感じ…
この画像をそのまま使いたい場合は左右の赤い領域を透過してから使ってください…
出来上がった画像はお好きな場所にホストしておいてください…
Blogger用の外部ファイル保存場所として「GitHub」の「GitHub Pages」を活用しよう
Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Google Drive」
Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Dropbox」
Google Blogger用のファイル保存場所としてのGoogle sites/Picasa
次に…この1枚の画像から各ボタンを切り出すための CSS ルールを指定します…
/* Share Button Sprite --------------------------------------------------------- */ .off01,.off02,.off03,.off04,.off05,.off06,.off07,.off08,.off09,.off10,.off11,.on01,.on02,.on03,.on04,.on05,.on06,.on07,.on08,.on09,.on10,.on11{background-image: url(Sprite 画像の URL)} .off01{width:21px;height:21px;background-position:left top;background-repeat:no-repeat;display:inline-block} .off02{width:21px;height:21px;background-position:-21px top;background-repeat:no-repeat;display:inline-block} .off03{width:21px;height:21px;background-position:-42px top;background-repeat:no-repeat;display:inline-block} .off04{width:21px;height:21px;background-position:-63px top;background-repeat:no-repeat;display:inline-block} .off05{width:21px;height:21px;background-position:-84px top;background-repeat:no-repeat;display:inline-block} .off06{width:21px;height:21px;background-position:-105px top;background-repeat:no-repeat;display:inline-block} .off07{width:21px;height:21px;background-position:-126px top;background-repeat:no-repeat;display:inline-block} .off08{width:21px;height:21px;background-position:-147px top;background-repeat:no-repeat;display:inline-block} .off09{width:21px;height:21px;background-position:-168px top;background-repeat:no-repeat;display:inline-block} .off10{width:21px;height:21px;background-position:-189px top;background-repeat:no-repeat;display:inline-block} .off11{width:21px;height:21px;background-position:-210px top;background-repeat:no-repeat;display:inline-block} .on01{width:21px;height:21px;background-position:left -21px;background-repeat:no-repeat;display:inline-block} .on02{width:21px;height:21px;background-position:-21px -21px;background-repeat:no-repeat;display:inline-block} .on03{width:21px;height:21px;background-position:-42px -21px;background-repeat:no-repeat;display:inline-block} .on04{width:21px;height:21px;background-position:-63px -21px;background-repeat:no-repeat;display:inline-block} .on05{width:21px;height:21px;background-position:-84px -21px;background-repeat:no-repeat;display:inline-block} .on06{width:21px;height:21px;background-position:-105px -21px;background-repeat:no-repeat;display:inline-block} .on07{width:21px;height:21px;background-position:-126px -21px;background-repeat:no-repeat;display:inline-block} .on08{width:21px;height:21px;background-position:-147px -21px;background-repeat:no-repeat;display:inline-block} .on09{width:21px;height:21px;background-position:-168px -21px;background-repeat:no-repeat;display:inline-block} .on10{width:21px;height:21px;background-position:-189px -21px;background-repeat:no-repeat;display:inline-block} .on11{width:21px;height:21px;background-position:-210px -21px;background-repeat:no-repeat;display:inline-block} a:hover .off01{background-position:left -21px} a:hover .off02{background-position:-21px -21px} a:hover .off03{background-position:-42px -21px} a:hover .off04{background-position:-63px -21px} a:hover .off05{background-position:-84px -21px} a:hover .off06{background-position:-105px -21px} a:hover .off07{background-position:-126px -21px} a:hover .off08{background-position:-147px -21px} a:hover .off09{background-position:-168px -21px} a:hover .off10{background-position:-189px -21px} a:hover .off11{background-position:-210px -21px}
左上から OFF、ON の順にクラス名を指定しています…
クラス名はお好きにリネームして OK です…
画像のサイズとポジションはご自身の作成画像により適宜変更してください…
更に…「共有ボタン」全体のスタイルを指定…
/* Share Button --------------------------------------------------------- */ .share-inline-block{position:relative;display:-moz-inline-box;display:inline-block} .share-button_passer-by198{width:21px;height:21px;overflow:hidden}
次項は HTML でのマークアップ方法についてです…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿