Second Life 雑記　

2009年08月20日

❤ソラマメブログカスタマイズ、個別記事の事・・・❤

10:38

修正前

修正後

divをpタグに交換します。
<div class="blogbody">
<div class="main">
<div class="posted">
<div class="menu">

前の記事で新しいテンプレートに使うタグの抽出で書いた部分で、ただ個別記事のタグを抽出してテンプレートに貼るだけではdviタグがテンプレートのレイアウトを崩してしまうのでｐタグにすればそれは解消されるので交換してくださいｗ

まだ見落としがあるかもですがお願いします。

あらなんか文字が変な場所に・・・なおりますた(´ﾍ｀；)

Posted by marimo at 10:38 │TrackBack(0) │SLMaMeブログカスタマイズ

2009年08月19日

❤ブログカスタマイズ簡単にブログヘッダにメニュー❤

19:52

サンプル

小さな画像は拡大出来ます。

HTMLの<div id="container">の下に以下のメニュー用のタグを入れてください

<div id="menu2">

<ulgt;
<li><a href="URL">Home</a></li>
<li class="current_page_item"><a href="">OfficialBlog</a></li>
<li><a href="　">usagi</a></li>
<li><a href="　">kitune</a></li>
<li><a href="http://www.slmame.com/admin/login.php">Log in</a></li>
　　　　　　　　　　　　　　<li><a href="http://slmame.com/index.xml">RSS2.0</a></li>

</ul>

</div>

CSSスタイルシートをデフォルトテンプレートのスタイルシートの一番下に入れてください

/* Menu2 */

#menu2 {
float: left;
width: 999px;　
height: 40px;
}

#menu2 ul {

height: 40px;
margin: 0px;
padding: 0px 0px 0px 10px;
background: url(img001B.jpg) repeat-x;
list-style: none;
}

#menu2 li {
float: left;
padding: 0px 25px 20px 0px;

}

#menu2 a {
float: left;
height: 40px;
padding: 10px 0px 10px 30px;
text-decoration: none;
　　　　font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background: url(redskuma.jpg) no-repeat;
color: #F5A9C3;
}

#menu2 a:hover {
padding-top: 10px 0px 0px 15px;
　　　 background: url(blueskuma.jpg) no-repeat;
　　　　　　　color: #9CF5F9;
}

#menu2 .current_page_item a {
width: 100px;
height: 40px;
text-align: center;
padding: 10px 0px 0px 0px;
background: url(img_orange.jpg) no-repeat;
color: #FFFFFF;
}

説明
まずHTMLを所定の場所に入れます。
次にCSSを所定の場所に入れます。
CSSでの位置調整の説明
CSSの最初の部分から順に説明します。
width: 999px;　をご自分の選んだテンプレートの横幅に合わせます。
background: url(img001B.jpg) repeat-x;　メニューの背景画像　こちらはrepeat-xをno-repeatにする事で画像を固定する事も出来ます。
background: url(redskuma.jpg) no-repeat;　赤い熊の画像です。　ご自分の好みの画像に変えてください
background: url(blueskuma.jpg) no-repeat;　マウスが通過した時の画像（青い熊）
background: url(img_orange.jpg) no-repeat;　固定画像です。ご自分のブログのバナーの色に合わせて色を変更してください。
height: 40px; どうしても画像などの高さを変更したい場合は個の部分も合わせて調整してください
熊アイコン
青い熊
赤い熊
デフォルトテンプレート用のメニュー固定画像4種類

オレンジ

固定画像　色編集用　
大きい

メニュー背景画像　