MysticDiary

スティッチ!Stitch!

Posted by baorin   3   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.

3 Comments

オスカー says..."教えてください!"
はじめまして。
初心者でブログを始めました。このテンプレートが気に入って使わせていただいてるのですが、初心者すぎて、上の文章がイマイチ理解で来てません・・・。(-_-;)
上に書かれてるコードはFC2ブログのテンプレート設定の
HTML編集のところにすでに載っているものですか?
Helloの部分の写真と文字を変えたいのですが
上に書かれている記号部分がなかなか見つけられません。
HTML編集内ですか?それともスタイル設定のほうでしょうか?
よろしくお願いします。
2018.10.18 17:46 | URL | #- [edit]
管理人 says..."オスカーさんへ"
こんにちは。テンプレート使っていただきありがとうございます。
上にかかれているコードはHTML編集画面に
のっているコードです。
上記のコードを探していただき、該当部分を変更すれば
カスタマイズできるようになっています。
よろしくお願いします。
またわからないことがありましたらご質問ください。
2018.10.20 10:10 | URL | #i4E9Nobc [edit]
ボロッコリー says...""
なにか勘違いでしたら申し訳ございません
FC2で在宅ワークエントリーのところからきたのですが
在宅ワークの申し込みはそのページからはできないのでしょうか?
全然関係ない方でしたら申し訳ございません
2018.11.03 12:41 | URL | #QwWN2XKo [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/598-d87956ba