Movable Type 備忘録
エントリ日付を日めくりカレンダー風にカスタマイズ
- Prev Page: MovableTypeのカテゴリ一覧などをツリー表示する2
- Next Page: MTRelativePathプラグイン
こんにちわ^^
今日の朝はゆっくり寝れました (●´∀`●)
いつもなら、うちの猫ちゃんが朝早くからご飯の催促で起こされるのですが、なぜか今日はずっと静かに寝てる。
たまにこういうことあると、毎度のことながら死んじゃったのかとビックリする今日この頃です (; ̄∇ ̄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(4)
- from
むちゃとアプルの1日。
日めくりカレンダー Movable Type備忘録さまのbzbellさまにご指...
- from
WEB Okanos Customize
Movable Type 備忘録さんが紹介しているカスタマイズです。 紹介記事の...
- from
Tetsuyan's Blog
少しおしゃれな「投稿日時の表示カスタマイズ」をやってみました。いつもお世話になっ...
- from
優雅なアフィリエイト生活を夢みて
またまたデザインに小細工個別ページ子、コメント・トラックバックを記事下に移動、少...




こんばんは、初めまして。
こちらの記事を参考に日めくり風に
年月日をつくってみました。
どうもありがとうございました。
>>1 ヨンシマイ さん
こんにちわ^^
うさちゃん、かわいいですね♪
エンセファリトゾーン症!? ですか ( ノω-、)
はじめまして

日めくりカレンダー風カスタマイズを利用させてもらいました。
見た目がちょっとだけ良くなって、満足できました。
ありがとうございます。
>>3 .ロク さん
こんにちわ^^
かわいいサイトですね
イメージファイルを使用するともっとかわいくなるかも
bzbellさま。こんにちわ。またまたお久しぶりです(-_-;)
先日のスパムコメントの件なのですが・・・ともちんさまだけのようなので
ともちんさまにMovable Typeに登録してもらってインしてもらうように
お願いしたら了解して下さり、今ではスムーズにコメントが入るように
なりました。謎が解けないのは悔しかったんですけど・・・。
本当に色々とありがとうございました。
そしてまたまたご質問とご指導を・・・。
エントリータイトルをエントリ部分の上にやっと出来てからbzbellさまの
エントリ日付を日めくりカレンダー風にカスタマイズを使わせて頂きたいと
思っていて表示はされるのですが・・・エントリー内の日付・Category
Tagがカレンダーの下にきてしまいます。bzbellさまのように
カレンダー右横に日付・Category・Tagを持ってきたいのですが
カ Date:
レ Category:
ン Tag:
ダ
エントリータイトルをいじった事でおかしいのでしょうか?
お忙しいとは思いますが、ご指導を宜しくお願い致しますm(._.)m
>>5 アプル さん
こんばんわ^^
> 謎が解けないのは悔しかったんですけど・・・。
う~ん悔しいですネェ
わたし的にはすっごく気になってたんですけど・・・お役に立てなくってすいません。
日めくりカレンダー風の件ですが、アプルさんの場合は以下のようにテンプレートを変更してください。
そして以下はスタイルシートになります。
.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; }まずはこれで
bzbellさま。こんにちわ。
早速のご指導ありがとうございます。
ちゃんと設置出来ました~。
<div class="entry-tags">のタグがない!と
かなり悩みましたが・・・ワンちゃんのお散歩に行って
頭を冷やしIncludeされている事に気がついて
設置する事が出来ました(-_-;)
知識がないと焦るばかりです・・・。
これからも色々と初歩的な事で質問するかと
思いますが・・・本当に宜しくお願い致しますm(._.)m
度々・・・すいません(-_-;)
チャックしたと思ってコメントを入れたのですが・・・
Monthly Archivesで月をクリックすると・・・
崩れてしまいます。とほっほ・・・。
ブログ記事の概要・ブログ記事の詳細の
他にもアーカイブテンプレートのブログ記事リストか
何かに入れるのでしょうか?(-_-;)
宜しくお願い致します。
>>7 アプル さん
こんにちわ^^
> ちゃんと設置出来ました~。
よかったですねぇ
何だかわたしの説明が下手っぴで悩ませてしまったようで・・・すいません
> これからも色々と初歩的な事で質問するかと
> 思いますが・・・本当に宜しくお願い致しますm(._.)m
はい。こちらこそよろしくですの
>>7 アプル さん
>>8 アプル さん
こんにちわ^^
> Monthly Archivesで月をクリックすると・・・
今 アプル さんとこ行ってチャック(
)しに行ったのですが削除されてます !?
まずは落ち着いて、
てなかんじでやります。
メインページをコピペした test.php の URL と追加したスタイルシートを教えてください。
わたしの方から確認してみます
bzbellさま。
早速のご指導ありがとうございます。
>まずは落ち着いて
ハイ(^-^")/すいません。
bzbellさまへ自力で出来た♪と言いたくて・・・
いじってました(-_-;)でも結局解決ならずに
戻しました。これでいじりません(-_-;)
TOPページとMonthly Archivesの2月は普通通りに
表示されます。以下1月~2007年7月~12月が
崩れます・・・。
宜しくお願い致します。
>>11 アプル さん
原因わかりましたよ
>>6 でご紹介した構造になっていないエントリがあります。
具体的には、タグ(Tag: xxx yyy zzz)がないエントリで、<div class='asset_meta'> に対する
</div> が作成されてません。
>>7 のコメントで気になること(Include されてる)を言われてますよね。
もしかして、そのインクルードの中に </div> をいれてませんか
だとすると、タグがないエントリの場合には そのインクルードがされない(= </div> が表示されない)ということになりませんか
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>を削除って事でしょうか?
宜しくお願い致します。
>>13 アプル さん
では、以下のようにしてみてください。
上記は >>6 でご紹介したものに、エントリタグをインクルードする場合の記述になります。
<$MTInclude module="タグ"$> が、たぶん >>13 のテンプレートモジュールにあたるところだと思います。
MTInclude の「タグ」は アプルさんとこで使用しているテンプレートモジュール名称に置き換えてください
bzbellさま。
早速のご指導ありがとうございます。
出来ました♪ありがとうございました
bzbellさまってほんとに凄いですよね。もう感謝でいっぱいです。
タグがないとこでこんなにも崩れるなんてビックリです。
それを分かるなんて本当に凄いの一言です。
親身になってご指導して下さって、本当にありがとうございました。
それなのに私は焦るばかりで「まずは落ち着いて」の一言は
これからも忘れないようにしようと思います。
それにとってもこの一言に(´▽`) ホッとしました、。
これからも宜しくお願い致します
>>15 アプル さん
> 出来ました♪ありがとうございました
ほっ
よかったぁ。
> それを分かるなんて本当に凄いの一言です。
いえいえ、パターンとして他のページではちゃんと表示されて、特定ページだけが崩れる・・・というケースの場合には、大体がこういったタグがキチンと閉じれてない・・・みたいなかんじなんです
なので、今後もし同様の現象が発生した場合には、再構築後の変更箇所の内容を疑うといいですよ
わたしも本業でやってるわけではないので(OL 兼普通の主婦)、人にとやかく言える立場ではないんです
でも、わたしが今まで覚えてきたことでお役に立てれば・・・と思います
bzbellさま。こんにちわ。
トラバさせて頂きました。
ハイ(^-^")/これからは焦らずに疑う事を覚えたいと思います。
それが出来るかどうか・・・むずいんですけど。
OL兼普通の主婦さまなんですか。またまた凄いの一言です。
ってbzbellさまの勝手な想像してて余計にビックリでした。
お仕事をされて主婦業もやってて凄いです。
これからも本当に宜しくお願い致しますm(._.)m
こんばんは。いつも質問ばかりですみません。
古い記事にやっと私の望んでいたものを見つけました!
4.1ではテンプレートに「ブログ記事のメタデータ」がありますが、どのようにしたらいいのでしょうか・・・
カ エントリーのタイトル
レ Date:
ン Category:
ダ Tag:
よろしくお願いいたします。
お世話になります・・・
何とか4.1ではできたのですが、4.2RC1ではどうもよくわからなくて・・・
もう少し勉強が必要かなと思っています。
4.2RC1では、「カテゴリ」や「タグ」がどうもよくわかりません。
管理画面は使いやすくなってきたと思うのですが、だんだん複雑になって来ましたね。
>>18 哲やん さん
>>19 哲やん さん
> 管理画面は使いやすくなってきたと思うのですが、だんだん複雑になって来ましたね。
管理画面は使いやすくなりましたね。
それに再構築も格段に速くなってるし