Twenty Ten カスタマイズ (16) カレンダーのカスタマイズ

概要:Twenty Tenのカレンダーに小粋空間さんの「RealTimeCalendar」を使用する。

Twenty Tenのカレンダーはシンプル過ぎるので、小粋空間さんの RealTimeCalendarを使わせて頂く。とても便利なプラグインです。

  • 今日の日付に色が付けられる

  • 土日に色が付けられる 


     

1.RealTimeCalendar のインストール

  • 小粋空間 RealTimeCalendar ここから RealTimeCalendar.zip をダウンロード。

  • 解凍して、フォルダ \realtime-calendar を \wp-content\plugins に設置。

  • 管理画面の「プラグイン」で RealTime Calendar を有効化する。

  • 管理画面の「外観」「ウィジェット」で、「カレンダー」をウィジェットエリアへドラッグ。

 

2.RealTimeCalendar のカスタマイズ

  • カレンダーの位置・サイズ・背景画像は、WordPressのcssで編集する。

    style.css
    /*-----カレンダー Style-----*/
    
    /*カレンダー全体*/
    #wp-calendar {
        width: 170px;/*変更 横サイズ*/
        background: #333 url(images/Calender_bg.gif) no-repeat;/*追加変更 カレンダー背景画像170x126*/
        margin-left: 10px;/*追加変更*/
    }
    
    /*年月*/
    #wp-calendar caption {
        color: #999;/*#222を変更*/
        font-size: 12px;/*14pxを変更*/
        font-weight: bold;
        padding-bottom: 4px;
        text-align: left;
    }
    
    /*曜日行*/
    #wp-calendar thead {
        font-size: 11px;
    }
    
    /*曜日セル*/
    #wp-calendar thead th {
    }
    
    /*日付け全体*/
    #wp-calendar tbody {
        color: #aaa;
    }
    
    /*日付セル*/
    #wp-calendar tbody td {
        /*background: #f5f5f5;削除変更 背景を消去*/
        /*border: 1px solid #fff;削除変更 罫線を消去*/
        padding: 0px 0px 0px;/*3px 0 2pxを変更 セルを狭くする*/
        text-align: center;
    }
    
    /*日付全体の背景。日付のあるセルはこの背景が隠れる*/
    #wp-calendar tbody .pad {
        background: none;
    }
    
    /*次の月*/
    #wp-calendar tfoot #next {
        text-align: right;
    }



  • カレンダーの文字色は \plugins\realtime-calendar 内の calendar.css を編集する。ここで編集しないとページ切換え時にリアルタイムに反映されない。

    \plugins\realtime-calendar\carendar.css 全コード
    /*Linkはアンダーライン*/
    #wp-calendar td a{
        text-decoration: underline;
    }
    
    
    /*Hoverはアンダーライン*/
    #wp-calendar td a:hover{
        color: #85BBC5;
        text-decoration: underline;
    }
    
    
    
    /*今日*/
    #wp-calendar td#today {
        /*display: block;*削除/
        text-align: center;
        /*color: #444444;*/
        /*border: 1px solid #444444;*/
        background: #333 url(/../blog/wp-content/themes/twentyten/images/today_grow.gif) no-repeat;/*追加変更 カレンダー背景画像170x126*/
    }
    
    /*休日*/
    #wp-calendar th.holiday,
    #wp-calendar td.holiday {
        color: #FF3C41;
    }
    
    /*休日のLink色*/
    #wp-calendar td.holiday a:link {
        color: #FF3C41;
        text-decoration: underline;
    }
    
    /*休日のHover色*/
    #wp-calendar td.holiday a:hover {
        color: #85BBC5;
        text-decoration: underline;
    }
    
    /*土曜*/
    #wp-calendar th.saturday,
    #wp-calendar td.saturday {
        color: #4A919D;
    }
    
    /*土曜のLink色*/
    #wp-calendar td.saturday a:link {
        color: #4A919D;
        text-decoration: underline;
    }
    
    /*土曜のHover色*/
    #wp-calendar td.saturday a:hover {
        color: #85BBC5;
        text-decoration: underline;
    }
    
    
    
    /*今日が休日*/
    #wp-calendar td#today.tholiday {
        color: #FF3C41;
    }
    
    /*今日が休日でLink*/
    #wp-calendar td.tholiday a:link {
        color: #FF3C41;
        text-decoration: underline;
    }
    
    /*今日が休日でHover*/
    #wp-calendar td.tholiday a:link {
        color: #85BBC5;
        text-decoration: underline;
    }
    
    
    /*今日が土曜*/
    #wp-calendar td#today.tsaturday {
        color: #4A919D;
    }
    
    /*今日が土曜日でLink*/
    #wp-calendar td.tsaturday a:link {
        color: #4A919D;
        text-decoration: underline;
    }
    
    /*今日が土曜日でHover*/
    #wp-calendar td.tsaturday a:hover {
        color: #85BBC5;
        text-decoration: underline;
    }


  • こんな感じに仕上がった。画像を頑張ればもっとカッコ良くなるかも。

    twentyten35 
カテゴリー: WordPressの事   タグ: ,   この投稿のパーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>