2016/03/30

Milliさんの基本3カラムのカスタマイズ覚え書き

Milliさんのサイトがドメイン移行のためしばらく見れなくなるかもしれないので、今までのと重複するけど自分のためにまとめておくことにしました。
【HTMLテンプレート】

<h1 id="top">{blog_name}</h1>
   ↓
<h1><a href="ブログURL" title="ブログタイトル"><span>ブログタイトル</span></a></h1>

これはタイトル部分を画像に変更した際、画像にトップページへのリンクを張る方法

<!– BEGIN page –>
<div class="page">
{prev_page_link} {page_now}/{page_num} {next_page_link}
</div>
<!– END page –>
   ↓
<!– BEGIN page –>
<div class="page">
{prev_page_link}
<!– BEGIN page_exp –>
{page_navi_exp}
<!– END page_exp –>
{next_page_link}
</div>
<!– END page –>

ページの表示を「#/##」から「1 2 3 4 5 >>」に変更
【CSSテンプレート】
/* 全体の設定 */

a:link {text-decoration: none;}
a:active {text-decoration: underline;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
を追加

background-image:url({site_parts}○○○.gif);

○○○.gifを壁紙にする
/* 配置と色指定 */

div#banner{
height:100px;
color:#FFFFFF;
background-color:#002F65;
}

div#banner{
width:778px;
color:#FFFFFF;
background-color:#110f74;
}
に変更

div#banner h1{
padding:10px 15px 0; ← 取る
font-size:18px;
font-weight:bold;
}

以下を追加
div#banner h1 a{
width:778px;
height:100px;
background-image:url({site_parts}○○○.jpg);
display:block;
}
div#banner h1 span{
display:none;
}

○○○.jpgをバナーに指定

div#banner p.description{
padding:3px 20px;
}

div#banner p.description{
display:none; ← 環境設定でしたブログの説明を表示しない
}

/* その他の設定 */

.pict{
border:1px solid #002F65;
}
を以下の通り
.pict{
border:none; ← 線をなくした
}
text-align:center;
}
img.pict_mb { ← モブログ用画像の設定
float: left;
clear: left;
border:none;
padding-right: 1.5em;
}

.topmemo{ ← ちょっと一言の設定
margin:0px;
padding:20px 25px 30px;
font-size:11px;
}

その他文字の色などを好みの色に変更

dd#archivelist{
overflow:auto;
height:360px;
}

月別記事をスクロール化

ヒトミ

著者:ヒトミ

東京在住。犬のいない生活なんて考えられない!犬中心の毎日を送っています。趣味はアジリティー(ドッグスポーツ)と写真。

Twitterフォロー