こんにちは。 やっと10月らしい陽気になってきましたね。 過ごしやすくなっていきてチョットほっとしています。 さてさて、少々季節はずれ（？）ですが、新しいテンプレートを作ったので申請しました。 トップページ サイドバーを開いたところ 個別記事 カスタマイズ方法については追記で書きます。 １．サイドバーの編集

 <div id="side-hidden" class="side-hidden">
<div class="headerprofile"><img src="<%image>"></div>
<div class="sidetext">
<span class="name"><%author_name></span>
<p>Just let this happen. We just let this flow right out of our minds. Just relax and let it flow. That easy.</p>
<span class="social">
<nav class="sidenav">
<ul>
<li class="instagram"><a href="https://www.instagram.com/#/?hl=ja?ref=badge" title="instagramでシェア" target="_blank"><img src="https://icongr.am/simple/instagram.svg?size=15&color=33333"></a></li>
<li class="twitter"><a href="http://twitter.com/share?url=<%topentry_link>&text=<%topentry_title>" title="twitterでつぶやく" target="_blank"><img src="https://icongr.am/simple/twitter.svg?size=15&color=33333"></a></li>
<li class="facebook"><a href="http://www.facebook.com/sharer.php?u=<%topentry_link>&t=<%topentry_title>" title="facebookでシェア" target="_blank"><img src="https://icongr.am/jam/facebook.svg?size=15&color=33333"></a></li>
<li class="pinterest"><a href="https://www.pinterest.jp/#/pins/" title="Pin it on Pinterest" target="_blank"><img src="https://icongr.am/jam/pinterest.svg?size=15&color=333333"></a></li>
</ul>
</nav><!--sidenavここまで -->
</span><!--socialここまで -->
</div><!--sidetextここまで -->
<nav class="menu">
<ul>
<li><a href="<%url>archives.html" title="記事リスト">Articles List</a></li>
<li><a href="#" title="LoremIpsum">Lorem Ipsum</a></li>
<li><a href="#"><form action="./" method="get"><input class="input" type="text" name="q" value="" placeholder="SEARCH" autocomplete="off"/></form></a></li>
<li><a href="<%server_url>control.php" title="管理画面">Log in</a></li>
</ul>
</nav><!--menuここまで -->
</div><!--side-hiddenここまで-->;

自己紹介文はご自分の好きな文章に書き換えます。 ソーシャルメディアのナビの＃のところにご自分のＩＤを入れてください。 メニューはＬｏｒｅｍｉｐｓｕｍのところをお好きな文字列に変更し、＃にリンクアドレスを 入れてください。

.side-hidden{
width:30%;
height:100vh;
position:fixed;
top:0;
left:-30%;
padding:50px 5%;
margin:0;
background-color:rgba(255,255,255,0.95);
z-index:999;
color:#333333;
box-shadow:0 0 5px #cccccc;
background-image:url(https://file.blog.fc2.com/mysticdiary/freedom/seasunsetside.jpg);
background-position:center top;
background-size:100% 30vh;
background-repeat:no-repeat;
}

トップの画像も変更できます。 ２．ヘッダー画像の編集

#header-container{
width:25%;
height:100vh;
padding:0;
margin:0;
background-color:#ffffff;
box-shadow:0 0 5px #cccccc;
border-right:px #333333 solid;
position:fixed;
top:0;
left:0;
z-index:99;
background-image:url(https://file.blog.fc2.com/mysticdiary/freedom/seasunset.jpg);
background-position:40% center;
background-size:cover;
}

画像のアドレスを変更してください。 ３．個別記事の下の説明文

<div class="author">
<div class="authorimage"><img src="<%image>"></div>
<div class="authortext">
<span class="name"><%author_name></span>
<p>Just let this happen. We just let this flow right out of our minds. Just relax and let it flow. That easy. Let's put some happy little clouds in our world. </p>
<span class="social">
<nav class="authornav">
<ul>
<li class="instagram"><a href="https://www.instagram.com/#/?hl=ja?ref=badge" title="instagramでシェア" target="_blank"><img src="https://icongr.am/simple/instagram.svg?size=15&color=333333"> <span>share</span></a></li>
<li class="twitter"><a href="http://twitter.com/share?url=<%topentry_link>&text=<%topentry_title>" title="twitterでつぶやく" target="_blank"><img src="https://icongr.am/simple/twitter.svg?size=15&color=333333"> <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"><img src="https://icongr.am/jam/facebook.svg?size=15&color=333333"> <span>share</span></a></li>
<li class="pinterest"><a href="https://www.pinterest.jp/#/pins/" title="Pin it on Pinterest" target="_blank"><img src="https://icongr.am/jam/pinterest.svg?size=15&color=333333"> <span>pin it</span></a></li>
</ul>
</nav><!--authornavここまで -->
</span><!--socialここまで -->
</div><!--authortextここまで -->
</div><!--authorここまで -->

英文の部分をお好きな文章に変更し、ツイッターやピンタレストのリンクにはご自分のＩＤを入れてください。 ４．サイドバーの自己紹介の編集

.profile{
width:90%;
height:55vh;
margin:0 auto 50px auto;
position:relative;
color:#333333;
background-image:url(https://file.blog.fc2.com/mysticdiary/freedom/seasunset.jpg);
background-position:center 30px;
background-size:70% 50%;
background-repeat:no-repeat;
padding:0;
background-color:#f6f6f6;
}

画像アドレスをお好きなものに書き換えます。

 <div class="profile">
<div class="about">Just let this happen. We just let this flow right out of our minds. Just relax and let it flow. That easy.</div>
<div class="overlayside"></div>
<span class="hello" data-tilt>Hello</span>
</div><!-- profileここまで -->

画像を変更し、英文の部分を書き直してください。 ５．コメント欄のアバターの変更

.管理人 .comtitle:before{
width:50px;
height:50px;
background-image:url(https://file.blog.fc2.com/mysticdiary/freedom/avater.jpg);
background-position:center center;
background-size:100% 100%;
content:"";
display:block;
margin:0 20px 0 0;
}

管理人のところを自分のユーザー名に置き換えてください。 画像アドレスのところに、ご自分のプロフィール画像のアドレスを入力してください。 ６．代替画像の編集

<div class="itemimg">
<!--body_img-->
<img src="<%topentry_image_url>">
<!--/body_img-->
<!--body_img_none-->
<img src="https://file.blog.fc2.com/mysticdiary/freedom/seasunsetside.jpg">
<p>NO IMAGE</p>
<!--/body_img_none-->
</div><!-- itemimgここまで-->

記事に画像がなかった場合には代替画像が表示されます。 これもお好みで変更できます。