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

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

スポンサーサイト

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

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

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

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

【 HTML #左メニュー 】

<div id="menu1Block">から下が左のメニューです。

<!-- ここから -->
<div class="menuBlockHead">
<div class="menuBlockTitle">見出し</div>
</div>
<div class="menuBlockBody">
<div class="menuText">
<ul>
<li>リスト内容</li>
<li>リスト内容</li>
</ul>
</div>
</div>
<!-- ここまで -->

<div class="menuBlockHead">
<div class="menuBlockTitle">見出し</div>
</div>
<div class="menuBlockBody">
<div class="menuText">
リスト内容
</div>
</div>

上はリストで表示する場合で、下はリストなしの場合です。
赤文字が変更部分です。
元からあるメニューを削除する場合には<!-- ここから --><!-- ここまで -->に当たる範囲を消してください。

【スタイルシート #左メニュー】

/* 左menu 要素 */
#menu1Block {
float : left;
width : 180px;
margin: 20px 0px;
background-image: url(http://blog2.fc2.com/template/gray/image/menu_back.gif);
}
.menu1BlockBase {
width : 180px;
background-image: url(http://blog2.fc2.com/template/gray/image/menu1_top.gif);
background-repeat: no-repeat;
padding: 3px 0px 0px 0px;
}
.menuBlockHead {
width : 174px;
background-color: #708B84;
margin: 0px 3px;
}
.menuBlockTitle {
padding: 4px 10px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
.menuBlockBody {
width : 174px;
margin: 0px;
padding: 0px;
}
.menuText {
font-size: 10px;
padding: 5px;
color: #333333;
line-height: 120%;
}
.menuText ul {
padding: 0px 5px 0px 10px;
margin: 2px;
}
.menuText ul li {
padding: 0px 5px;
margin: 5px;
list-style-type: none;
border-bottom: 1px solid #DDDDDD;
}
.menuBlockTop {
margin: 0px;
padding: 0px;
}
.menuText form {
margin: 0px 10px;
}
.search {
width: 90px;
}

メニュー内の文字の大きさ10pxと小さめに固定されているので、 可変サイズにしたい場合はx-smallや%での指定に変えてください。
リスト形式にすると、各項目に下線が引かれますが、線を消したり色を変えたり、実線から点線に変えたりもできます。

【 HTML #右メニュー 】

<div id="menu2Block">から下が右メニューです。

<!-- ここから -->
<div class="menuBlockHead">
<div class="menuBlockTitle">見出し</div>
</div>
<div class="menuBlockBody">
<div class="menuText">
<ul>
<li>リスト内容</li>
<li>リスト内容</li>
</ul>
</div>
</div>
<!-- ここまで -->

<div class="menuBlockHead">
<div class="menuBlockTitle">見出し</div>
</div>
<div class="menuBlockBody">
<div class="menuText">
リスト内容
</div>
</div>

左メニューとすべて同じです。

【 スタイルシート #右メニュー 】

/* 右menu 要素 */
#menu2Block {
float : right;
width : 180px;
margin: 10px 0px;
background-image: url(http://blog2.fc2.com/template/gray/image/menu_back.gif);
}

特に変更するような所はありません。

※ 何か問題があればコメントへどうぞ。


ipod_468-60.gif
スポンサーサイト
  1. 2004/12/06(月) 02:08:10|
  2. custom
  3. | コメント:1

コメント

はじめまして。
ブログ初心者なので、カスタマイズの仕方がよくわからなかったのですが、
カスタマイズする事ができました。
大変わかりやすく参考にさせて頂きました。
ありがとうございました。^^
  1. 2005/04/11(月) 01:48:28 |
  2. URL |
  3. aki #uMaVINOY
  4. [ 編集 ]

<%template_post\comment>


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

FC2Ad

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