CANPAN ブログ検索
Loading
  • もっと見る
2012
Apr
18
日めくりカレンダー風 日付表示
    
ブログの日付表示を日めくりカレンダー風に変えてみました。
従来の表示よりも視認性が高く、デザイン的にもおもしろいかも。
この日めくりカレンダー風表示の設定を解説。

CANPANブログでは、記事作成日時の取得を下記のような SeeSaa変数 によって行います。

  <% article.createstamp | date_format("%Y年%m月%d日(%a)") %>

date_format 以降の %部分 は下記のような変数で置換可能です。

表示変数説明
西暦%y西暦の下二桁12
%Y西暦4桁2012
%m月2桁(1桁のときは0がつく)04
%B月の名前April
%b月の名前(短縮形)Apr
%d日付2桁(1桁のときは0がつく)01
%e日付2桁(1桁のとき0つかない)1
曜日%A曜日の名前Monday
%a曜日の名前(短縮形)Mon

上記を踏まえてHTMLを記述します。
西暦・月・日、それぞれに別のCSSを割り当てているところがポイントです。

HTML
<div class="dandan_date0"><% article.createstamp | date_format("%Y") %></div>
<div class="dandan_date1"><% article.createstamp | date_format("%b") %></div>
<div class="dandan_date2"><% article.createstamp | date_format("%e") %></div>

次に CSS 側を設定します。上記で示した3つの設定です。
西暦は枠なしで、月と日には枠をつけています。
月は背景に色をつけ、文字を白に。日は背景に白を、文字は色つき。
枠にはそれぞれ若干のシャドウを設定します。
ただしシャドウ表示は CSS3 のため IE8 以下では表示不可と思われます。

CSS
.dandan_date0{
color : #3B5998;
width : 40px;
font-size : 8px;
font-weight : bold;
padding : 0px;
text-align : center;
}
.dandan_date1{
background-color : #3B5998;
border : 1px solid #3B5998;
color : white;
width : 40px;
font-size : 8px;
font-weight : bold;
padding : 0px;
text-align : center;
-moz-box-shadow: 1px 1px 3px #bbb;
-webkit-box-shadow: 1px 1px 3px #bbb;
box-shadow: 1px 1px 3px #bbb;
}
.dandan_date2{
background-color : #ffffff;
border: 1px solid #3B5998;
color : #3B5998;
width : 40px;
font-size : 19px;
font-weight : bold;
padding : 0px;
text-align : center;
-moz-box-shadow: 1px 1px 3px #bbb;
-webkit-box-shadow: 1px 1px 3px #bbb;
box-shadow: 1px 1px 3px #bbb;
}


割と簡単な設定で表示できます。ご参考に!
09:30 | ブログ活用 | comment 0 | trackback 0
【Trackback URL】 トラックバックの受付は終了しました
COMMENT
POST A COMMENT
Archive
Category
Comments
https://blog.canpan.info/ooe/index1_0.rdf https://blog.canpan.info/ooe/index2_0.xml
Copyrights © 2009-2012 だんだんのグッドニュース All Rights Reserved.