ちょこちょこいろんなところにアニメーション入れたりしています。
気に入った方はご自由にお使いください。

追記でカスタマイズ方法について書きます。

１．上部ナビゲーションの編集

<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">
<div class="time">
<time datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>" pubdate>
<span class="month<%topentry_month>"></span> <%topentry_day>,<%topentry_year></time>
</div>
<div class="item-no"><%topentry_no></div>
<div class="blogimage">
<a href="<%topentry_link>" onfocus="this.blur();" class="nonborder">
<img src="https://blog-imgs-124.fc2.com/m/y/s/mysticdiary/becca.jpg" class="noimage">
<figcaption>NO IMAGE</figcaption></a>
</div>
</div>
<!--/body_img_none-->

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

https://blog-imgs-124.fc2.com/m/y/s/mysticdiary/becca.jpg

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

<!--body_img-->
<div class="itemimg2" style="background-image:url(<%topentry_image_url>);background-size:cover;background-position:center center;">
</div>
<!--/body_img-->
<!--body_img_none-->
<div class="itemimg2" style="background-image:url(https://blog-imgs-124.fc2.com/m/y/s/mysticdiary/becca.jpg);background-size:cover;background-position:center center;">
<figcaption>NO IMAGE</figcaption></div>
<!--/body_img_none-->

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

background-image:url(https://blog-imgs-124.fc2.com/m/y/s/mysticdiary/becca.jpg);

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

<!--titlelist_area-->
<section id="titlelistarea">
<div class="itemimg2" style="background-image:url(https://a-littledream.com/wp-content/uploads/2018/10/becca1.jpg);background-size:cover;background-position:center center;">
</div>
<article class="titlelist">
<h4>Articles list</h4>
<!--titlelist-->
<%titlelist_eno>:&nbsp;<a href="<%titlelist_url>"><%titlelist_title></a><br />
<footer class="titlelistfooter">(<%titlelist_year>.<%titlelist_month>.<%titlelist_day>&nbsp;|&nbsp;<%titlelist_category>) </footer>
<!--/titlelist-->
<div class="permanentfadeout"></div>
</article>
</section>
<!--/titlelist_area-->

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

<section id="editarea">
<div class="itemimg2" style="background-image:url(https://blog-imgs-124.fc2.com/m/y/s/mysticdiary/becca2.jpg);background-size:cover;background-position:center center;">
</div>

上はｅｄｉｔａｒｅａで表示する画像を設定するところです。

<section id="search-area">
<div class="itemimg2" style="background-image:url(https://blog-imgs-124.fc2.com/m/y/s/mysticdiary/becca.jpg);background-size:cover;background-position:center center;">
</div>

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

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

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