MysticDiary

壁紙チェーンジ!

Posted by baorin   11   0

なんとなくかわいい系が続く今日この頃。
今度は壁紙が気軽に変更できる感じにしてみました。
デフォルトでは花柄です。

stripeflowersample.jpg


壁紙は3種類あります。あとの2つはCSSを書き換えてください。

stripeflowersample2.jpg


上のストライプの場合は、bodyのCSSを下記に変えます。
body {
font-size:15px;
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;
text-align:left;
color:#949198;
line-height:1.7em;
background-image:url(http://blog-imgs-58.fc2.com/m/y/s/mysticdiary/flower.jpg);
}
ここのbackground-imageを
background-image:url(http://blog-imgs-58.fc2.com/m/y/s/mysticdiary/stripe11.jpg);

こちらに変更します。

stripeflowersample3.jpg


上のタータンチェックの場合は、
background-image:url(http://blog-imgs-58.fc2.com/m/y/s/mysticdiary/tartan.jpg);

こちらに変更します。

それからサイドバーに表示させている写真は、変更可能ですが、
ご自分で250px×250pxの円形の画像を作る必要があります。
変更するには、下記のhtmlの画像リンクを差し替えてください。
<aside id="sidebar">
<div class="photo"><img src="https://blog-imgs-58.fc2.com/m/y/s/mysticdiary/baby.png"></div>
<!--plugin-->
<!--plugin_first-->
<div class="plugcontent">〜


あと、補足として、タイトルの文字が日本語の場合、大きすぎる場合は、
CSSで調整してください。
h1{
padding:80px 0 0 0;
margin-bottom:10px;
font-size:40px;
font-family: 'Monsieur La Doulaise', cursive;
}

この部分のfont-sizeを変更します。

ファイルは以下からダウンロードしてください。

stripeflower
stripeflower.html
stripeflower.html

stripeflower1.css
stripeflower.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.

11 Comments

coco says..."CSSファイル"
CSSファイルが見つからないようで、ダウンロードできません。。。
別のテンプレのコメントでも見かけましたが、
また闇に消えてしまったのでしょうか。

このテンプレすごく気に入りました!
特に背景がどれもかわいくていいですね。
お手数ですが、再UP頂けないでしょうか。
2013.06.23 21:36 | URL | #qbIq4rIg [edit]
ゆゆみっくす says..."テンプレート使わせていただきました!"
ブログの模様替えを思い立ってから、なかなか好みに合うものが見つからず…
共有テンプレートを選ぶところで別のテンプレートを拝見し、こちらへ参りました。

シンプルで温かみがあるステキテンプレですね!

ブログ上での配布されているものを使うのは初めてなので、何か不備がありましたらお知らせください。

ありがとうございました。
2013.12.03 02:53 | URL | #- [edit]
管理人 says..."ゆゆみっくすさんへ"
こんにちは。

どうぞご自由にお使いください。
2013.12.06 12:43 | URL | #- [edit]
gassan says..."壁紙チェンジ graynight"
graynightのデザインが好きでお借りしました。壁紙を変更しようと512x512pxの画像に置き換えましたらタイル状になってしまいます。
一枚の画像をきれいに入れるにはどうしたらよいのでしょか。ご教授お願いします。
2014.01.27 23:33 | URL | #- [edit]
tartan says..."右サイドバーが一瞬消えるのは。。。"
共有テンプレートでいいなと思うものは、MDさんのものばかりで、ブログを見つけこちらにきました。どれも素敵で満足です。

早速、こちらのテンプレートを使っていますが、IE11で、画面の幅を変えると、一瞬右サイドバーが消え、下のほうに移動してしまいます。幅を変え続けると現れ、さらに幅が変わるとまた下のほうへ消えると言う現象です。何か対処方法がありましたらご教授いただけますと幸いです。

chromeでは大丈夫のようです。よろしくお願いします。
2014.07.28 23:37 | URL | #- [edit]
にゃー says..."写真について質問させて頂きます。"
ホームページ風ブログに使用されているホワイトタイガーの写真を
MysticDiary様で配布されているほかのブログテンプレートで使用しても
問題ないでしょうか?
ご返答どうぞよろしくお願いいたします。
2014.07.29 09:29 | URL | #- [edit]
tartan says...""
こんにちは。"右サイドバーが一瞬消えるのは。。。"でメッセージを送りましたtartanです。

フリーで提供いただいているのに、わがまま、勝手な質問で申し訳ありませんでした。
chromeできちんと見えていますので、ご対応していただかなくて大丈夫です。
お忙しい中、大変失礼しました。

別のテンプレート(circle)を使わせていただきます。こちらもシンプルで、気に入ってます。
これからも素敵なテンプレート、楽しみにしています。

私のコメント、どうぞ削除してください。ありがとうございました。
2014.07.29 10:29 | URL | #- [edit]
管理人 says..."にゃーさんへ"
こんにちは。

写真はフリー素材を使っているので自由にお使いくださって
結構ですよ。
よろしくお願いします。
2014.07.29 19:34 | URL | #i4E9Nobc [edit]
管理人 says..."tartanさんへ"
こんにちは。

ieで表示がおかしいとのことですが、aside#sidebarのcssを
aside#sidebar{
padding:0 3% 0 0;
width:23%;
float:right;
margin:0 0 50px 0;
text-align:left;
font-size:13px;
}
上の置き換えるともしかしたらうまくいくかも知れないです。
よろしくお願いします。
2014.07.29 19:39 | URL | #i4E9Nobc [edit]
tartan says..."右サイドバーが一瞬消えるのは。。。"
管理人さま

はい!大成功です!
個別に対応していただき本当にありがとうございました。
どう感謝をお伝えしたらよいのか。。。

やっぱりこのテンプレートも素敵です。私はtartan柄がお気に入りです。circleもとてもシンプルで使いやすいので、この2つのテンプレートを今後末永く使わせていただきます!

ありがとうございました。
2014.07.29 20:46 | URL | #- [edit]
にゃー says...""
お返事ありがとう御座いました!
がんばってホームページのようなブログを作ってみます!
2014.07.31 23:23 | URL | #JalddpaA [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/439-317aac59