mysticdiary

更新はLittleDreamでしています。右のバナーからどうぞ

sincity風?

ニューヨークの素敵な写真を見つけたので、テンプレートに使ってみました。
sin-city(映画は見たことないけど)風がいい感じの写真です。

sincitysample.jpg

ヘッダーの顔写真はお好きに変更してください。

<div id="header-container">
<header>
<img class="face" src="https://blog-imgs-42.fc2.com/m/y/s/mysticdiary/face2.png">
<h1><a href="./" onfocus="this.blur();" class="nonborder" name="top"><%blog_name></a></h1>
<span class="intro"><%introduction></span>
</header>
</div><!-- headercontainerここまで -->

header-containerの中にある画像リンクを変更します。
画像の大きさは100px×100pxです。

さらに背景画像を変更したい方は、cssを変更します。
#header-container{
width:300px;
height:100%;
margin:0;
padding:0;
text-align:center;
background-color:#cccccc;
background-image:url(http://blog-imgs-42.fc2.com/m/y/s/mysticdiary/sincity3.jpg);
background-position:600px top;
background-size: cover;
position:fixed;
top:0;
left:0;
}

ここの画像リンクを変更してください。
画像は多少大きめに作成しておくといいと思います。
サンプルでは、1200px×793pxになっています。

同様に、htmlの上部に記述してあるcssも変更します。
2カ所あります。
#header-container{
width:100%;
height:350px;
background-image:url(http://blog-imgs-42.fc2.com/m/y/s/mysticdiary/sincity3.jpg);
background-position:center top;
position:relative;
}

#info{
width:100%;
position:relative;
background-color: rgba(0, 0, 0, 0.5);
background-image:url(http://blog-imgs-42.fc2.com/m/y/s/mysticdiary/sincity3.jpg);
background-position:center top;
background-size: cover;
}


ファイルは以下からダウンロードしてください。

sincity.zip
DOWNLOAD
関連記事
baorin

いつも超ド近眼眼鏡をかけています。ああ、視力が良くなりたい・・・。好物はおすしです。性格はずぼらで人見知りです。こわい人がきらいです。

1 Comments

名無しさん says...""
素敵なテンプレートですね。
2013.12.09 17:29 | URL | #- [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/453-84973355
← 少しおフランスのかほり・・ → 広告が出るまえに・・・