mysticdiary

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

モダンに逆もどり

最近ノスタルジックな雰囲気のテンプレートが続いたので、今回はぐっとモダンに。
写真はスライドショーなんだけど、いつも使ってるclossslideの元ページがなぜか消滅しているので、
しかたなく新しいスライドショーを探してみた。
今回使ったのはnivo sliderである。
これもけっこうシンプルで使い勝手がよさそう。

graynightsample.jpg

いろんなエフェクトが楽しめて、変更も簡単。
特に気に入ったのが、sliceupのエフェクト。サンプルはこのエフェクトだけど、
ビルの画像とあわせると、下からビルがドンドン!と乱立するみたいな効果に一瞬見える(笑)。
写真には下に影がついていたりするんだけど、これもIEだと見えない(爆)。
その他のモダンブラウザならきれいに見れる。

その他工夫した所といえば、検索フォームの所かなあ。
ボタンをクリックすると、フォームがおもむろに現れるというもったいぶった感じに。(笑)
機能的には前回のを継承。

これも来週あたり申請してみよう・・。

5月23日追記:

●スライドショーの画像変更方法


<div id="photoback">
<div id="slider">
	<img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/newyorkphoto11.jpg" alt="" title="" />
	<img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/newyorlphoto12.jpg" alt="" title="ここにキャプション入れてね~" />
	<img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/newyorlphoto13.jpg" alt="" title="" />
	<img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/newyorlphoto16.jpg" alt="" title="ここにキャプションを入れるのだよ~" />
<img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/newyorlphoto15.jpg" alt="" title="ここにキャプションを入れるのだよ~" />
</div>
</div>
このhtmlの画像のリンクアドレスを差し替えます。
キャプションを入れたい場合は、titleの所にお好きな言葉を入れます。
入れたくない場合は、何も入れずにそのままにしておきます。
画像の大きさは、920px×270pxです。
nivo sliderについては詳しい説明は元ネタサイトをご覧になった方がいいと思います。
(英語だけど・・、エフェクトの変更については、サイトの下の方に記述があります。)
HTML上部のスクリプト記述部分を変更すると、エフェクトが変更できます。

<script type="text/javascript">
$(window).load(function() {
	$('#slider').nivoSlider({
		effect:'sliceUp',
		slices:15,
		animSpeed:500,
		pauseTime:10000,
		startSlide:0, //Set starting Slide (0 index)
		directionNav:true, //Next & Prev
		directionNavHide:true, //Only show on hover
		controlNav:true, //1,2,3...
		controlNavThumbs:false, //Use thumbnails for Control Nav
		controlNavThumbsSearch: '.jpg', //Replace this with...
		controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
		keyboardNav:true, //Use left & right arrows
		pauseOnHover:true, //Stop animation while hovering
		manualAdvance:false, //Force manual transitions
		captionOpacity:0.8, //Universal caption opacity
		beforeChange: function(){},
		afterChange: function(){},
		slideshowEnd: function(){} //Triggers after all slides have been shown
	});
});
</script>
この部分の記述を変更して、エフェクトその他をカスタマイズします。
一番簡単なのは、effect:'sliceUp'と書いてある所をお好きなエフェクトに変更すれば、
画像の現れ方が変わります。

●ナビゲーションの編集


<div id="menu1">
<ul> 
<li><a href="<%url>archives.html" onfocus="this.blur();" class="nonborder">All post</a></li>
<li><a href="http://twitter.com/" onfocus="this.blur();" class="nonborder">Twitter</a></li>
<li><a href="<%url>?xml" onfocus="this.blur();" class="nonborder">Rss</a></li>
<li><a href="mailto:?subject=問い合わせ&body=ご記入ください" onfocus="this.blur();" class="nonborder">Contact</a></li>
<li><a href="<%server_url>control.php" onfocus="this.blur();" class="nonborder">Admin</a></li>
</ul>
</div>
これについては、前回と同じなので、こちらを参照してください。

5月31日追記:

●サイドバーの項目を開いた状態にする

サイドバーはjqueryを使って閉じた状態にしているので、常に開いた状態にしておくには、
jqueryへのリンクを切っておくだけでオッケーです。

<script type="text/javascript" src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/slidetogglesample.js"></script>

HTML上部の方にある、このソースを丸々削除するか、
後々のために残してリンクアドレスの最後の.jsだけ消去しておけばリンクは切れます。

関連記事
baorin

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

48 Comments

flowrelax says...""
baorinさん、こんばんは。

いいですね~。このテンプレート。

かっこいい。惹かれてしまいます。
2010.05.16 20:52 | URL | #- [edit]
管理人 says...""
flowrelaxさん、こんばんは。

レトロもいいですけど、モダンもいいですよね。
個人的にはモダンの方が好きかも知れないです。

気分でいろいろテンプレートを変更するのも楽しいですよ~
2010.05.17 22:24 | URL | #- [edit]
たけ says...""
凄く気に入っています!!探していたイメージにぴったり☆

ありがとうございます☆

一つ教えてくださいm(_ _;)m

公式プラグインのカウンターや、フリーエリアにスクリプトの貼り付けをしたのですが、表示されません(;o; どうしたら表示されるのですか・・。
2010.05.28 08:06 | URL | #- [edit]
管理人 says...""
たけさん、こんにちは。

ええと、管理人のほうでテストしてみたところ、カウンターや
共有プラグインなどは普通に表示されるのですが・・。

サイドバーは折りたたみ式になっているので、タイトル部分を
クリックしないと中身は表示されませんが、そういう事じゃないですよね(笑)
すいません。

折りたたみが嫌な場合は、中身を常に開いた状態にしておくこともできますが・・。
2010.05.28 20:50 | URL | #- [edit]
たけ says...""
解決しました☆私の勘違いでした(;´▽`A``

1つ質問ですm(_ _)m

3カラムにすることは可能ですか??
2010.05.29 05:13 | URL | #- [edit]
☆リューヤ☆彡 says...""
折りたたみを中身を常に開いた状態にするのはどうやるんですか?
2010.05.30 12:26 | URL | #- [edit]
管理人 says...""
☆リューヤ☆彡さんへ。

のちほど記事に追加しますので、少々お待ちを・・・。
2010.05.31 11:40 | URL | #- [edit]
管理人 says...""
cuuさん、こんにちは。

すみません、画像の加工は今までも一切お断りしています。
ご参考までに、代案ですが、CSSで背景画像の高さを調整すれば、
それなりに見せることはできます。

#photoback{
width:950px;
height:250px;
background-image:url(http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/newyorkphotoback.png);
background-repeat:no-repeat;
background-position:center bottom;
padding-top:20px;
}

背景画像のCSSを上のようにすると、高さが250PXになります。
一度試してみてください。
2010.05.31 12:28 | URL | #- [edit]
管理人 says...""
たけさん、こんにちは。

え~と、3カラムにするのはちょいと無理かと思います・・。
背景に画像を使っているもので。すいませんです。
2010.05.31 12:40 | URL | #- [edit]
cuu says...""
管理人様、こんにちは^^ 
 
お返事どうもありがとうございます!
なるほど~、こうすればよかったのですね>< 
無知で失礼なお願いをして申し訳ありませんでした・・・。
記述の様に数値を変えましたら、希望通りの表現が出来ました! 勝手なお願いに丁寧に方法を教えて下さり感謝です。本当にありがとうございましたm(_ _)m

追伸:新しいニュースサイト風テンプレートもステキです!!迷ってしまいます・・・><
2010.05.31 17:07 | URL | #Nr8va1Ss [edit]
とまと says...""
管理人さんはじめましてです

テンプレートの背景の画像URLを間違えて削除してしまいました><
画像URLを今一度いただきたいのですがおねがいできませんでしょうか
2010.06.01 02:18 | URL | #- [edit]
管理人 says...""
とまとさんへ。

http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/webtreats_wood-pattern1-512.jpg

です。
2010.06.01 10:57 | URL | #- [edit]
ごはん says..."スライド変更"
とっても素敵なテンプレートですね~。
是非使わせて頂きたいです。

スライドの部分だけをpeacockテンプレート
のスライドへ変更とか出来ますか?

可能であればどの部分を編集すればいいのか教えて下さい。

宜しくお願いします。
2010.06.04 02:23 | URL | #- [edit]
管理人 says...""
ごはんさんへ。

可能ですが、テンプレート自体がnivoslider用に作って
あるので、管理人は推奨しません。

なので、clossslideに変更したい場合は、自己責任で
おこなってください。

よろしくお願いします。
2010.06.04 15:56 | URL | #- [edit]
ごはん says..."テンプレート"
こんにちは。
peacockテンプレート の方でどうにか壁紙
変更できたのでそちらを引き続き使わせて頂きます。

とっても気に入ってますスライドー

これからも素敵なテンプレート作ってくださいね。

楽しみにしています。

2010.06.04 16:20 | URL | #- [edit]
メルセデス says...""
こんばんは。初めまして!
テンプレートステキなのでお借りいたしました!
ありがとうございます。

それで、コメント欄の色の変更はどうやって設定すれば
よろしいのでしょうか?

教えていただけたら嬉しいです。
よろしくお願い致します。
2010.06.05 21:14 | URL | #- [edit]
管理人 says...""
メルセデスさん、こんにちは。

コメント欄の色というと、具体的にどの部分の事でしょうか?
例えば、コメントタイトルの色とか、
背景の色とか・・それによっていじる箇所が違ってきますので・・。

よろしくお願いします。
2010.06.06 20:37 | URL | #- [edit]
メルセデス says...""
管理人さま こんばんは。
詳しく書かないで申し訳ありません!

コメント欄
名前、アドレス、件名、コメント欄
の背景色が赤くて、白に設定したいと思っています。

すみませんがよろしくお願い致します。
作っていただいてる作品を変更してしまって申し訳ありません。
2010.06.06 22:13 | URL | #- [edit]
管理人 says...""
メルセデスさんへ。

えと、デフォルトの白を赤に変更したので、それを元に戻したい
ということですか?

ダウンロードしたら元から赤かったなら重大事ですけど・・。
デフォルトの設定に戻したいということなら、cssの編集画面で
#name1,#name2,#title1,#title2,#mail1,#mail2,#url1,#url2
とか、#comment、この辺のbackground-colorを#ffffffに戻す
だけで大丈夫ですが・・。
2010.06.07 20:06 | URL | #- [edit]
メルセデス says...""
管理人さま

こんにちは。
ダウンロードしたら元から赤かったです。
コメントが長いと赤い部分と白い部分とにわかれます。

#ffffffやってみます!
ありがとうございます!
2010.06.08 07:22 | URL | #- [edit]
管理人 says...""
メルセデスさんへ。

訪問者履歴からブログを拝見したところ、管理人の環境だと
正常に見えています。
CSSをいじっていないなら、おそらくコメント欄の背景に
設定してあるPNG画像がメルセデスさんの環境だと正常に
見えていないので、赤くなってしまっているんだと思います。
背景色は元々白く設定してあるので、赤く見えてしまうのが
困るなら背景画像を削除してしまうのがいいと思います。

.combo

#name1,#name2,#title1,#title2,#mail1,#mail2,#url1,#url2

#comment

#pass1,#pass2

これらのCSSに共通に設定してある、
background-image:url(http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/home99comback2.png);

background-image:url(http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/home99comname.png);
を削除してください。
そうすれば、白くなると思います。


2010.06.08 09:51 | URL | #- [edit]
メルセデス says...""
管理人様

ありがとうございます!
白くなりました!
パソコン古いので申し訳ありません!

何度もすみませんでした!
2010.06.08 13:19 | URL | #- [edit]
YOU says...""
管理人さんはじめまして

こちらの「graynight」の
テンプレートを使わさせて頂いてます。

質問なのですが
記事にも時間表示(投稿時間)を表示したいのですが
どうしたらよろしいでしょうか!?

教えて頂けたら嬉しいです。
宜しくお願いします。
2010.07.01 11:47 | URL | #- [edit]
管理人 says...""
YOUさんへ。

時間表記はHTMLのkizifooterの部分に独自変数を追記します。
独自変数とはFC2BLOGでだけ使える呪文みたいなやつです。
こちらのページをご覧になると、
http://fc2blogmanual.blog60.fc2.com/blog-entry-160.html

上からよく見ていくと、時を表示、分を表示と書かれた部分があると
思います。それを追加します。

HTMLのだいたい年月日の後に入れる感じでしょうか。
独自変数をブログ上に表記するとレイアウトがおかしくなって
しまうので、実際の表記をここで書くことができません。

HTML編集画面でkizifooterを検索して、
よく見てみると、独自関数の年月日の表記があるはずです。
その後に入れてください。

2010.07.01 12:04 | URL | #- [edit]
YOU says...""
管理人さんへ

ありがとうございます!!

何とか出来ました!!
(途中妥協しかけてもう一度コメントしようかとしてしまいたした!!)

ありがとうございました!!
2010.07.01 14:24 | URL | #- [edit]
一Satoshi一 says..."質問させて頂きます。"
テンプレート楽しく使わせて頂いてます。
質問ですがPC初心者で初歩的な質問でしたら申し訳ないです。

追記を書いた時に表示されるRead moreの部分はサイズ、色、文字の変更をすることが出来ますか?

色々moreの付く部分の数値を変えて試してみたのですが、わからなかったので…
お時間ありました教えて下さい。宜しくお願いします。


2010.07.03 22:42 | URL | #- [edit]
一Satoshi一 says...""
質問してから一日色々試したのですが、画像と気付き自己解決しました。

解決に伴い、MDさんが提供しているこのテンプレートの追記画像と、同じくMDさんが提供する別のテンプレートの追記の画像を差し替えて使わせて頂いたのですが、これは許可して頂けるのでしょうか?
問題がありましたらすぐに元に戻します。
2010.07.04 05:28 | URL | #- [edit]
管理人 says..."一Satoshi一さんへ"
画像を加工したりしなければ、
差し替えていただいても結構ですよ。

2010.07.05 12:05 | URL | #- [edit]
一Satoshi一 says..."有難うございます。"
画像はDMさんの別テンプレのものをそのまま使わせて頂いてます。
おかげで、追記部分が赤から白に変わり、イメージどうりで大変満足しています^^
質問に答えて頂き有難うございました。
これからも大切に使わせて頂きたいと思います。
2010.07.05 21:26 | URL | #- [edit]
Almagest says..."タイトル"
このテンプレートがとても気に入ったので使わせて頂いてます。

ところで質問があるのですが、

このテンプレートの上部ナビゲーション部分(TwitterやAdminと表示される部分)をプルダウンメニューにすることは出来ないのでしょうか。

時間があるときでいいので、教えて頂けたら嬉しいです。
宜しくお願いします。
2010.07.27 09:29 | URL | #- [edit]
管理人 says..."Almagestさんへ"
こんにちは。
できないことはないですが、HTMLやCSSを書き換えたり、
プルダウンメニューにするには、ちょっとそれなりに
知識がないと難しいと思います。
ここでソースを提示して説明するのも
無理があると思います。

プルダウンメニューの作成方法については、
インターネットなどで検索するとたくさん出てきたりしますので、
そちらを参考になさってください。
お力になれずすみません。

2010.07.27 16:51 | URL | #i4E9Nobc [edit]
Almagest says..."タイトル"
わざわざありがとうございました。出来る範囲で頑張ってみます。
2010.07.27 17:49 | URL | #- [edit]
DARK says..."とても素敵で利用させて頂きます"
理想通りのテンプレートが見つかり感動してます
共有テンプレから このデザインいいなぁと思って見ると
常にMDさんの作品でした
その中でもこちらの作品にさせて頂いて
2点だけ気になる箇所が出てきたのでご相談です
①comment欄に切り替わった時、下のデザインが左にずれている
(状態ですが、仕様でしょうか?編集は画像のところしかしてません
 TOPのボタンと下の枠ですがライン状に左に出てます)

②サイドバーですが IE8だとcomment欄に切り替えたとき
 下に落ちてしまいます Firefoxだと上に常にいますが

そこが気になってます

CSSの知識がないので 失礼だとは思ったのですが 
気になりご相談させて頂きました
2010.10.12 17:51 | URL | #- [edit]
DARK says..."自己解決しました><"
CSSの文字を消してたみたいです
見比べると 違ってました お手数お掛けしました

これからも 素敵なテンプレート待ってます♪
2010.10.12 18:09 | URL | #- [edit]
管理人 says..."DARKさんへ"
こんにちは。
解決してよかったです。
これからもよろしくお願いします。
2010.10.14 14:15 | URL | #i4E9Nobc [edit]
A-kei says..."はじめまして"
こちらのテンプレートをとても気に入り使わせてもらっています。

Firfoxではヘッダーのスライダーが正常に動いているのですが
IE8で見たところ、なんかズレテしまっていて動きません。

htmlかcssを変にいじってしまったのかと思い確認してみたのですが
当方、初心者なものでどこがいけないのかわからず…

お忙しいかと思われますが、もしお時間があれば見ていただきたく思いコメントさせていただきました。

よろしくお願いします。


追記
記事本文もFirfoxでは改行されてるのですが、IE8だと改行するのに<BR>を一つ余計に打たないと改行してくれません。
ですがそれでやるとFirfoxで見ると2行あいてしまいます。

CSSハックで調べてみたもののよくわからずで…

こちらもどうすればいいのか教えてください。

2010.10.21 17:57 | URL | #8iCOsRG2 [edit]
管理人 says..."A-keiさんへ"
こんにちは。
ブログ拝見しましたが、カスタマイズ後の不具合については
こちらではちょっとよくわかりません。
不具合の原因を突き止めるには、HTML(カスタマイズした箇所、
編集した記事、プラグイン、導入したスクリプト)内で、
タグの閉じ忘れや、削除しのこしたものがないかチェックします。
それらを修正した上で直らない場合は、カスタマイズをさかのぼって
ひとつひとつ元に戻していくか、初期化して確認しながらひとつひとつ
カスタマイズをやりなおすか、どちらかを行わないと原因と
なっている箇所が特定できません。
ソースを拝見したところ、aタグが残ってしまったりしている箇所
があるので、それは削除した方がいいと思います。
それ以外にも修正すべき所があるかも知れないので、
それはご自分でみつけてください。

よろしくお願いします。
2010.10.22 11:55 | URL | #i4E9Nobc [edit]
A-kei says..."ありがとうございます。"
ヘッダーは画像リンクやめたらなおりました~。

記事の改行ですが
IEバグだったみたいで

br {letter-spacing:normal;}

これでなおりました♪

これからも素敵なテンプレート楽しみにしています。
2010.10.22 14:59 | URL | #- [edit]
nov says..."管理人さま"
かっこいいテンプレートですね!
使わせていただきたいです。

質問なんですが、画像の部分を全て削除して使用したいのですが可能ですか?
初心者なもので、やり方がまったくわかりません・・・
可能であれば、教えてください。

お願いします。
2010.12.23 19:41 | URL | #- [edit]
管理人 says..."novさんへ"
こんにちは。

スライダーを削除したい場合は、
htmlの
<div id="photoback">~~~</div>
で囲まれた部分を全部削除します。
不具合の原因になるので、コメント欄に具体的なソースはかけません。
がんばって探してください。
2010.12.26 09:14 | URL | #i4E9Nobc [edit]
きら says..."こんばんは^^"
はじめまして^^

最近FC2でブログをはじめました。

テンプレートとても気に入って使わせてもらいますね。

1つ、質問なんですが、テンプレートの背景色を変更できないで
しょうか?

ダークな木目もすてきなんですが、できれば本来の木目色もいいかなと・・

まったくの初心者なものでよろしくお願いします^^
2011.07.01 00:47 | URL | #TezqYSu. [edit]
管理人 says..."きらさんへ"
こんにちは。

このテンプレートでは背景に画像を使っているため、色を変更したい場合は
その色の画像をCSSで指定する必要があります。
bodyに指定している背景画像をmysticdiaryneoの背景画像などに
変更してみたらいかがでしょうか?
2011.07.01 11:14 | URL | #i4E9Nobc [edit]
きら says..."ありがとうございました^^"
おっしゃる通りに設定を変更してみました。
おかげ様で、無事茶色の木目に変更できました^^

これからも管理人さまのテンプレートを使わせて頂きます。
よろしくお願いします^^
2011.07.03 15:44 | URL | #TezqYSu. [edit]
賢丸 says..."スライドショーに隙間?"
カッコいいこのテンプレに一目惚れし、お借りしています。

早速ですが、私がメインで使用しておりますPC(Vista,IE9)ではスライドショーは正常に表示されているのですが、別のPC(w7,IE9)ではスライドショーの画像中央やや右より付近に隙間(2~4ピクセル)ができ、その下の画像が見えてしまっています。画像を手動で切り替える際には、この隙間は直るのですが、また自動でスライドが始まると隙間ができます。IE9はいずれも最新の状態です。カスタムを予定しておりますが、まだはじめたばかりで派手にいじっておりません。これは直りますでしょうか?よろしくお願い致します。
2011.09.30 15:14 | URL | #.pI0Uv0I [edit]
ヒロ says...""
はじめまして。
こちらのテンプレートを利用させて頂いてます。
というか管理人様のテンプレートはどれも素晴らしく、複数活用させて頂いてます。
とてもシックで気に入ってます。ありがとうございます。
スライドショーの画像も変更させて頂きましたが、スライドショーの画像が変わる時間をもう少し短くしたいのですが、よろしいでしょうか?
また、その方法を教えて頂ければありがたいのですが・・・
よろしくお願いします。
首の痛みはその後、如何でしょうか? お大事に。
2011.11.13 08:44 | URL | #JalddpaA [edit]
初心者 says...""
管理人様
ごく最近このテンプレートを見つけ、使わせて頂いております。

このテンプレートへの質問はまだ受け付けておりますでしょうか?
もし可能でしたら一つだけ教えて下さい。

サイドメニューのプロフィールに画像を入れると、どんなサイズの画像も
同じサイズになってしまいます。

この画像のサイズを変更するには、どこを編集したらよいのでしょうか。

この類の知識は皆無のため、それと思われる数字の部分を変更しながら
試しているのですが、見つかりません^^;

初歩的ですみませんが、宜しくお願い致します。

2014.05.24 10:07 | URL | #- [edit]
管理人 says..."初心者さんへ"
こんにちは。

プロフィールの画像の大きさはテンプレートとは関係ないと思います。
プロフィールの画像の大きさは環境設定のプロフィールに項目があり
設定できると思います。
そちらから大きさを設定してください。
よろしくお願いします。
2014.05.24 10:25 | URL | #i4E9Nobc [edit]
初心者 says...""
>管理人様

仰る通りでした!
今まではその設定を変えずとも、たまたまうまく出来てたようです^^;

大変助かりました、有難う御座いました。
2014.05.24 17:44 | URL | #- [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/163-5b5aa0e8
← なんか不思議・・? → いや~なんとロマンチックに挑戦!