新しいテンプレート作りました。 今回はごくオーソドックスな感じの２カラムです。 ところどころにちょっとお花を散らしてみました。 追記でカスタマイズの方法を書きます。 １．上部メニューの編集

<div id="menu">
<a href="<%url>archives.html" onfocus="this.blur();" class="nonborder" title="記事リスト"><span>01.</span>Articles List</a>
<a href="#" onfocus="this.blur();" class="nonborder" title="LoremIpsum"><span>02.</span>Lorem Ipsum</a>
<a href="#"><span>03.</span><form action="./" method="get"><input class="input" type="text" name="q" value="" placeholder="SEARCH" autocomplete="off"/></form></a>
<a href="<%server_url>control.php" onfocus="this.blur();" class="nonborder" title="管理画面"><span>04.</span>Log in</a>
</div>

２番目のメニューはLorem Ipsumの部分を好きな文字に入れ替えて＃のところにアドレスを入れてくださいね。 ２．記事のフッターの編集

<footer class="bottomfooter">
<div class="authorimage"><img src="<%image>"></div>
<div class="authortext">
<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>
<span class="button2">
<nav class="bottomnav">
<ul>
<li class="instagram"><a href="https://www.instagram.com/#/?hl=ja?ref=badge" title="instagramでシェア" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i> <span>share</span></a></li><!--
--><li class="twitter"><a href="http://twitter.com/share?url=<%topentry_link>&text=<%topentry_title>" title="twitterでつぶやく" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i> <span>tweet</span></a></li><!--
--><li class="facebook"><a href="http://www.facebook.com/sharer.php?u=<%topentry_link>&t=<%topentry_title>" title="facebookでシェア" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i> <span>share</span></a></li><!--
--><li class="pinterest"><a href="//www.pinterest.com/pin/create/button/?url=<%topentry_link>&amp;media=<%topentry_image_url>&amp;description=<%topentry_enc_title>" title="Pin it on Pinterest" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i> <span>pin it</span></a></li>
</ul>
</nav>
</span>
</div>
</footer><!-- bottomfooterここまで -->

Lorem ipsum dolor sit amet～の部分はご自分のお好きな文章を入れてくださいね。 あと、インスタのリンクは＃の部分にご自分のＩＤを入れてください。 ３．フッターのナビゲーションの編集

<div class="footer-contents">
<nav class="plugmenu">
<ul>
<li><a href="<%url>archives.html" onfocus="this.blur();" class="nonborder" title="記事リスト"><span class="number">01.</span> Articles List</a></li>
<li><a href="#" onfocus="this.blur();" class="nonborder" title="LoremIpsum"><span class="number">02.</span> Lorem Ipsum</a></li>
<li><span class="number">03.</span><form action="./" method="get"><input class="input2" type="text" name="q" value="" placeholder="SEARCH" autocomplete="off"/></form></li>
<li><a href="<%server_url>control.php" onfocus="this.blur();" class="nonborder" title="管理画面"><span class="number">04.</span> Log in</a></li>
</ul>
</nav>
</div>

これも上部のナビゲーションと一緒ですね。Lorem Ipsumの部分はお好きな文字を入れてください。 ４．ヘッダーの背景画像の変更

/* background-image */
.crossfade > figure:nth-child(1) {
background-image: url('https://file.blog.fc2.com/mysticdiary/green/flower051.jpg');
}
.crossfade > figure:nth-child(2) {
animation-delay: 6s;
background-image: url('https://file.blog.fc2.com/mysticdiary/green/flower052.jpg');
}
.crossfade > figure:nth-child(3) {
animation-delay: 12s;
background-image: url('https://file.blog.fc2.com/mysticdiary/green/flower053.jpg');
}
.crossfade > figure:nth-child(4) {
animation-delay: 18s;
background-image: url('https://file.blog.fc2.com/mysticdiary/green/flower054.jpg');
}
.crossfade > figure:nth-child(5) {
animation-delay: 24s;
background-image: url('https://file.blog.fc2.com/mysticdiary/green/flower055.jpg');
}

５枚設定できるようにしているので、それぞれの画像のアドレスをお好きなものに変更してください。 ５．コメントの背景色の設定 コメント欄では管理人のコメントは背景色を白く設定していますので、 色を変えたい方は、ＣＳＳの

.管理人 .ctriangle{
background-color:#ffffff;
}

の管理人のところをご自分の名前に変更して、背景色を設定してください。