MysticDiary

新しいmysticdiary

Posted by baorin   19   0

ひさびさに、mysticdiaryの原点とも言える日記風テンプレートを
リニューアルしました!

今後はhtml5で記述していて、画像なども一新しています。
さらに新しいのは右カラムになったこと!いままではサイドバーは左で左側に
くっつく形になっていたのですが、要望も多かったことから右サイドで作ってみました。

mysticdiarysample.jpg


バックにある写真はスライドショーになっているので、
もし写真を変更したければ可能です。
写真の変更方法などについては後日書きます。

それからプラグイン3は一番下につけたのですが、縦の長さが決まっているので、
そのスペースにおさまるように工夫してください。
プラグインは一つぐらいにしておいた方がきれいにおさまると思います。
フリースペースとして自己紹介などでうめてもいいかも知れません。

これは共有申請したので、来週あたりダウンロードできるようになると思います。

6月13日追記:

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

画像を変更するにはhtmlの下記の画像アドレスを自分のものに変更します。

<script type="text/javascript">
$(function() {
$('.photoimage2').crossSlide({
sleep:4,
fade: 5
}, [
{ src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/mysticdiaryneophoto101.png'},
{ src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/mysticdiaryneophoto102.png' },
{ src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/mysticdiaryneophoto103.png' }
]);
});
</script>

上のhtmlの

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


上の部分ですね。この画像アドレスを自分のサーバーにアップロードしたものに差し替えます。
画像はいくら増やしてもかまいませんが、最後の画像には(,)をつけないように
してくださいね~。

さて、画像の作り方についてですが、これはご自分の画像編集ソフトなどを用いて編集します。
サイズのあわせ方ですが、この場合は特例として
上の画像をサンプルとして自分のパソコンにダウンロードしてください。
そして画像編集ソフトで開きます。
すると周りが透明になっている450px×360pxの画像が開きます。
写真の白い枠の部分を除いた画像の部分は380px×280pxとなります。
この部分に自分の差し替えたい画像をうまく重ねて写真画像を作成してください。
うまく重ねることができたらそのままpng画像として保存します。
そして自分のサーバーにアップロードして、上の説明の通りに画像アドレスを差し替えてください。

関連記事
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.

19 Comments

donna says..."はじめまして"
oldnewsのテンプレートをお借りしている者です。

MDさんのテンプレートはどれも素敵で上質でこっそりファンになってます。simplest、russia、catapillar、そして使わせていただいているoldnews、今回のリニューアルされた日記風テンプレート、どれも大好きです。
早くダウンロードできるようになってプレビューしてみたいです♪楽しみにしています☆
2011.06.05 10:39 | URL | #GVg6XZ8M [edit]
管理人 says..."donnaさんへ"
こんにちは。

テンプレート使っていただいてありがとうございます。
承認されるまでもう少しお待ちください。
よろしくお願いいたします。
2011.06.06 07:47 | URL | #i4E9Nobc [edit]
なお says..."画像変更方法について"
とても良いデザインで気に入りました!
使わさせていただきます。
スライドショーの写真なんですが自分のペットの写真にしようと思うのですが、変更の方法の記事が見当たらないので、できれば早めに載せていただければ助かります;;
今後も良いものを期待しております。
2011.06.13 18:37 | URL | #- [edit]
管理人 says..."なおさんへ"
こんにちは。

記事に追記したので、そちらを参考になさってください。
2011.06.13 20:20 | URL | #i4E9Nobc [edit]
管理人 says..."のんのんさんへ"
こんにちは。

picnikというソフトはよくわかりませんが、
レイヤー機能がないのではないでしょうか?
画像を重ねるにはレイヤー機能がないと難しいです。
レイヤー機能があるフリーソフトとしては、
gimpとかがありますが、web上だと
pixlrがレイヤー機能があります。
ソフトの使い方についてはソフトのマニュアルを
見てください。
2011.06.14 16:38 | URL | #i4E9Nobc [edit]
fuu says..."使わせていただきます"
MDさんのテンプレート使わせてもらっています。

スライドショーの写真を自分で撮った画像に変更させていただいてます。
2011.06.24 20:12 | URL | #xEXxDlDY [edit]
管理人 says..."fuuさんへ"
こんにちは。

どうぞご自由にお使いください。
2011.06.27 12:57 | URL | #i4E9Nobc [edit]
tom says...""
素敵なデザインですね♪

とても気に入りました///


画像をかぇてみたいと思ったので

やり方もみやすく 今日チャレンジしてみたいと思います

今後も頑張ってください///

陰ながら ファンになりました///
2011.07.20 15:21 | URL | #9DD8ZWDM [edit]
管理人 says..."tomさんへ"
こんにちは。

テンプレート気に行ってもらえてよかったです。
今後もよろしくお願いします。
2011.07.21 11:42 | URL | #i4E9Nobc [edit]
うえき says...""
素敵なテンプレートをありがとうございます。
正に探していたもので、驚きました。

さて、初歩的な質問をさせて下さい。

ツィッターとcontactの設定はどのようにすれば良いのでしょうか?
参照すべきところがありましたらお教え下さい。
2011.09.08 01:12 | URL | #QHKanjk2 [edit]
うえき says...""
先の質問ですが、解決しました!
いまさらながら大変勉強になりました。

長く体調を崩されているようで心配です。
早い回復をお祈りしております。

ちなみに、こちらが使わせていただいているホームページです。
http://yonkomama.blog114.fc2.com/
体調の良い時に覗いてみて下さい。評判とても良いです(^^)

あと、ツィッターもフォローさせていただいています。
回復つぶやきをお待ちしております。
2011.09.16 10:57 | URL | #QHKanjk2 [edit]
しろいまちこ says..."色変更について質問させてください"
こんばんは。

新しいmysticdiary
使わせていただいています。
とても気に入っております。ありがとうございます。

画面を少しシックにしたいと思っていて
本の色を赤から緑に変えたいのですが
こういう色変えというのはできるのでしょうか?

以前のテンプレートで背景の色を変えるのは見たことがあるのですが
今回もそのようなことはできるのでしょうか。
(背景色を明るめに、本の色をシックな緑に、というのが第一希望です)

よろしければ、お時間のあるときに
どの部分をどう変えればよいか
教えていただけますとうれしいです。

ご検討くださいますよう、お願いします。
2012.03.31 23:35 | URL | #hufKyueo [edit]
管理人 says..."しろいまちこさんへ"
こんにちは。
本の色変更のことですが、本の色は画像で作っているので
色を変えるなら画像ごと作り替えなければなりません。
いまのところ別の色のバージョンを作る予定がたっていないので、
本の色を変えるのは難しいと思います。
背景の色はcssで背景画像をお好きなものに指定すれば変更できます。
body {
font-size:15px;
font-family: arial, "MS Pゴシック", sans-serif;
text-align:left;
color:#333333;
line-height:1.5em;
background-color:#ffffff;
background-image:url(http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/mysticdiaryback.jpg);
min-width:980px;
}
このcssのbackground-imageを変更するか、削除してbackground-colorを
変更すれば背景の色が変わります。
よろしくお願いします。
2012.04.01 09:03 | URL | #i4E9Nobc [edit]
しろいまちこ says..."ありがとうございます"
教えていただきありがとうございました。

では、近日中に
背景の色を変更してみます。

自分でカスタマイズできる部分があるというのは
やっぱり嬉しいですね♪

これからもどうぞよろしくお願いいたします!
2012.04.04 23:03 | URL | #hufKyueo [edit]
管理人 says..."sanzarumomさんへ"
こんにちは。
大きな画像をのせたいとのことですが、記事の横幅は560pxで固定されているので、
それ以上横幅の大きな画像をのせようとするとレイアウトが崩れると思います。
写真の幅を560pxに編集して載せていただくか、あとは元の大きさの画像を見せたい
とのことであれば、あらかじめ導入されているfancyboxを使っていただくのがおすすめです。
あと、facebookのタグがなくなってしまったとのことですが、このテンプレートには
もともとついていなかったので、なくなったわけではないと思います。
またわからないことがあればご質問ください。
2012.04.08 09:41 | URL | #i4E9Nobc [edit]
のほほん。 says..."MDさん (^_^)"
はじめまして。

新しい mysticdiary、使わせていただいています。
ブログの世界観にとてもフィットしていて、本当にお気入りです。

質問なのですが、ブログをエントリーしたときに、記事の中に動画を貼ると

テンプレート最下部にある、スライドショーの写真が切り替わるたびに
動画の再生が途切れてしまいます。

最初は「僕のパソコンのパワー不足なのかな?」と想ったんですが
読んでくださる方からも、同じような意見をいただいています。

デザインとしては素敵なので、心苦しいのですが
スライドショーを止めることってできるのでしょうか?

お時間のあるときや、体調のよいときで構いませんので
お返事いただけるとうれしいです。

最後までお読みいただき、ありがとうございました。
2012.06.04 10:21 | URL | #GvG.qcf. [edit]
管理人 says..."のほほん。さんへ"
こんにちは。

スライドショーを切るには、htmlのうえの方にあるスクリプトへのリンクを削除します。
(clossslide.jsです)
ただ、動画の再生とスライドショーはあまり関係ないかもしれません。
ブラウザの設定などにもよりますが、管理人もくわしくはわかりません。
よろしくお願いします。
2012.06.05 10:51 | URL | #i4E9Nobc [edit]
ぴんぽ〜ん says..."とっても気に入って使ってます"
こんにちは、

このテンプレートを利用するようになってずいぶん経ちますが、未だこれに勝るテンプレートは現れていません。
スライドショーも自分の写真に変更出来てとっても気に入って使っています。
ありがとうございました。
2012.09.11 15:48 | URL | #qyvdfQeY [edit]
管理人 says..."ぴんぽ〜んさんへ"
こんにちは。

ありがとうございます。これからもよろしくお願いいたします。
2012.09.13 13:06 | URL | #i4E9Nobc [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/376-c3494a06