おひさしぶりです。 一雨ごとに暖かくなってきて、もう春だなあ～と感じる今日このごろの管理人です。 超ゆっくりペースですが、またテンプレート作ったので 共有申請してみました。 今回は、ちょっと変わったレイアウトにしてみました。 使い方は特に特別なことはありませんが、追記にいつものカスタマイズの方法を書きます。 １．ヘッダーナビゲーションの編集

<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>

＃のところにリンクをいれて、好きなタイトルに変更するだけです。 ２．記事に写真がない場合の、代替画像の設定

<!--body_img_none-->
<div class="itemimg slide-top" data-plugin-options='{"speed":500,"offset":-100}'>
<a href="<%topentry_link>" onfocus="this.blur();" class="nonborder"><img src="https://file.blog.fc2.com/mysticdiary/bringmewithflowers/blingmewithflowers.jpg" class="noimage"></a>
<span class="noimage1">NO IMAGE</span>
</div>
<!--/body_img_none-->

上記のコードはトップ画面などで画像がない場合に表示させる代替画像を設定するところです。

https://file.blog.fc2.com/mysticdiary/bringmewithflowers/blingmewithflowers.jpg

の部分が初期設定の画像です。お好きな画像に変更してください。

<!--body_img_none-->
<div class="itemimg2" style="background-image:url(https://file.blog.fc2.com/mysticdiary/bringmewithflowers/blingmewithflowers.jpg);background-size:cover;background-position:center center;">
<span class="noimage1">NO IMAGE</span>
</div>
<!--/body_img_none-->

次は固定記事で画像がない場合に設定するところです。 上記の

https://file.blog.fc2.com/mysticdiary/bringmewithflowers/blingmewithflowers.jpg

の部分をお好きな画像に変更してください。 変更箇所はあと２カ所あります！

<!--titlelist_area-->
<section id="titlelistarea">
<div class="itemimg2" style="background-image:url(https://file.blog.fc2.com/mysticdiary/bringmewithflowers/blingmewithflowers.jpg);background-size:cover;background-position:center center;"></div>

上記はタイトルリストのエリアで表示する画像を設定するコードです。

<!--search_area-->
<article class="searcharea">
<h4>「<%sub_title>」の検索結果</h4>
<!--topentry-->
<div class="item">
<span class="one">one</span>
<span class="background"></span>
<!--body_img-->
<div class="itemimg slide-right" data-plugin-options='{"speed":500,"offset":-100}'>
<a href="<%topentry_link>" onfocus="this.blur();" class="nonborder"><%topentry_image></a>
</div>
<!--/body_img-->
<!--body_img_none-->
<div class="itemimg slide-top" data-plugin-options='{"speed":500,"offset":-100}'>
<a href="<%topentry_link>" onfocus="this.blur();" class="nonborder"><img src="https://file.blog.fc2.com/mysticdiary/bringmewithflowers/blingmewithflowers.jpg" class="noimage"></a>

上は、検索結果の表示画面で表示する画像を設定するところです。 いずれも画像のアドレスをお好きなものに変更してください。 ３．記事下の著作者の紹介文

<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>

これはお好きな文章を入れてください。 あと関連記事は３つ表示するように設定しているので、ブログの設定で表示記事を３つに設定してください。