上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 よくある、ツイッターボタンやブックマークボタンが画面端にくっついて、いつでも押せるようにしてあるテンプレートを見たことがありませんか?
 非常に簡単にできるように、タグを用意してみました。




タグ説明



HTML
<div class="kotei_bookmarks">
<ツイッター用タグ><br>
<その他のブックマーク用タグ><br>
 :
 :
 :
</div>
※他にもタグを追加できます。「<br>」は改行です。

CSS
.kotei_bookmarks{
position:fixed;
left:0;
top:50%;
z-index:100;
}



 これを、「テンプレート編集画面」にて、それぞれ「HTMLの編集」「スタールシートの編集」のボックスに貼り付けます。

 HTMLの方は、最後の行付近「</body>」の直前に。
 CSS(スタイルシート)も最後の行の後に追加します。

ブックマークボタンを画面固定配置


 スタイルシートをカスタマイズすれば、色んな場所に配置できます。

CSS
.kotei_bookmarks{
position:fixed;
left:0; (画面左からの座標:0px)
top:50%; (画面上からの座標:50%(中央))
z-index:100;
}


 「left」の他に「right」(画面右からの座標)を指定できます。
 「top」の他に「bottom」(画面下からの座標)を指定できます。

 また、背景、余白、ボーダーなども追加できます。

CSS
.kotei_bookmarks{
position:fixed;
left:0;
top:50%;
z-index:100;
padding:10px; (10pxの余白)
border:1px solid #ff0000; (1pxの赤枠)
background:#ffffff; (背景カラーを白に)
}


 詳しくはこちらを参照して下さい。

スタイルシートで遊ぶ part.1(<span>タグ編)
positionを使いこなす


■メニューに戻る
テンプレート簡単カスタマイズ
このエントリーをはてなブックマークに追加
Sat.07.02.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。