mysticdiary

更新はLittleDreamでしています。右のバナーからどうぞ

2カ月以上ごぶさたでしたが

winter.jpg
8月にぎっくり腰をやって以来、腰の調子がよくなったり悪くなったりを
繰り返している管理人です。

そんな中でもテンプレート作りはちょこちょこ続けていたのですが、
今回は1年ぐらい前にこのブログで使用していたテンプレートを共有申請用に
作りなおして申請してみることにしました。

mysticwinter2.jpg
シンプルな2カラムのテンプレートです。
ヘッダーの画像は変更できます。
今回はフッターも画像を使っているのでお好みで変更してくださいね。

CSSの以下の部分を変更します。
#header-container{
width:100%;
height:400px;
margin:0;
padding:0;
position:relative;
background-image:url(http://blog-imgs-58.fc2.com/m/y/s/mysticdiary/winter.jpg);
background-repeat:no-repeat;
background-position:center bottom;
background-size:cover;
-webkit-animation:headerMotion 1.8s;
-moz-animation: headerMotion 1.8s;
-o-animation: headerMotion 1.8s;
animation: headerMotion 1.8s;
overflow:hidden;
}

上のbackground-imageを変更してくださいね。デモでは画像の大きさは、1920×720です。

フッターの部分は、
#footer-container{
width:100%;
height:310px;
margin:0;
font-size:12px;
padding:0;
color:#ffffff;
position:relative;
background-image:url(http://blog-imgs-58.fc2.com/m/y/s/mysticdiary/winter.jpg);
background-repeat:no-repeat;
background-position:center bottom;
background-size:cover;
text-align:center;
overflow:hidden;
}

上のbackground-imageを変更します。画像の大きさはヘッダーと一緒です。

これは今週中には申請するつもりなので、ダウンロードできるようになるのは
来週かさ来週ぐらいになると思います。

追記:スマートフォンで見ると、画面の一番上に「スマートフォン版で表示」みたいな
でっかい青いバーがでてきますが、これを表示したくない場合は、CSSの一番最後あたりに
#change_mobile{
display:none;
}

#change_mobile_body{
display:none;
}

とか記入すると出なくなります。おためしあれ。

関連記事
baorin

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

13 Comments

kino says..."おかえりなさいませ!(^^)!"
少しは療養になられたでしょうか?
ご無理をなさらぬように<(_ _)>

さて、新しいテンプレートをFC2よりDLいたしました。

不具合というほどの不具合ではないのですが

フッターにあるTwitterやFaceBookがリンクされません。

<li class="twitter"><a href="#"this.blur();" class="nonborder" title="twitter"><img src="http://blog-imgs-42.fc2.com/m/y/s/mysticdiary/twitter_20131214144337e0a.png" width="30" height="30"></a>


「#」にTwitterのアドレスを入力すればいいはずなんですが……
なぜか、リンクされません。

その前にFC2共用テンプレートではちゃんと設定ができました。

一応、ご報告までに<(_ _)>
2014.11.13 14:12 | URL | #- [edit]
管理人 says..."kinoさんへ"
こんにちは。

テンプレートをいつも使っていただきありがとうございます。
ところで、リンクできないとのことですが、
ためしにダウンロードしてやってみた所普通にリンクできます。
#のところにアドレスを記入するだけです。
”がとれてたりするとリンクできなくなったりしますが・・。
もう一度ためしにやってみてください。
よろしくお願いします。
2014.11.14 07:21 | URL | #i4E9Nobc [edit]
LLB says..."ブログ初心者でも設定が簡単なテンプレートは・・・"
MDさんこんにちは。
Blogを始めたいと思い、テンプレートを探していたところ
MDさんのテンプレートに出逢ってしまいました・・・
とてもすてきなテンプレートばかりで
とても悩んでしまいます。
ただ私は仕事でPCは使うものの
上記にあるようなところ「CSS以下のところ・・・」は触れたことがなく
MDさんのテンプレートで初級者(限りなく入門者に近い)向きの
テンプレートがあったらご紹介いただけますか?
個人的にはCAMPANELLA が好みなのですが
初心者には設定は難しいですか?
お時間があるときで結構ですので
アドバイスお願いいたします。
2014.11.14 14:14 | URL | #- [edit]
kino says..."MDさま"
こんばんは。

Twitterのリンクですが、新しくDLし直してもリンクされませんねぇ。
ブラウザはchromeとIE11です。
システムはWindows7です。

先日まで使っていたdivisionはちゃんとリンクされています。
MDさまからお借りしているテンプレートはみな正常に動作しておりますが
なぜか、mysticwinterのTwitterだけがリンクされません。
なぞです……

まあ、テンプレートが素晴らしいので別段問題はありませんので<(_ _)>
2014.11.15 01:35 | URL | #- [edit]
管理人 says..."kinoさんへ"
ためしにwindows7のie11でテストしてみましたが、
管理人の環境だとやっぱりリンクされてます・・。
ブラウザのキャッシュをクリアしたりすると治るかもしれませんが
これ以上は管理人もわからないです。

よろしくお願いします。
2014.11.17 08:58 | URL | #i4E9Nobc [edit]
管理人 says..."LLBさんへ"
こんにちは。

CAMPANELLA は管理画面で設定が必要なわけではありませんが、
画像を変更したりhtmlをいじったりしなくてはならないので
初心者でhtml・css等の知識がない方だとちょっと難しいかもしれません。

ホームページ風テンプレート以外なら余計な設定がいらないので
初心者の方でも簡単に使えると思います。

よろしくお願いします。
2014.11.17 09:35 | URL | #i4E9Nobc [edit]
miyako says..."こんばんは♪"
初めまして!
素敵なテンプレートを早速使わせて頂きました。
ただ、お写真を変えさせて頂きました。と言っても私はこんな難しいことは出来ません。。
お嫁さんにしてもらったのですが・・こんなのが出来るなんて凄いですね~☆

お嫁さんは管理人さんにコメントを入れずにサッサと帰って行きましたが、
私は一言お伝えしておかなければと思ってこちらにコメントを入れさせて頂きました。
ありがとうございます(*^_^*)
2014.11.17 20:44 | URL | #- [edit]
しろいまちこ says..."ヘッダー画像写真の変更についてご質問です"
こんにちは。

寒くなっていますが、腰はいかがでしょうか?
どうぞお大事にお過ごしください。

久しぶりにMDさんのテンプレートを使用させていただいています。
画像の写真を変更できるのがうれしく、試してみたのですが
色合いが元写真より暗くなってしまうように思います。

ヘッダーの背景の色にグレイなど使っていらっしゃいますでしょうか?
また、背景色を使っていて、変更して薄くしたい場合は、どの部分を変えればよいかも
合わせて教えていただけますと大変うれしいです。

急ぎませんので、お時間のよろしいときにご検討いただけましたら幸いです。
どうぞよろしくお願いいたします。
2014.12.12 10:28 | URL | #hufKyueo [edit]
管理人 says..."しろいまちこさんへ"
こんにちは。
テンプレート使っていただきありがとうございます。
ヘッダーの画像が暗くなる件ですが、CSSで暗くなるように設定しています。
(タイトルの文字を際立たせるためです)
もし、暗くしたくないとのことであれば、
CSSで以下の部分を見つけます。

#header-container header{
padding:0 10%;
height:100%;
background:rgb(0,0,0);
background: transparent\9;
background:rgba(0,0,0,0.4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
zoom: 1;
text-align:center;
position:relative;
}

上のCSSの
background:rgb(0,0,0);
background: transparent\9;
background:rgba(0,0,0,0.4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
zoom: 1;
の部分を丸ごと削除してください。

暗さを調節したいとのことであれば、
半透明のCSSの数値をご自分で設定していただくことになります。
http://rland.me.uk/cross-browser-alpha-transparent-background-10-2011/
このページの一番したあたりにジェネレーターがありますので、
お好きな色や透明度でためしてみてください。

よろしくお願いします。
2014.12.15 10:58 | URL | #i4E9Nobc [edit]
しろいまちこ says..."ありがとうございます"
MDさま

ありがとうございます。

暗さを調節は、わたしには難しいテクニックでしたので
該当の部分を削除させていただきました。

どうもありがとうございました!!
2014.12.15 23:29 | URL | #hufKyueo [edit]
スイングトレーダーX says..."素晴らしいテンプレートをありがとうございます!"
大げさなペンネームですみません(笑)

私のブログで管理人様の作られたテンプレートを使わせていただいております。

是非どのような感じかご覧ください。

いままでいろいろなテンプレートを見て回ってきましたがこのテンプレートを見たときとても感動しました。

これからもテンプレート作成のほう、応援しています。

本当にありがとうございました!
2014.12.18 20:52 | URL | #- [edit]
管理人 says..."スイングトレーダーXさんへ"
こんにちは。

テンプレート気に入っていただけてよかったです。

これからもよろしくお願いいたします。
2014.12.22 10:09 | URL | #i4E9Nobc [edit]
baorin says..."こんにちは"
こんにちは
2016.09.24 09:52 | URL | #- [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/475-2d5c7ff4
← 無限スクロール → 引き続きじゅうでんちゅう・・・