mysticdiary

〜vintage romantic web design〜

新しいテンプレート

ajisai.jpg

新しいテンプレート作りました。
今回はごくオーソドックスな感じの2カラムです。
ところどころにちょっとお花を散らしてみました。


追記でカスタマイズの方法を書きます。

1.上部メニューの編集
<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>

2番目のメニューはLorem Ipsumの部分を好きな文字に入れ替えて#のところにアドレスを入れてくださいね。

2.記事のフッターの編集
<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~の部分はご自分のお好きな文章を入れてくださいね。
あと、インスタのリンクは#の部分にご自分のIDを入れてください。

3.フッターのナビゲーションの編集

<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の部分はお好きな文字を入れてください。

4.ヘッダーの背景画像の変更
/* 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');
}

5枚設定できるようにしているので、それぞれの画像のアドレスをお好きなものに変更してください。

5.コメントの背景色の設定

コメント欄では管理人のコメントは背景色を白く設定していますので、
色を変えたい方は、CSSの
.管理人 .ctriangle{
background-color:#ffffff;
}

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



関連記事
baorin

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

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/611-56a99821