mysticdiary

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

GWはだらだら・・・

いや~いい天気っすね。
管理人は今年のGWは思いっきりだらだらしてます!
先月は病気で入院してたし、本格的に骨休めできるので幸せ~。
この時期はどこ行っても人がいっぱいで混雑してるもんね、GWが終わったらどこかへ旅行でも
しようと思ってマス。

さてさて、だらだらしている管理人、暇なのでここぞとばかりテンプレート作ってみたよ~。
今回もあんまり季節と関係ないけど(てか、逆行してるような・・・?)
落ち着く感じの自分の部屋をイメージしていろいろ工夫してみました。

mymemoryimage.jpg

今回はたくさんjquery使ってます。
上部のヘッダー画像はいろんな仕掛けをほどこしてみました。
小さな写真立てはスライドショーなので、お好みの画像を入れられるし、
時計も動いてるし、ランプはシェード部分をクリックすると明かりがともるようになってます。
あと、本やはねペンやインクはリンクが設定できるようになってます。

サイドバーはクリックするとスライドして中身が見えるように。
それから追記の部分もストレスフリーのそのまんまのページで見れるようにしてみました。

リンクの設定の仕方など、詳しい説明は公開後に追記します。
申請はGW明けぐらいを予定!

5月7日追記:

●写真立ての画像変更

下のHTMLの

<div id="photo">
<style type="text/css"> 
  #memory {
    margin:0;
    width: 130px;
    height: 140px;
  }
</style> 
<script type="text/javascript"> 
  $(function() {
    $('#memory').crossSlide({
      sleep: 30,
      fade: 1
    }, [
      { src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/memory5.jpg' },
      { src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/memory1.jpg' },
      { src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/memory2.jpg' },
      { src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/memory4.jpg' }
      
    ]);
  });
</script> 
 
<div id="memory">Loading…</div> 
</div>


{ src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/memory5.jpg' },

この部分の画像リンクを差し替えます。

お好きなだけ増やせますが、一番最後の画像には(,)を最後につけないように
してください。


{ src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/memory4.jpg' }

写真の大きさは115px×140pxぐらいがうまくいくと思います。

フェードの時間を調整したいときは、

 sleep: 30,

この部分を20(秒)とか10(秒)とかに変更できます。
あいにくこのcrossslideの元ネタのページがリンク切れになっていて
みつからないので、詳しい説明が書けません。
リンク先がみつかりしだい追記します。

画像を固定したい場合は、画像リンクを一枚だけ設定してください。

5月19日追記:

どうも一枚だけにするとうまく動かないようです。
なので、固定させたい場合は、同じ写真を2枚設定してください。
(最後の写真には末尾に(,)をつけないように!)
これならフェードしてても、フェードしてるように見えません。

●本・インク・羽ペンのリンク設定


<div class="books"><a href="#" onfocus="this.blur();" class="nonborder" title="お好きな項目"></a></div>
<div class="inkbottle"><a href="#" onfocus="this.blur();" class="nonborder" title="お好きな項目"></a></div>
<div class="quillpen"><a href="#" onfocus="this.blur();" class="nonborder" title="お好きな項目"></a></div>

#の部分にリンク先のアドレスを入れます。
お好きな項目部分に好きな言葉を入れます。

●ナビゲーションの設定


<div id="menu">
<ul> 
<li><a href="./" onfocus="this.blur();" class="nonborder">Home</a></li>
<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>
<li><a href="#" onfocus="this.blur();" class="nonborder">Link</a></li>
<li><a href="#" onfocus="this.blur();" class="nonborder">Link</a></li>
<li><a href="#" onfocus="this.blur();" class="nonborder">Link</a></li>
</ul>
</div>

上に同じく
#の部分にリンク先アドレスを、Linkの部分はお好きな言葉に変更します。

5月10日追記:

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

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

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

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

●サイドバーの一番上の項目だけ開いた状態にしておく


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

上と同じくHTML上部の方にあるこのソースを

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

このように書き換えるだけです。
関連記事
baorin

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

24 Comments

ふく says...""
こんにちは 
教えてください。
このテンプレートは、
3カラムのテンプレートにできるのでしょうか?
2010.05.07 19:57 | URL | #- [edit]
Roco  says...""
写真の入れ替えで額装できるって素敵、手順が分かりません教えて下さい。
2010.05.08 09:55 | URL | #- [edit]
管理人 says...""
ふくさんへ。

3カラムに変更するのは不可能ではありませんが、
背景に画像など使っているため、そのまま画像を使って変更するのは
かなり難しいと思います。
2010.05.09 15:54 | URL | #- [edit]
管理人 says...""
Rocoさんへ。

写真の入れ替えについては上の記事を参考にしてください。
上の記事でわからなければ具体的にどこがわからないか
書いていただけると助かります。
2010.05.09 15:56 | URL | #- [edit]
ふく says..."管理人様へ"
管理人様
お返事ありがとうございました。
無理はせず、2カラムでお借りします。ありがとうございました。
しかし、、素敵です。
私もいつかこんなテンプレートつくってみたいです。m(__)m
2010.05.09 21:15 | URL | #- [edit]
お湯 says...""
とてもいいテンプレートですね、こういう感じスゴイ好きです。
1つ質問なんですが、サイドバーは折り畳んだ状態で表示されるように
なってると思うんですが、それを開いた状態で表示するように
しておきたいんですが、そのようなことはできるのでしょうか?
よろしくおねがいします。
2010.05.09 21:44 | URL | #- [edit]
管理人 says...""
お湯さんへ。

上の記事で追加してみましたので、
よかったら参考にしてみてください。
2010.05.10 14:07 | URL | #- [edit]
お湯 says...""
管理人さんへ

できるようになりました。
本当にありがとうございます。
2010.05.10 17:15 | URL | #- [edit]
しろいまちこ says...""
はじめまして。

わたしは今使用中のテンプレートは
mysticdiaryを使わせていただいています。
ありがとうございます。


次はmymemory1に変えたいなと思いダウンロードさせていただいたのですが
写真の画像の入れ替えがどうしてもうまくいきません。

{ src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/memory5.jpg' },

のうち
http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/memory5.jpg
の部分を
自分のブログにアップロードしてある画像のURLと差し替えるということでいいのでしょうか?

例えばわたしのブログにアップロードした写真だと
http://blog-imgs-19.fc2.com/h/o/n/honwagohan/10055682374.jpg
というのがありまして
これを固定で入れたいなと思い


<div id="photo">
<style type="text/css">
#memory {
margin:0;
width: 130px;
height: 140px;
}
</style>
<script type="text/javascript">
$(function() {
$('#memory').crossSlide({
sleep: 30,
fade: 1
}, [
{ src: 'http://blog-imgs-19.fc2.com/h/o/n/honwagohan/10055682374.jpg' }

]);
});
</script>


としたのですが
プレビューで見ると、画像が入っておらず
後ろの地模様になっています。

写真自体のファイル情報は
10055682374.jpg
4KB (112 x 144)
です。
画像のサイズがあってないのでしょうか。

HTMLに詳しくないもので
どこでつまずいているのかもわからず
長文のお問い合わせになってしまい、申し訳ありません。

お時間のありますときに教えていただけるとうれしいです。
どうぞよろしくお願いいたします。





2010.05.18 22:28 | URL | #- [edit]
管理人 says...""
しろいまちこさん、こんにちは。

すみません、管理人の方で実験してみたところ、
どうも画像一枚だけにすると、うまく動かないようです。
なので、同じ写真を2枚設定するとうまく見られると思います。
同じ写真ならフェードしてもフェードして見えません。

clossslideの元ネタのページがなぜか消滅しているので、
詳しい情報が記載できずすみません。

画像の変更方法はURLを差し替えるだけで大丈夫です。
上の記事でも訂正してみたので、よかったら参考になさって
ください。
2010.05.19 12:22 | URL | #- [edit]
しろいまちこ says...""
できました♪
画像はサイズの合うものを探して少しずつそろえていきます。

ありがとうございました!
2010.05.19 22:26 | URL | #- [edit]
chocoDX says...""
こんにちは。
Mystic Diaryさんのテンプレート使わせて頂いてます。ありがとうございます。
こちらのテンプレートの画像変更についてお聞きしたくコメント致します。

記事にオススメされていた115x140pxにサイズ変更した画像を使って入れ替えをしようとしたのですが、額縁のサイズと合わず、逆L字型に隙間ができて青い壁紙が覗いてしまいます。120x150、120x160、200x・・・など色々とサイズや比率を試してみたのですがどうしてもうまくいきません。
テンプレートのサンプル画像のサイズを教えて頂けないでしょうか。
また比率以前に何か問題があるか、もしご存知でしたら教えて頂けると助かります。

お手数ですが、どうぞよろしくお願いいたします<(_ _)>
2010.05.25 16:27 | URL | #- [edit]
管理人 says...""
chocoDXさん、こんにちは。

サンプルの画像は一枚目が115px×140px、二枚目が105px×146px
などと、結構アバウトです。

画像サイズは同じなのに、隙間があいてしまうとすれば、
多分画像の表示位置がずれているんだと思います。
どこか、CSSで数値を変更したりしたところはありますでしょうか?
CSSで画像の表示位置をコントロールすることはできます。

どこもいじっていないのに、隙間がどうしてもあいてしまう場合、
画像のアドレスの前後の(’)を入れ忘れているとか、
小さいけど以外な盲点が潜んでいる可能性もあります。

よかったら、ブログのアドレスを教えてください。
何かわかるかも知れません。
2010.05.26 12:06 | URL | #- [edit]
しろいまちこ says...""
何度もすみません。

プラグインで
FC2やブログ村などのアクセスランキングのバナーを入れたいのですが
バナー用のタグをコピペして貼り付けても表示されません。

バナーのサイズなどが関係しているのでしょうか?
一応FC2のいちばん小さいサイズを選んだのですが
それでも表示されないので
現在は非表示に変えています。

できればバナーが表示されるようにして
見に来た人にクリックしてもらえるようになれば…と思います。

お忙しい中申し訳ありません。
お手すきの時にご検討いただければと思います。
どうぞよろしくお願いします。
2010.05.29 23:27 | URL | #- [edit]
管理人 says...""
しろいまちこさんへ。

その後も相変わらず表示されないでしょうか?

管理人の方でテスト(win、mac)してみた所、Fc2ブログランキングや、
外部のランキングサイトなども正常に表示されます。
バナーサイズはあまり関係ないと思います。
導入したスクリプトのタグなどがあっているかどうか、
もう一度確認してみてください。

ブラウザの環境や、Fc2ブログのサーバーの調子なども関係しているかも
知れません。
お使いのブラウザはなんでしょうか?
2010.05.31 11:37 | URL | #- [edit]
chocoDX says..."ありがとうございます"
ご回答ありがとうございます。遅くなってしまい申し訳ありません。
やっぱりサイズではないところに問題があるのですね。
特に何かいじったということはないはずなのですが、もしかしたら知らないうちにうっかりどこか変えてしまっているのかもしれません。

ブログアドレスはこちらです。http://simdora.blog130.fc2.com/
お手数をおかけしてしまって申し訳ないです。
2010.05.31 11:40 | URL | #- [edit]
管理人 says...""
y. さん、こんにちは。

いえいえ、ご自由にカスタマイズなさって結構ですよ。
ブログ今度じっくり拝見いたします・・。

ところで、使わないリンク消しとはどういう意味合いでしょうか?
使わないリンクを消す方法ということですか?



2010.05.31 12:38 | URL | #- [edit]
管理人 says...""
chocoDXさん、こんにちは。

ブログ拝見しました。
CSS等には問題ないのですが、
やはり画像の大きさが違っているみたいです。
管理人が拝見したところ、一枚目の画像の大きさが88×119
しかありません。
おすすめサイズは115×140なので、大きさが足りないです。
なので、逆L字にスペースがあくのだと思います。
画像の大きさはブログにアップロードしたときにサムネイルの
横に表示されます。
管理画面で一度ご確認になってみてはいかがでしょうか?


2010.05.31 12:50 | URL | #- [edit]
y. says..."nidomemasite."
コメ返・・有難うございました。
カスタマイズといっても、写真入れ替えたりするのが精一杯、(^_^)汗。。今は大変くるしんでおります。苦笑
いろいろ、リンク三つほどある場合、(私は使ってないんですよ。)飾りにはなってますけど、ここを何かに活用できたらいいんでしょうけどね。
今は消しとこうなんて思ったりしましただけです。
まあ、つぶやきでした。。笑
それと、不思議なことにmy memory diaryを昨日みましたら、私の数字の入れ方がわるかったのか??下のプラム色のpower by・・・ところが無い!広告は入ってるのですが、規約違反のように、見えにくい。どこを直したらいいのかがわかりません。ちなみにheaderはわくぐみをいれて、heightは300くらいにかえましたけど、、、後はbgimageは自分で撮った写真をいれたら400,300くらいのをダダだっと入ってますga,,,
つまり、レースに文字が乗っかってしまったような感じです。
2010.05.31 15:18 | URL | #- [edit]
しろいまちこ says...""
ご確認ありがとうございます。

IEを使っているのですが、やはり表示がされなかったので
とりあえず、プラグインの項目を一度削除し
その後新しくやり直しました。

今度はうまく表示されるようになりましたが
プラグイン説明の文章は反映されないみたいですね。
でも
ここは使わないようにすればいい話なので問題なしです。

何度もありがとうございましたm(_ _)m
2010.06.01 01:43 | URL | #- [edit]
管理人 says...""
しろいまちこさんへ。

説明文が表示されないのは、管理人のテンプレートに
表示される変数が入ってないからです。
説明文の需要があると思わなかったので(管理人の独断!)
最近のテンプレートでは削除しちゃってます。

説明文が必要な場合もあるんですね・・・。
今後のテンプレートでは復帰させようかな。。。

ご希望なら、今のテンプレートにも追加できますけど・・・。
2010.06.01 10:55 | URL | #- [edit]
Z says...""
はじめまして。MDさんのテンプレートはどれもセンスが良くとても良く考えてあって目移りしてしまいます。そして、現在このmymemory1 を使わせて頂いております。

数日前まで、卓上の時計が問題無く動いていたのですが、急に時計の針が消えて表示されなくなってしまいました。「共有テンプレートから検索」ページでのプレビューボタンを押しても表示されません。少々カスタマイズしたので、それが原因かと思い、新たにダウンロードしなおしたオリジナルを「適用」させてみたのですが、それでも表示されません。

ですが、こちらのMistic Diaryさんでのサンプル画面では、時計が動いています。javaScript にアクセスが集中して動作が遅いのかと思い、analogclockmain.jsを別途自分のブログスペースにアップロードし直して繋いでみたのですが、それでも表示されません。もちろんブラウザのJavaScriptはONにしてあります。ブラウザのせいかと思い、IE、FireFox、Safariで見てみたのですが、それでも時計の針は表示されません。

どうしても原因が分からないので、お忙しいとは存じますが、質問させて頂きました。どうぞ宜しくお願い致します。
2010.06.12 12:04 | URL | #- [edit]
Z says...""
たびたび申し訳ありません。上の書き込みの方のブログを拝見したら時計の針が動いていました。
それで、新たなプラグインを入れた事で、誤動作が起きたのかもしれないと思い、新たに加えたプラグインを表示しない設定にしてみたところ、時計の針が表示されるようになりました。
原因は、新しく加えたプラグインだったようです。長々と書きこんで申し訳ありませんでした。自己解決致しましたので、お返事は不要です。大変失礼いたしました。

あまりにも素敵で、好みにぴったりなので、これからも模様替えの度にこちらのテンプレートを使わせて頂くと思います。お目汚し申し訳ありませんでした。
2010.06.12 12:18 | URL | #- [edit]
しろいまちこ says...""
プラグイン説明、ご検討いただきありがとうございます。

あればうれしいですが、なくても困らない…くらいな使い方ですので
いまあるテンプレートに変更していただかなくても大丈夫です。

お気遣いありがとうございます。
そしてご連絡が大変遅くなり失礼いたしました。
2010.06.22 21:58 | URL | #- [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/158-e16b69b7
← いや~なんとロマンチックに挑戦! → タータンチェックでさわやかに・・