mysticdiary

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

mysticdiaryの改良版ができた~

どうも最近横長のディスプレイが主流になったせいか、
テンプレートの幅を大きくしたい!というような要望が多くなってきたような気がする。
管理人のテンプレートは幅900pxぐらいが主流なのだが、mysticdiaryとかmysticpaperの場合、中央揃えではなく、
画面左端にくっつけているため、横長のディスプレイで見ると、どうも見にくいというか、
メインカラムが小さく見えてしまうのである。

それで、画面が横長の場合にも見やすくするためにはどうしたらいいだろうかと考えて、
メインカラム可変幅に挑戦してみることにした。

mysticdiary2.jpg




左のサイドバーは固定。メインカラムだけがディスプレイの大きさにあわせて変化する。
しかし、この可変幅で思わぬ落とし穴が。
背景画像に本の画像を入れているため、縦と横に一度に伸ばせるようにしなければならない。
従来のmysticdiaryだと、幅は決まっているため、単純に背景画像を縦に繰り返せば良かったのだが、
今回は、縦にも横にも繰り返さなければならない。
これをどうするかと考えて、まずtableレイアウトならば、可変幅も比較的容易に作れるのだが、
これはseo上の理由からできるだけ避けようと思った。
なので、どうしてもcssで実現したい。
考えあぐねた挙げ句、画面をヘッダー、メイン、フッターの3つのパートに分割し、
それぞれのパートに画像を3枚重ねて表示することでなんとか実現できた。
ただし、png画像の透過は重ねるという性質上、使えない。
下の画像がすけてみえてしまっては困るのである。
一番下に、メインカラムの紙の色の画像を繰り返していれて、
その次に本の端の画像を重ねていくという方法のため、どうしても bodyに設定した背景色と
合成した画像を使わなければならなくなった。
透過画像ならば、自由にbodyの背景色や背景画像が設定できるのだが、
透過が使えない以上、この辺の自由はなくなってしまった。
もしかしたら、もっといい方法があるのかも知れないが、今回はこの辺が限界(笑)。
なので、背景色が少々明るいバージョンと、サイドバーの装飾が付箋バージョンも
ついでに作成してみた。
この辺の組み合わせはお好みで変更できる。

mysticdiary3.jpg



あとは少々細かい部分を手直しして、共有申請してみるつもりである。
関連記事
baorin

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

16 Comments

samy says...""
素敵なテンプレ!早速DLさせて頂きましたが・・・
IE6だとレイアウトが崩れてしまうと友人から言われました^^;
何か解決法があればご教授くださいませ<(_ _)>
2010.03.19 18:25 | URL | #- [edit]
管理人 says...""
samyさん、こんにちは。

実はie6での表示崩れは承知している所なのですが、
管理人はサポートしない方針です(スミマセン・・・)
youtubeやgoogleなど大手サイトでも3月ぐらいからサポート外に
なっているようですし、管理人もはやくなくなってくれれば
いいのにとさえ思います。(爆)
そのお友達にはなるべくie7以降に変更するようにすすめてあげて
ください・・・。
2010.03.20 07:23 | URL | #- [edit]
samy says...""
ご返答ありがとうございます!
ですよねぇ~・・・
せっかく重厚な書籍っぽくて素敵なテンプレなので
IE7以降で見てもらうようにします(^^
2010.03.20 11:16 | URL | #- [edit]
mic-mac says...""
早速使わせていただいてますが、ツィッターの部分どのようにリンクさせるとよろしいですか?

お手数ですがよろしくご指導のほどお願いします。
2010.03.26 12:14 | URL | #- [edit]
管理人 says...""
mic-macさん、こんにちは。

ナビゲーションの編集についてはこちらの記事を参考にしてください。

http://mysticdiary.blog99.fc2.com/blog-entry-136.html
2010.03.26 13:05 | URL | #- [edit]
mic-mac says...""
どうもありがとうございました!!
2010.03.26 18:33 | URL | #- [edit]
ふうりんちゃ says...""
昨日ダウンロードさせてもらって、早速使用して非常に気に入っております!
(素敵だし見やすいテンプレートだと、評判もすごく良いです。)

ただ、右上のツイッター等はまったく使用しなそうなので削除させてもらいました。すいません。

それで、ちょっと空間が寂しいので出来たら同じ場所辺りに小さな画像でも…と思って、あちこち調べて試行錯誤したのですが、画像が入れられません(汗

どうしても、グラデーションの背景の代わりに、でしか画像が入れられず、グラデーションの上に画像を乗せる事が出来ず。。。

勝手にカスタマイズして非常に申し訳ないのですが、もしよろしければ手ほどき頂ければと思い、書き込みさせてもらいました。

ずうずうしいお願いですいません。
2010.04.02 16:30 | URL | #- [edit]
管理人 says...""
ふうりんちゃさん、こんにちは。
お返事が遅くなってごめんなさい。
もう解決してるかもしれませんが、少しだけ画像の入れ方を
書きますと、上部ナビゲーションのhtmlは削除して
かわりに画像用のhtmlを記入して、絶対配置で位置を
コントロールするというやり方が簡単だと思います。

ヘッダー部分や背景部分の画像のアドレスだけ変更するという
やり方だと、うまくいかないと思います。





2010.04.14 07:01 | URL | #- [edit]
ふうりんちゃ says...""
ありがとうございます。
体調の方、もう大丈夫でしょうか。
お返事頂き、恐縮です。

なるほど…と言いたいところですが、まったくの初心者なので
まったくピンと来ず…(汗

でも、画像のアドレス変更では上手くいかないと言う事はわかったので、
画像用のHTML、絶対配置…検索して勉強してみます。

それでもわからない時はまた相談に乗っていただけると助かります。。。
2010.04.15 10:40 | URL | #- [edit]
三崎アイタ says..."タイトル"
こちらでした!
コメント場所を間違えてしまいすいませんでした。
ツイッターの方も調べようと思ってたのですが、こちらの質問されてる方がいらっしゃったので、解決出来助かりました。
わかりやすく教えて頂きありがとうございました。
2010.10.18 18:38 | URL | #- [edit]
メアリー says..."はじめまして!"
このテンプレート、すごく素敵です!
どうして今まで見つけられなかったんだろう…
ちなみに、いいなぁ~と思って開いたことのあるテンプレートの多くが
MD様のものだということに気が付きました。すごく好きです!

この本デザインのテンプレートですが
左右逆バージョンにするのは難しいですか?
上からみえてるタグとか、ブログタイトルはそのままに
本の部分だけ左右逆(左ページがメイン記事)だと
イメージ完璧!

というのも、(あくまでも私の中で…ですが)
記事がメイン>サイドバーは資料的位置づけ
なので、ふせんなんかつけながら
メモ的内容を ちらっとみえる右ページ(サイドバー)へ…

だと、メチャメチャ嬉しい!

薔薇の写真メインのブログで
今まで写真が490p幅でしか使えなかったので
ぜひ、このテンプレ使いたいのですが…

左右逆…難しいかしら。

どうぞ、よろしくお願いします!
2011.03.24 09:20 | URL | #Lb0elJ46 [edit]
果汁100% says...""
ここでコメントしていいかわからないのですが
テンプレートの「oldnews」ですが使わせてもらってますが
テンプレートの見本写真的なものと僕のブログでプレビューすると形が全体的に大きくて、それから左右のプラグインの位置がすべて右にいきます

これは使ってる人がカスタムして左右にプラグインがはれるのでしょうか
それとももとからなのでしょうか


僕はこのテンプレートを小さくしてプラグインを左右に並べればいいです
どうぞよろしくお願いします
2011.03.24 13:19 | URL | #8sgADkVA [edit]
メアリー says..."もうひとつ…"
プレビューで自分のブログをいれてみたら
左右逆なんて どうでもいいと思えるくらい
素敵だと思えてきました!
(スミマセン)

でも、プレビュー見て1つ気になることが。

①コメント・トラックバックの欄が 
 タイトル下に入っていますが
 記事下にあったらいいなぁ~と思います。

②記事を読んで すぐコメントを書けるように
 記事のスグ下にコメントのボタンとともに
 コメントフォームが表示されるとうれしいです。
 (今は、他の方のコメントの下に コメントフォームがでますよね?)

 これって、自分でカスタムできる範囲でしょうか。

どうぞ、よろしくお願いいたします。
2011.03.25 19:09 | URL | #- [edit]
管理人 says..."メアリーさんへ"
こんにちは。

すみませんが、
今のところ左右逆バージョンを作成する予定はありません。

コメント欄の位置を上下で変更するのは可能だと思いますが、
個別のカスタマイズについては、こちらでは対応しません。
よろしくお願いします。
2011.03.28 13:32 | URL | #i4E9Nobc [edit]
管理人 says..."果汁100%さんへ"
こんにちは。

プレビューでレイアウトが崩れるのは、
おそらく記事中かプラグインHTMLのどこかにタグの閉じ忘れか、
削除し残したものがある可能性があります。

一度チェックしてみてください。
2011.03.28 13:34 | URL | #i4E9Nobc [edit]
くるみ says...""
baobaorinさま
お加減いかがですか?
こちらのテンプレートのファンで、季節ごとにいくつも使わせていただいています。
今日、どんなにやっても分からなかったことを質問させて下さい。
本文のリスト化がどうしてもできないのです。記事作成画面下のプレビューではリストになっているものの、アップするとリストになりません。
スタイルシートをいじったりしたのですが、できませんでした。
お身体に無理がないようでしたらお教えいただけると嬉しく思います。
2011.10.15 18:31 | URL | #Bhz1aAUg [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/146-b85889e4
← mysticdiary2/背景色等変更の仕方 → 上野お散歩2/黒田記念館周辺