Movable Type 備忘録

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

こんにちわ^^

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

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

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

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

まずはサンプル♪

サンプルを表示できませんでした。 サンプルを表示できませんでした。 サンプルを表示できませんでした。 サンプルを表示できませんでした。 サンプルを表示できませんでした。 サンプルを表示できませんでした。

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

カスタマイズ

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

日めくりカレンダー風

  1. <div class="dateblock">
  2.     <div class="month"><$MTEntryDate language="en" format="%b"$></div>
  3.     <div class="day"><$MTEntryDate format="%d"$></div>
  4.     <div class="year"><$MTEntryDate format="%Y"$></div>
  5. </div>

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

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

  1. div.dateblock {
  2.     width: 50px; /*日付ブロック幅 */
  3.     padding-top: 5px; /*各自で調整 */
  4.  
  5.     text-align: center;
  6.     font-family: Arial, Tahoma; /*お好みで指定 */
  7.  
  8.     color: #330033; /*日付ブロック内前景色*/
  9.     background-color: #eee; /*日付ブロック内背景色*/
  10.     border: 3px solid #4c597f; /*ボーダー */
  11. }
  12. div.dateblock div.day {
  13.     position: relative;
  14.     top: -5px; /*(日)を絶対配置 */
  15.  
  16.     font-size: 26px; /*お好みで指定 */
  17. }
  18. div.dateblock div.month {
  19.     font-size: 12px; /*お好みで指定 */
  20. }
  21. div.dateblock div.year {
  22.     margin-bottom: -5px; /*各自で調整 */
  23.  
  24.     position: relative;
  25.     top: -10px; /*(年)を絶対配置 */
  26.  
  27.     font-size: 12px; /*お好みで指定 */
  28. }

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

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

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

  1. div.dateblock {
  2.     width: 50px; /*日付ブロック幅 */
  3.  
  4.     text-align: center;
  5.     font-family: Arial, Tahoma; /*お好みで指定 */
  6.  
  7.     color: #a25768; /*日付ブロック内前景色*/
  8.     background-color: #fef4f4; /*日付ブロック内背景色*/
  9.     border: 3px solid #513743; /*ボーダー */
  10. }
  11. div.dateblock div.day {
  12.     font-size: 26px; /*お好みで指定 */
  13.  
  14.     color: #e4d2d8; /*(日)前景色 */
  15.     background-color: #c85179; /*(日)背景色 */
  16. }
  17. div.dateblock div.month {
  18.     font-size: 12px; /*お好みで指定 */
  19. }
  20. div.dateblock div.year {
  21.     font-size: 12px; /*お好みで指定 */
  22. }

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

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

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

  1. div.dateblock {
  2.     width: 50px; /*日付ブロック幅 */
  3.  
  4.     text-align: center;
  5.     font-family: Arial, Tahoma; /*お好みで指定 */
  6.  
  7.     color: #a25768; /*日付ブロック内前景色*/
  8.     background: #eee url(date-header.gif) repeat-y top left;/*日付ブロック内背景色*/
  9.     border: 3px solid #513743; /*ボーダー */
  10. }
  11. div.dateblock div.day {
  12.     font-size: 26px; /*お好みで指定 */
  13.  
  14.     color: #e4d2d8; /*(日)前景色 */
  15.     background-color: #c85179; /*(日)背景色 */
  16. }
  17. div.dateblock div.month {
  18.     font-size: 12px; /*お好みで指定 */
  19. }
  20. div.dateblock div.year {
  21.     font-size: 12px; /*お好みで指定 */
  22. }

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

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

 Trackback Pings(4)

from むちゃとアプルの１日。

日めくりカレンダー Movable Type備忘録さまのbzbellさまにご指...

Tracked on February 10, 2008
from WEB Okanos Customize

Movable Type 備忘録さんが紹介しているカスタマイズです。 紹介記事の...

Tracked on March 22, 2008
from Tetsuyan's Blog

少しおしゃれな「投稿日時の表示カスタマイズ」をやってみました。いつもお世話になっ...

Tracked on June 6, 2008
from 優雅なアフィリエイト生活を夢みて

またまたデザインに小細工個別ページ子、コメント・トラックバックを記事下に移動、少...

Tracked on September 11, 2009

 Comments(20)

#1: Posted by ヨンシマイ @ August 21, 2007 [REPLY]
user-pic

こんばんは、初めまして。
こちらの記事を参考に日めくり風に
年月日をつくってみました。
どうもありがとうございました。

 
#2: Posted by bzbell @ August 21, 2007 [REPLY]
user-pic

>>1 ヨンシマイ さん

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

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

 
#3: Posted by .ロク @ January 29, 2008 [REPLY]
user-pic

はじめまして
日めくりカレンダー風カスタマイズを利用させてもらいました。
見た目がちょっとだけ良くなって、満足できました。
ありがとうございます。
ワクワク

 
#4: Posted by Author Profile Page bzbell @ January 29, 2008 [REPLY]
user-pic

>>3 .ロク さん

こんにちわ^^

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

 
#5: Posted by Author Profile Page アプル @ February 8, 2008 [REPLY]
user-pic

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

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

カ　Date：
レ Category：
ン　Tag：
ダ

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

 
#6: Posted by Author Profile Page bzbell @ February 9, 2008 [REPLY]
user-pic

>>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;
}

まずはこれでうぅ～ん

 
#7: Posted by Author Profile Page アプル @ February 9, 2008 [REPLY]
user-pic

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

 
#8: Posted by Author Profile Page アプル @ February 9, 2008 [REPLY]
user-pic

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

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

宜しくお願い致します。

 
#9: Posted by Author Profile Page bzbell @ February 9, 2008 [REPLY]
user-pic

>>7 アプル さん

こんにちわ^^

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

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

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

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

 
#10: Posted by Author Profile Page bzbell @ February 9, 2008 [REPLY]
user-pic

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

こんにちわ^^

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

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

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

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

 
#11: Posted by Author Profile Page アプル @ February 9, 2008 [REPLY]
user-pic

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

>まずは落ち着いて

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

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

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

宜しくお願い致します。

 
#12: Posted by Author Profile Page bzbell @ February 9, 2008 [REPLY]
user-pic

>>11 アプル さん

原因わかりましたよワクワク

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

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

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

 
#13: Posted by Author Profile Page アプル @ February 9, 2008 [REPLY]
user-pic

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><!-- asset_meta -->
</MTEntryIfTagged>

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

 
#14: Posted by Author Profile Page bzbell @ February 9, 2008 [REPLY]
user-pic

>>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 の「タグ」は アプルさんとこで使用しているテンプレートモジュール名称に置き換えてくださいぺこり

 
#15: Posted by Author Profile Page アプル @ February 9, 2008 [REPLY]
user-pic

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

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

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

 
#16: Posted by Author Profile Page bzbell @ February 9, 2008 [REPLY]
user-pic

>>15 アプル さん

> 出来ました♪ありがとうございました

ほっあせあせよかったぁ。

> それを分かるなんて本当に凄いの一言です。

いえいえ、パターンとして他のページではちゃんと表示されて、特定ページだけが崩れる･･･というケースの場合には、大体がこういったタグがキチンと閉じれてない･･･みたいなかんじなんですウインク

なので、今後もし同様の現象が発生した場合には、再構築後の変更箇所の内容を疑うといいですようぅ～ん

わたしも本業でやってるわけではないので（OL 兼普通の主婦）、人にとやかく言える立場ではないんですあせあせ
でも、わたしが今まで覚えてきたことでお役に立てれば･･･と思いますもじもじ

 
#17: Posted by Author Profile Page アプル @ February 10, 2008 [REPLY]
user-pic

bzbellさま。こんにちわ。あせあせトラバさせて頂きました。
ハイ(^-^")/これからは焦らずに疑う事を覚えたいと思います。
それが出来るかどうか・・・むずいんですけど。

OL兼普通の主婦さまなんですか。またまた凄いの一言です。
ってbzbellさまの勝手な想像してて余計にビックリでした。
お仕事をされて主婦業もやってて凄いです。
これからも本当に宜しくお願い致しますm(._.)m

 
#18: Posted by 哲やん @ June 6, 2008 [REPLY]
user-pic

こんばんは。いつも質問ばかりですみません。

古い記事にやっと私の望んでいたものを見つけました！
4.1ではテンプレートに「ブログ記事のメタデータ」がありますが、どのようにしたらいいのでしょうか・・・

カ　エントリーのタイトル
レ　Date：
ン　Category：
ダ　Tag：

よろしくお願いいたします。

 
#19: Posted by 哲やん @ June 6, 2008 [REPLY]
user-pic

お世話になります・・・
何とか4.1ではできたのですが、4.2RC1ではどうもよくわからなくて・・・

もう少し勉強が必要かなと思っています。
4.2RC1では、「カテゴリ」や「タグ」がどうもよくわかりません。

管理画面は使いやすくなってきたと思うのですが、だんだん複雑になって来ましたね。

 
#20: Posted by Author Profile Page bzbell @ June 7, 2008 [REPLY]
user-pic

>>18 哲やん さん
>>19 哲やん さん

> 管理画面は使いやすくなってきたと思うのですが、だんだん複雑になって来ましたね。

管理画面は使いやすくなりましたね。
それに再構築も格段に速くなってるしウインク

 

 Post a Comment

 

コメント用フィード