mysticdiary

vintage romantic web design

freedom

こんにちは。


やっと10月らしい陽気になってきましたね。
過ごしやすくなっていきてチョットほっとしています。
さてさて、少々季節はずれ(?)ですが、新しいテンプレートを作ったので申請しました。

トップページ
freedom.jpg

サイドバーを開いたところ
sidebar.jpg

個別記事
freedompage.jpg

カスタマイズ方法については追記で書きます。
1.サイドバーの編集
 <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ここまで-->;

自己紹介文はご自分の好きな文章に書き換えます。
ソーシャルメディアのナビの#のところにご自分のIDを入れてください。
メニューはLoremipsumのところをお好きな文字列に変更し、#にリンクアドレスを
入れてください。

.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;
}

トップの画像も変更できます。

2.ヘッダー画像の編集
#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;
}

画像のアドレスを変更してください。

3.個別記事の下の説明文
<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ここまで -->

英文の部分をお好きな文章に変更し、ツイッターやピンタレストのリンクにはご自分のIDを入れてください。

4.サイドバーの自己紹介の編集
.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ここまで -->

画像を変更し、英文の部分を書き直してください。

5.コメント欄のアバターの変更
.管理人 .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;
}

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

6.代替画像の編集
<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ここまで-->

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

いつも超ド近眼眼鏡をかけています。ああ、視力が良くなりたい・・・。好物はおすしです。性格はずぼらで人見知りです。こわい人がきらいです。

Leave a reply






管理者にだけ表示を許可する

→ 教会