« ブログのデザインを始めよう4 | トップページ | ブログのデザインを始めよう6 »

2005/04/03

ブログのデザインを始めよう5

前の記事の右側サイドバー「CSSのお勉強のページめくり」を、編集してブログに複数個設定する場合の、変更が必要なポイントなどを書いておきます。
(ベーシックプランのスタイルシートの編集・設定についてはこちらの記事4件(/// )を参照してください。1.にスタイルシート特性の利用ポイントが説明してあります。)

例として左側サイドバーの「絵画」にもうひとつ設定してみましたので、前の記事と比較して変更点を把握してください。変更したところは青色の文字で表示してあります。
基本的には自分が名づけた変数や関数などの名前を別のものに変更して区別します。画像ファイルの入れ方も最後の方にありますので参考にしてください。
(左の「絵画」は絵の上のart2などの見出しをクリックしますと絵が切り替わります)

使うときは、以下をすべて「マイリスト/リンク/メモ欄」にコピペして、メモ欄を「テキスト表示設定」にします。(実際に表示させるときは、更に「ウェブログ/デザイン/コンテンツ」で、新規に作成した「マイリスト」にチェックを入れて保存し、「並べ方」で表示場所を決めて保存します)
(注意:自分のブログの表示位置のサイズと、この「ぺーじめくり」のサイズを整合してください。画像ファイルは自分のブログサイトにアップロードして自分のブログ名でご利用ください。画像ファイルのアップロードについては、こちらを参照ください。)

<table border="0" width="170" bordercolor="white">
<tr>
<td height="160" bgcolor="#ffffff">
<script type="text/javascript"><!--
var visiblemost=0, visibleZ=8;
function changeArts(order) {
if (document.getElementById) {
if (order == visiblemost) { return; }
document.getElementById("art" + order).style.zIndex = visibleZ + 1;
document.getElementById("icon" + order).style.zIndex = visibleZ + 2;
visiblemost = order;
visibleZ
+= 2;
}
}
//-->
</script>
<style type="text/css"><!--
.art { width:170px; height:160px; border:0px solid gray; position:relative; left:0px; top:0px; z-index:5; background-color:#ffffff;}
#art0 { width:170px; height:137px; position:absolute; left:0px; top:15px; z-index:7;
background-color:#f0f9f6; }
#art1 { width:170px; height:137px; position:absolute; left:0px; top:15px; z-index:5;
background-color:#f0f9f6; }
#art2 { width:170px; height:137px; position:absolute; left:0px; top:15px; z-index:3;
background-color:#f0f9f6; }
#art3 { width:170px; height:137px; position:absolute; left:0px; top:15px; z-index:1;
background-color:#f0f9f6; }
#icon0 { position:absolute; left:10px; top:0px; z-index:8; }
#icon1 { position:absolute; left:50px; top:0px; z-index:6; }
#icon2 { position:absolute; left:90px; top:0px; z-index:4; }
#icon3 { position:absolute; left:130px; top:0px; z-index:2; }
-->
</style>
<div class="art">
<div id="art0"><img alt="" src="http://shugyo.tea-nifty.com/shin_weblog/images/画像ファイル" width="170" height="137" border="0" /></div>
<div id="art1"><img alt="" src="http://shugyo.tea-nifty.com/shin_weblog/images/画像ファイル" width="170" height="128" border="0" /></div>
<div id="art2">よくここまでいらっしゃいましたね。つぎはご褒美かも!?</div>
<div id="art3"><img 省略/><br />省略</div>
<div id="icon0" onclick="changeArts(0);"><a href="#">art1</a></div>
<div id="icon1" onclick="changeArts(1);"><a href="#">art2</a></div>
<div id="icon2" onclick="changeArts(2);"><a href="#">art3</a></div>
<div id="icon3" onclick="changeArts(3);"><a href="#">art4</a></div>
</div>
</td>
</tr>
</table>

|

« ブログのデザインを始めよう4 | トップページ | ブログのデザインを始めよう6 »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/78586/3531180

この記事へのトラックバック一覧です: ブログのデザインを始めよう5:

« ブログのデザインを始めよう4 | トップページ | ブログのデザインを始めよう6 »