MysticDiary

mysticな日常

スティッチ!Stitch!

Posted by baorin on   0  0

あいかわらず休職中の管理人です。
なんかシンプルでかわいいテンプレート作りたいなあ~と思い、
CSSで簡単にかわいくする方法ないかなと思って、ブログのあちこちに
存在しているラインをかわいくしてみることにしました。
気に入った方はご自由にお使いください。

stitch.jpg
追記でカスタマイズ方法を書きますね。

1.上部ナビゲーションの編集
<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>

これはいつもとおんなじ。#のところにリンクをいれて、好きなタイトルに変更するだけです。

2.記事下の著作者の紹介文
<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>

これはお好きな文章を入れてください。

3.サイドバーのHELLO!部分
<div class="plugcontent">
<div class="topimage">
<img class="girls" src="https://blog-imgs-122.fc2.com/m/y/s/mysticdiary/girls_201808151112060f7.jpg">
<span class="hello">Hello!</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

これはimgの部分をお好きな画像アドレスに差し替えてください。
あと英字の部分はお好きな文章を入れてください。

あとこれは今後の課題なんだけど、関連記事の表示方法についていろいろ模索しています。
今回は記事を3つ表示するときれいに並ぶようにCSSで設定しているので、気の向いた方は
設定をそのようにしてみてください。

関連記事
baorin

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.

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/598-d87956ba
該当の記事は見つかりませんでした。