空の写真ってずっとみていてもあきないですね。 今回はきれいな空の写真を使ってテンプレート作ってみました。 空の写真はお好きな画像にも変更できますよ。 追記でカスタマイズ方法を書きますね。 １．空の写真の変更

.innerimg1{
background-image:url(https://blog-imgs-122.fc2.com/m/y/s/mysticdiary/RomanticSky0.jpg);
background-size:cover;
background-position:center center;
}
.innerimg2{
background-image:url(https://blog-imgs-122.fc2.com/m/y/s/mysticdiary/Sky48.jpg);
background-size:cover;
background-position:center center;
}
.innerimg3{
background-image:url(https://blog-imgs-122.fc2.com/m/y/s/mysticdiary/Sky18.jpg);
background-size:cover;
background-position:center center;
}

これはＣＳＳの方で設定していますので、画像のアドレスをお好きなものに変更してください。 ２．上部ナビゲーションの編集

<nav id="menu">
<ul>
<li><a href="<%url>archives.html" onfocus="this.blur();" class="nonborder" title="記事リスト">Articles List</a></li>
<li><a href="#" onfocus="this.blur();" class="nonborder" title="LoremIpsum">Lorem Ipsum</a></li>
<li><a href="#" onfocus="this.blur();" class="nonborder" title="AobutMe">About me</a></li>
<li><a href="<%server_url>control.php" onfocus="this.blur();" class="nonborder" title="管理画面">Log in</a></li>
</ul>
</nav>

これはいつもとおんなじ。＃のところにリンクをいれて、好きなタイトルに変更するだけです。 ３．記事下の著作者の紹介文

<span class="authorname"><span class="name"><%author_name></span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation. </p>

これはお好きな文章を入れてください。 ４．サイドバーのＨＥＬＬＯ！部分

<div class="plugcontent">
<div class="topimage">
<img class="girls" src="https://blog-imgs-122.fc2.com/m/y/s/mysticdiary/girls_201808151112060f7.jpg">
<span class="hello">Hello!</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

これはｉｍｇの部分をお好きな画像アドレスに差し替えてください。 あと英字の部分はお好きな文章を入れてください。 あと今回も関連記事は３つに設定するときれいに並ぶようにしているので、 お好きな方はブログの設定で表示数を３つに設定してください。