Movable Type 備忘録

エントリ日付を日めくりカレンダー風にカスタマイズ

May192007
Author: bzbell
Categories: Customize
Tags: Customize, Entry Date, MovableType

Next Page: MTRelativePathプラグイン
Prev Page: CSSでドロップメニュー

こんにちわ^^

今日の朝はゆっくり寝れました (●´∀｀●)
いつもなら、うちの猫ちゃんが朝早くからご飯の催促で起こされるのですが、なぜか今日はずっと静かに寝てる。

たまにこういうことあると、毎度のことながら死んじゃったのかとビックリする今日この頃です (;￣∇￣A

さて、今回はエントリの日付を日めくりカレンダー風にするカスタマイズのご紹介です。

以前、わたしのサイトで表示させてたものですが、メモ帳を整理してたら紹介してなかったのに気づいて記事にしてみました。

まずはサンプル♪

このカスタマイズはこちらのCSS Date Blocks for Blogsを参考に、MovableType(ムーバブルタイプ)用にカスタマイズしたものです。

カスタマイズ

以下に上記サンプルのXHTMLを記します。

日めくりカレンダー風

<div class="dateblock">
<div class="month"><$MTEntryDate language="en" format="%b"$></div>
<div class="day"><$MTEntryDate format="%d"$></div>
<div class="year"><$MTEntryDate format="%Y"$></div>
</div>

次に、グレー側のスタイルシートを以下に記します。

スタイルシート(グレー)

div.dateblock {
width: 50px; /*日付ブロック幅 */
padding-top: 5px; /*各自で調整 */
text-align: center;
font-family: Arial, Tahoma; /*お好みで指定 */
color: #330033; /*日付ブロック内前景色*/
background-color: #eee; /*日付ブロック内背景色*/
border: 3px solid #4c597f; /*ボーダー */
}
div.dateblock div.day {
position: relative;
top: -5px; /*(日)を絶対配置 */
font-size: 26px; /*お好みで指定 */
}
div.dateblock div.month {
font-size: 12px; /*お好みで指定 */
}
div.dateblock div.year {
margin-bottom: -5px; /*各自で調整 */
position: relative;
top: -10px; /*(年)を絶対配置 */
font-size: 12px; /*お好みで指定 */
}

こちらのスタイルシートでは、日／月／年ブロックの間隔をpositionプロパティで見映えよくしています。

そして、ピング側のスタイルシートを以下に記します。

スタイルシート(ピンク)

div.dateblock {
width: 50px; /*日付ブロック幅 */
text-align: center;
font-family: Arial, Tahoma; /*お好みで指定 */
color: #a25768; /*日付ブロック内前景色*/
background-color: #fef4f4; /*日付ブロック内背景色*/
border: 3px solid #513743; /*ボーダー */
}
div.dateblock div.day {
font-size: 26px; /*お好みで指定 */
color: #e4d2d8; /*(日)前景色 */
background-color: #c85179; /*(日)背景色 */
}
div.dateblock div.month {
font-size: 12px; /*お好みで指定 */
}
div.dateblock div.year {
font-size: 12px; /*お好みで指定 */
}

こちらのスタイルシートでは、日ブロックの背景を変更して日にちを強調させてみました。
positionプロパティによる調整は行っていません。

以下はブルーのスタイルシートになります。

スタイルシート(ブルー)

div.dateblock {
width: 50px; /*日付ブロック幅 */
text-align: center;
font-family: Arial, Tahoma; /*お好みで指定 */
color: #a25768; /*日付ブロック内前景色*/
background: #eee url(date-header.gif) repeat-y top left;/*日付ブロック内背景色*/
border: 3px solid #513743; /*ボーダー */
}
div.dateblock div.day {
font-size: 26px; /*お好みで指定 */
color: #e4d2d8; /*(日)前景色 */
background-color: #c85179; /*(日)背景色 */
}
div.dateblock div.month {
font-size: 12px; /*お好みで指定 */
}
div.dateblock div.year {
font-size: 12px; /*お好みで指定 */
}

<div class="dateblock">の背景にイメージを貼り付けてみました。
横幅50pxのイメージを作成しています。

以上です。
いつものようにスタイルシートにコメント入れてますので、各自のお好みで調整してください。

Trackback Pings(2)

TrackBack URL for this entry:

from むちゃとアプルの１日。: 日めくりカレンダー Movable Type備忘録さまのbzbellさまにご指...
Tracked on February 10, 2008

from WEB Okanos Customize: Movable Type 備忘録さんが紹介しているカスタマイズです。紹介記事の...
Tracked on March 22, 2008

Comments(17)

#1: Posted by ヨンシマイ [RES]: こんばんは、初めまして。
こちらの記事を参考に日めくり風に
年月日をつくってみました。
どうもありがとうございました。
Posted on August 21, 2007

#2: Posted by bzbell [RES]

>>1 ヨンシマイさん

こんにちわ^^
うさちゃん、かわいいですね♪

エンセファリトゾーン症!? ですか ( ノω-、)

Posted on August 21, 2007

#3: Posted by .ロク [RES]: はじめまして
日めくりカレンダー風カスタマイズを利用させてもらいました。
見た目がちょっとだけ良くなって、満足できました。
ありがとうございます。
Posted on January 29, 2008

#4: Posted by bzbell [RES]

>>3 .ロクさん

こんにちわ^^

かわいいサイトですね
イメージファイルを使用するともっとかわいくなるかも

Posted on January 29, 2008

#5: Posted by アプル [RES]

bzbellさま。こんにちわ。またまたお久しぶりです(-_-;)
先日のスパムコメントの件なのですが・・・ともちんさまだけのようなので
ともちんさまにMovable Typeに登録してもらってインしてもらうように
お願いしたら了解して下さり、今ではスムーズにコメントが入るように
なりました。謎が解けないのは悔しかったんですけど・・・。
本当に色々とありがとうございました。

そしてまたまたご質問とご指導を・・・。
エントリータイトルをエントリ部分の上にやっと出来てからbzbellさまの
エントリ日付を日めくりカレンダー風にカスタマイズを使わせて頂きたいと
思っていて表示はされるのですが・・・エントリー内の日付・Category
Tagがカレンダーの下にきてしまいます。bzbellさまのように
カレンダー右横に日付・Category・Tagを持ってきたいのですが

カ　Date：
レ Category：
ン　Tag：
ダ

エントリータイトルをいじった事でおかしいのでしょうか？
お忙しいとは思いますが、ご指導を宜しくお願い致しますm(._.)m

Posted on February 8, 2008

#6: Posted by bzbell [RES]

>>5 アプルさん

こんばんわ^^

> 謎が解けないのは悔しかったんですけど・・・。

う～ん悔しいですネェ
わたし的にはすっごく気になってたんですけど･･･お役に立てなくってすいません。

日めくりカレンダー風の件ですが、アプルさんの場合は以下のようにテンプレートを変更してください。

<div class="asset_meta clearfix">
    <div class="dateblock"> 
        <span class="month"><$MTEntryDate language="en" format="%b"$></span>
        <span class="day"><$MTEntryDate format="%d"$></span>
        <span class="year"><$MTEntryDate format="%Y"$></span>
    </div>

    Date: ･･･
    Category : ･･･

    <div class="entry-tags">
        <h3 class="entry-tags-header">Tag:</h3>
        <ul class="entry-tags-list">
            :
            :
        </ul>
    </div>
</div><!-- asset_meta -->

そして以下はスタイルシートになります。

.dateblock {
    margin-right: 1em;
    width: 50px;
    height: 60px;
    text-align: center;
    text-indent: 0;
    float: left;
    line-height: normal;
    font-family: Arial, Tahoma;
}
.dateblock span {
    display: block;
}
.dateblock span.day {
    font-size: 22px;
}
.dateblock  span.month,
.dateblock  span.year {
    font-size: 12px;
}

まずはこれで

Posted on February 9, 2008

#7: Posted by アプル [RES]: bzbellさま。こんにちわ。
早速のご指導ありがとうございます。
ちゃんと設置出来ました～。
<div class="entry-tags">のタグがない！と
かなり悩みましたが・・・ワンちゃんのお散歩に行って
頭を冷やしIncludeされている事に気がついて
設置する事が出来ました(-_-;)
知識がないと焦るばかりです・・・。
これからも色々と初歩的な事で質問するかと
思いますが・・・本当に宜しくお願い致しますm(._.)m
Posted on February 9, 2008

#8: Posted by アプル [RES]

度々・・・すいません(-_-;)
チャックしたと思ってコメントを入れたのですが・・・
Monthly Archivesで月をクリックすると・・・
崩れてしまいます。とほっほ・・・。

ブログ記事の概要・ブログ記事の詳細の
他にもアーカイブテンプレートのブログ記事リストか
何かに入れるのでしょうか？(-_-;)

宜しくお願い致します。

Posted on February 9, 2008

#9: Posted by bzbell [RES]

>>7 アプルさん

こんにちわ^^

> ちゃんと設置出来ました～。

よかったですねぇ
何だかわたしの説明が下手っぴで悩ませてしまったようで･･･すいません

> これからも色々と初歩的な事で質問するかと
> 思いますが・・・本当に宜しくお願い致しますm(._.)m

はい。こちらこそよろしくですの

Posted on February 9, 2008

#10: Posted by bzbell [RES]

>>7 アプルさん
>>8 アプルさん

こんにちわ^^

> Monthly Archivesで月をクリックすると・・・

今アプルさんとこ行ってチャック（）しに行ったのですが削除されてます !?
まずは落ち着いて、

インデックステンプレートを新規作成（たとえば、test.php）してください。
メインページのテンプレートを test.php にコピペしてください。
ゆっくり問題解決しましょ

てなかんじでやります。
メインページをコピペした test.php の URL と追加したスタイルシートを教えてください。
わたしの方から確認してみます

Posted on February 9, 2008

#11: Posted by アプル [RES]

bzbellさま。
早速のご指導ありがとうございます。

>まずは落ち着いて

ハイ(^-^")/すいません。

bzbellさまへ自力で出来た♪と言いたくて・・・
いじってました(-_-;)でも結局解決ならずに
戻しました。これでいじりません(-_-;)

ＴＯＰページとMonthly Archivesの2月は普通通りに
表示されます。以下1月～2007年7月～12月が
崩れます・・・。

宜しくお願い致します。

Posted on February 9, 2008

#12: Posted by bzbell [RES]

>>11 アプルさん

原因わかりましたよ

>>6 でご紹介した構造になっていないエントリがあります。
具体的には、タグ（Tag: xxx yyy zzz）がないエントリで、<div class='asset_meta'> に対する
</div> が作成されてません。

>>7 のコメントで気になること（Include されてる）を言われてますよね。
もしかして、そのインクルードの中に </div> をいれてませんか

だとすると、タグがないエントリの場合にはそのインクルードがされない（= </div> が表示されない）ということになりませんか

Posted on February 9, 2008

#13: Posted by アプル [RES]

bzbellさま。
早速のご指導ありがとうございます。

Includeを下記のようにしてあります。

<MTEntryIfTagged>
<div class="entry-tags">
<h3 class="entry-tags-header">Tag:</h3>
<ul class="entry-tags-list">
<MTEntryTags>
<li class="entry-tag"><a href="<$MTTagSearchLink$>&IncludeBlogs=<$MTBlogID$>" rel="tag"><$MTTagName$></a></li>
</MTEntryTags>
</ul>
</div>
</div>
</MTEntryIfTagged>

下から3行目の</div>を削除って事でしょうか？
宜しくお願い致します。

Posted on February 9, 2008

#14: Posted by bzbell [RES]

>>13 アプルさん

では、以下のようにしてみてください。

<div class="asset_meta clearfix">
    <div class="dateblock"> 
        <span class="month"><$MTEntryDate language="en" format="%b"$></span>
        <span class="day"><$MTEntryDate format="%d"$></span>
        <span class="year"><$MTEntryDate format="%Y"$></span>
    </div>

    Date: ･･･
    Category : ･･･

    <$MTInclude module="タグ"$>
</div><!-- asset_meta -->

上記は >>6 でご紹介したものに、エントリタグをインクルードする場合の記述になります。
<$MTInclude module="タグ"$> が、たぶん >>13 のテンプレートモジュールにあたるところだと思います。
MTInclude の「タグ」はアプルさんとこで使用しているテンプレートモジュール名称に置き換えてください

Posted on February 9, 2008

#15: Posted by アプル [RES]

bzbellさま。
早速のご指導ありがとうございます。

出来ました♪ありがとうございました
bzbellさまってほんとに凄いですよね。もう感謝でいっぱいです。
タグがないとこでこんなにも崩れるなんてビックリです。
それを分かるなんて本当に凄いの一言です。
親身になってご指導して下さって、本当にありがとうございました。
それなのに私は焦るばかりで「まずは落ち着いて」の一言は
これからも忘れないようにしようと思います。
それにとってもこの一言に(´▽｀) ホッとしました、。

これからも宜しくお願い致します

Posted on February 9, 2008