忍者ブログで独自ドメイン・カスタマイズ日めくりカレンダーのテンプレート３ブロックインディゴブルー

Aug
05
2008

日めくりカレンダーを使った3Bインディゴブルーを公開しました。
このテンプレの共有申請に何回か落ちて、忍者ブログテンプレの開発意欲をなくし、半年以上放置していましたが、現在作成中の別サイトで同じようなテクニックを利用したので、試しに申請してみました。

シンプルな可変３ブロックを作りたかったのですが、画像を使わないとなかなか共有に承認してもらえそうにないので、日めくりカレンダーを使ってみました。

日めくりカレンダインディゴブルー

プラグインカテゴリー１－３が左、４と５が右サイドバーになります。

カレンダーについて
アメリカのブログを見ていると、記事投稿日が日めくりカレンダーになっているものが多く、MovableTypeのプラグインでもPHPカレンダーなどが出ています。忍者ブログでPHPを使った動的なページというのも難しいし、JavaScriptを使うのもテンプレートとしてはカスタマイズ性が落ちるので、とりあえず下記サイトなどを参考にCSSで作ってみました。
brainstormsandraves.com
Creating a Blog Entry Date Calendar Icon Look with CSS, Mostly
mahud's blog

個人的には月の表示を「Dec」のように英語表示したかったのですが、忍者ブログの独自構文ではないようなので、brainstormsandraves.comとは多少レイアウトを変えて上の帯の部分に投稿月、日めくり部分に「曜日(英語)」「投稿日」「投稿年」の順番で表示しました。ブラウザの文字表示を大きくするとレイアウトが崩れ、はみ出してしまうのが課題ですが、まずは使ってみようとUPしてみました。
カレンダ部分は月日別ページへのリンクとなっていますが、個人的にはこのページはあまり使わないので、記事ページへのリンクの方がいいかなとも思っています。

悩みはフォントサイズの指定方法です。
配布したものはピクセルで指定しましたが、上記参照サイトではemや%で指定しています。いろんな環境できちんと収まって欲しいのですが、どのように指定すべきかまだ自分の中で結論が出ていないのです。

実は既にチャコールシルバー・ラズベリーピンク・フォレストグリーンと合計４色作成済みですが、このインディゴブルーで初期トラブルがあった場合を考えて申請はしていません。
使って頂くのは構いませんので、ご希望があるようでしたらコメント等で連絡ください。

　

チャコールシルバーはこちらからダウンロード出来ます。
http://file.ninja-blog.com/CharcoalSilver.zip
設定方法の詳細はこちら　→　ZIP配布のテンプレートの利用方法

さて、このテンプレートの特徴は他に下記のものを取り入れています。
・ネガティブマージンを使った幅可変（プラグイン固定・メイン可変）
・記事編集ページへの直接リンク
・パンくずリスト
・カテゴリ・アーカイブページに記事タイトルリスト

ネガティブマージンを使っているので、プラグインの幅などをカスタマイズするのが通常のテンプレとは違い、複雑になってしまっています。
解説は長くなってしまいますので、詳しくはおって記事を作成したいと思いますが、プラグインの幅の変更方法のみ記載します。

１．PluginBlockの幅指定
プラグイン１～３が左に表示されます。
.PluginBlockLeft　初期設定はwidth:200px;にしています

プラグイン４～５が右に表示されます。
.PluginBlockRight 初期設定はwidth:200px;にしています

２．#containerの右ネガティブマージン変更（右変更時のみ）
初期設定はmargin-right:-205px;となっています。
上記１で右プラグインの幅を仮に220とした場合このmargin-rightを-225px;としてみてください。

３．#EntryBlockの左ネガティブマージン変更（左変更時のみ）
上記１で左プラグインの幅を仮に220とした場合、margin-left:-220px;としてください。

４．#EntryBlock>*のマージン変更
左を変更した場合はmargin-left :を左プラグインの幅に
右を変更した場合はmargin-right:を右プラグインの幅に

５．.EntryInnerBlockのマージン変更
左を変更した場合はmargin-left :を左プラグインの幅より少し大きめに
右を変更した場合はmargin-right:を右プラグインの幅より少し大きめに
大きめというのが、IEなどの場合メイン部分の左右マージンとなります。
Firefoxでは反映されないと思いますが、多少余裕があった方が見た目にきれいです。

６．.PageLinkBlockのマージン変更
左を変更した場合はmargin-left :を左プラグインの幅に
右を変更した場合はmargin-right:を右プラグインの幅に

７．.CommentBlockのマージン変更
左を変更した場合はmargin-left :を左プラグインの幅に
右を変更した場合はmargin-right:を右プラグインの幅に

８．.TrackbackBlockのマージン変更
左を変更した場合はmargin-left :を左プラグインの幅に
右を変更した場合はmargin-right:を右プラグインの幅に

９．.TitleListBoxのマージン変更
左を変更した場合はmargin-left :を左プラグインの幅より少し大きめに
右を変更した場合はmargin-right:を右プラグインの幅より少し大きめに

これだけ手間がかかるとやる人はいないかもしれませんね（笑）幅可変用に最初からhtmlとCSSを設計すればもう少しすっきり出来るでしょうが、忍者ブログの新規テンプレート作成で出来たテンプレを元に作っていくとこうなってしまいました。
幅可変にする方法はネガティブマージン以外にもあって、それぞれメリットデメリットがあるのでいろいろ試してみるといいかもしれません。

ネガティブマージンの設計については
http://www.alistapart.com/（英文）
が参考になります。

その他のテンプレート

スノーマン	透過フォト	黄昏
ピンクonブラック	ひらめき裸電球	フラワー

忍者ブログテンプレート Comment(5) Edit

この記事にコメントする

はじめまして

がりんぺいろ様の記事を最初の足がかりとして、
ブログを作ることができました。
加えて、3Bインディゴブルーのテンプレートも
利用させていただきました。

まだまだ勉強になりそうなたくさんの記事が
ありそうなので見させていただこうと思います。
ありがとうございました。

イフゼンエルス Ninja URL 2009/03/04(Wed)00:35:05 編集

Re:はじめまして

イフゼンエルス Ninja 様
はじめまして。独自ドメイン化されたのですね。おめでとうございます。
GooglaAppsもご利用とのこと。ドメインライフをお楽しみください。

【2009/03/04 08:12】

ちょっとお借りします

富士の病の親父殿つながりでの訪問です。
画像サイズで苦労されているようなので、
私も同じテンプレでテストしていので、ちょっとお借りします。m(__)m

千秋 URL 2008/12/06(Sat)22:16:20 編集

Re:ちょっとお借りします

千秋様　はじめまして。
楽しそうなお仲間なのですね。

【2008/12/08 06:53】

使わせて頂きます

はじめまして。
チャコールシルバーを使わせて頂きます。

親父 URL 2008/12/06(Sat)11:47:43 編集

Re:使わせて頂きます

親父様　はじめまして。
富士山の写真がすばらしいですね。
私もフライフィッシング・スキューバダイビングやゴルフで伊豆・御殿場・富士五湖・早川周辺には良くいくのですが、写真の技術が伴わなくて。

【2008/12/06 14:01】

ありがとうございました

コピペしてみましたが、私のやり方が間違っているのか、右のプラグインが左のプラグインと記事の真下に横長く表示され右側は空白になってしまいました。

どうしてでしょうか？

ると URL 2008/08/25(Mon)23:19:09 編集

Re:ありがとうございました

お手数をおかけし、申し訳ありません。

症状から判断すると記事部分と右プラグインの間に余分な#&60;div>があるような気がしたのですが、htmlコードをチェックした限りは判明しませんでした。

私のブログでテストした結果も正常に表示されました。

他に原因としては、プラグイン部分に幅の大きいブログパーツなどがあったり、記事内に</div>があったりする場合に発生すると思います。

継続してチェックをしますが、現状のご報告まで。

なお、ZIP配布のテンプレ利用方法を記事にしましたのでご参照ください。
http://ninja-blog.com/Entry/39/

【2008/08/26 12:22】

はぢめまして

早速使わせて頂いています^^>

私のブログはリンクな文字を青で表示しているのですが、左のプラグインだけは黒くなってしまうのは仕方ないのでしょうか？

そしてチャコールシルバー希望！！です。
出来れば白い部分が灰色であれば最高です^^;;

あまり濃くないモノトーンが落ち着いて目に優しくて好きなんです。

またいいテンプレート期待しています。

ると URL 2008/08/21(Thu)20:10:35 編集

Re:はぢめまして

ると様　はじめまして。
テンプレご利用・コメントそしてリクエストありがとうございます。
ご質問のプラグインの文字色ですが、確認後解答させて頂きます。
実は私もチャコールシルバーの色合いは大好きでして、このようなイメージのサイトを良く作っております。テンプレファイルは下記よりダウンロード下さい。
http://file.ninja-blog.com/CharcoalSilver.zip

解凍後「新規テンプレート作成」のhtmlとcssにそれぞれコピペして名前を付けて保存してください。
詳しくはhttp://ninja-blog.com/Entry/39/をご参照ください。
なお、公開申請に通ったものではありませんので、自己責任でのご利用をお願い致します。（インディゴブルーをベースにカラー・画像変更したのみですので、問題は無いはずですが。）

【2008/08/26 12:33】

[43] [42] [41] [40] [39] [33] [38] [34] [32] [31] [36]

独自ドメイン設定方法

簡単設定３ステップ ドメイン取得ＤＮＳ設定忍者ブログ設定

カテゴリー

お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード