2007年から2013年までの期間、およそ10,000件のデザインの記事をアップしたブログのアーカイブ。現在はhttp://designwork-s.netで更新中。
2007年07月01日

seesaaカスタマイズ-横カレンダーを設置する方法

ブログではすっかり定番化しているカレンダー、いつ更新したのかがわかり、とても便利な機能です。カレンダーは表示させたいけど、周りと同じようには表示したくない。もっとオシャレにしたい方にオススメのカスタマイズを「横カレンダー」を紹介します。

このカスタマイズを施せば、カレンダーの日付が一直線に並び、スマートにカレンダーを表示させる事ができます。

詳しくは以下

カレンダーを外してしまっている方は、コンテンツでカレンダーを表示させたい場所に追加します。この時横一直線になる事を考慮して追加してください。既に表示されている方は場所を考え適当なら、「コンテンツ」→「カレンダー」→「HTML編集」で下記のコードを使いします。

<% content.header -%>
<div id="calendar">
<% if:previous_archive %><a href="<% previous_archive.page_url %>">&lt;&lt;</a><% else %> <% /if %><% date_format(now,content_calendar.datetime) %>
<% loop:list_calendar -%><% loop:list_data_month -%><% loop:list_data_week -%><% if:data.day %><% if:article -%> <a href="<% article.page_url %>"><% article.createstamp | date_format("%e") %></a><% else -%> <% data.day %><% /if %><% else %><% content_calendar.spc_text %><% /if %><% /loop %><% /loop -%><% /loop -%><% if:next_archive %><a href="<% next_archive.page_url %>">&gt;&gt;</a><% else %> <% /if %> </div>
<% content.footer -%>


その後CSSに下記のソースを追加します。コチラでデザインを制御しますので、自分のブログのテイストにあったものにフォントの種類や、文字の大きさ等を指定してください。

#calendar{
text-align:center; /* 中央揃え */
white-space:nowrap; /* 改行無し */
width:100%; /* 幅を最大 */
font-size:10px; /* フォントサイズ */
font-family:century; /* フォントの種類 */
padding:5px 2px 10px 0px;} /* 数字と数字の文字間 */
#cal a{text-decoration:underline;} /* カレンダーのリンクの下線をつける */


この他にもちょっと工夫すれば背景をつけたり、画像をつけたりと色々可能性がありそうなカスタマイズです。日記ブログなんかではカレンダーがあると便利なので、今までカレンダ−の表示が気に入らなくてつけていない人には、試して欲しいカスタマイズです。

関連記事
seesaaカスタマイズ-タイトル表示を最適化する方法
Seesaaカスタマイズ-METAタグ「description」の最適化
独自ドメインを取得の報告とSeesaaブログでの独自ドメイン設定方法
seesaaカスタマイズ-「自由形式」のタイトルを反映させる。
seesaaカスタマイズ-記事個別編集を可能にする。
seesaaカスタマイズ カテゴリー内の新着記事をリストアップ
seesaaカスタマイズ「記事の下にバナーを埋め込む」
関連記事を自動表示する「カンレン.えんとり〜ず」
seesaaブログでファビコンを表示させる方法
posted by admin at 20:29 | Comment(0) | TrackBack(0) | Seesaaカスタマイズ
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック