アジアンビートカンケリキッズ

アジアの子供はほとんど裸足だ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

サイドカスタマイズ [ black ]

サイドバーカスタマイズ : もくじ

テンプレート [ black ] のサイドバーをカスタマイズする方法を説明します。

【 HTML 】

<!-- ここから -->
<h3>メニューの見出し</h3>
<ul>
<li>リスト内容<span>(日付)</span></li> <!-- <span>タグは必要なければ消し -->
<li>リスト内容<span>(日付)</span></li>
</ul>
<!-- ここまで -->

<h3>メニューの見出し</h3>
メニューの内容

上がリストで表示する場合で、基本的には下のように普通に書き込んで問題はありません。
赤文字が変更部分です。

既存のメニューを削除する場合は、<!-- ここから --><!-- ここまで -->の範囲を消してください。

【 スタイルシート 】

.right {
background: #000;
width: 200px;
border-bottom: 1px solid #777;
border-left: 1px solid #777;
border-right: 1px solid #777;

position: absolute;
padding: 5.7em 0.7em 2.7em 0.7em;
top: 0;
left: 7%;
color: #ddd;
}

サイドバー全体の指定です。
枠線が下と左右に引かれています。
上にくっついたレイアウトになっていますが、もしサイドバーの上部に余白を作りたい場合は

margin-top: 任意の数値; /* 上の余白 */
border-top: 1px solid #777;

を書き加えてください。

.right h3 {
font-size: 80%;
font-family: /*Georgia ,*/Verdana ,sans-serif;
font-weight: normal;
color: #bbb;
letter-spacing: 0.1em;
margin: 1.7em 0 0 0;
padding: 0 0.2em 0.2em 0.7em;
background: #000;
border-left: 1px solid #777;
border-right: 1px solid #222;
border-top: 1px solid #777;
border-bottom: 1px solid #222;

}

見出しの指定です。
上下左右の枠線の色を変えることで、ボタンのように見せています。

.right ul.info {
list-style-type: circle;
}
.right ul {
font-size: 90%;
list-style-type: square;
padding: 0.7em 1.2em;
margin: 0;
}
.right ul li {
margin: 0 0 0 0.7em;
list-style-position: outside;
}
.right ul li span {
font-size: 85%;
margin-left: 0.3em;
}

メニューのリストに対する指定です。
自己紹介の部分のリストマーカーは丸、その他は四角になっています。
<span>タグで囲んだ部分(↑HTML参照)が少し小さめのフォントになるように指定されています。

※ 何か問題・変な所・質問があればコメントへどうぞ。


realco
スポンサーサイト
  1. 2004/12/03(金) 00:01:00|
  2. custom
  3. | コメント:0

コメント

<%template_post\comment>


管理者にだけ表示を許可する

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。