今回はWordpress標準のカレンダーデザインの変更をご紹介します。なにもしないままでは、BizVectorのサイドバーの幅と、Wordpressのカレンダーの幅かなり差があってみっともない、しかもシンプルすぎるという2点が気になります。とはいえ、今回設定していくのはThought is free様より拝借してきた内容です。デザインそのものはほとんど全く変えていないと行っても過言ではありませんが、自習室マイタスのWebサイトに仕込むにあたり、当日の日付を◯で囲むのをやめにしました。うちのカレンダーでは月曜日と日曜日になりますが、オリジナルそのままだと、カレンダーの端の列に本日が来た場合、そのセルの外側の直線が消えてしまって、丸くへこんだ状態になります。他にもたくさんやらねばならないことがあったのと、どうしても数字を◯で囲みたかったわけではないので、背景色と文字の太さで表現するだけにしました。どうしても◯で囲みたくなったらまた調整します。

本日の要点

前回同様、あんまり大したことはやっておりませんが、編集はテキストエディタ上で行うことをおすすめします。編集し終えてから、管理画面の[外観]→[テーマの編集]とすすみ、子テーマのstyle.cssに書き込んでください。メモ帳でもサクラエディタでもなんでもいいので、手に馴染むテキストエディタを見つけてください。ここでご紹介するCSSもどんどん長くなっていいきますので、できるだけお早めに。
では、本日の作業内容です。

  • デザインの基本はThought is free様のまま
  • 色設定を自習室マイタスの各イメージカラーに変更する
  • 本日以外のセル背景色はサイト全体の背景画像する(背景色を消す)
  • 日付を◯で囲むのをやめにする
  • Thought is free様に敬意を表し、冒頭コメントはそのまま掲載する

以上の4点を念頭に、CSSを読みすすめていってください。

/*
カレンダー
Thought is free
http://thk.kanzae.net/
*/
#sidebar .widget_calendar {
        margin-bottom: 40px;
}
table#wp-calendar {
        table-layout: fixed;
        width: 100%;
        margin: 5px auto 0 auto;
        padding: 0;
        border-collapse: collapse;
        border-spacing: 0;
        font-size: 12px;
}
table#wp-calendar caption {
        margin: 10px 0 0 0;
        padding: 2px;
        width: auto;
        text-align: center;
        font-weight: bold;
     /* border: thin solid #ccc;        今回は背景色は必要ないので削除しました。 */
        border: thin solid #671114;  /* 自習室マイタスのキーカラーに変更         */
        border-radius: 3px 3px 0 0;
        -moz-border-radius: 3px 3px 0 0;
        -webkit-border-radius: 3px 3px 0 0;
}

table#wp-calendar #today {           /* ここから本日の日付の体裁                 */
        display: block;
        font-weight: bold;
        background-color: #ffd071;   /* 本日のセルに背景色を設定                 */
        color: #671114;              /* ◯で囲むのをやめて文字色を変更           */
     /* border: thin solid #ccc;        このカレンダーの大きな特徴である、
        border-radius: 50%;             日付を◯で囲む部分の記述ですが、
        -moz-border-radius: 50%;        本日がカレンダーの両端にあたる日は、
        -webkit-border-radius: 50%;     セルの外枠の直線がなくなってしまうので、
        z-index: 1;                     ちょっと残念ですが削除しました。         */
}

table#wp-calendar .pad {             /* 空白になるセルの体裁。なぜ font-weight? */
        font-weight: bold;
     /* background-color: #fff9f9;      今回は背景色は必要ないので削除しました。 */
}

table#wp-calendar th,                /* カレンダーの表部分の体裁                 */
table#wp-calendar td {
        padding: 2px auto;
        vertical-align: middle;
        text-align: center;
}

table#wp-calendar td {
        line-height: 1.8;
        border: thin solid #671114;        /* 自習室マイタスのキーカラーに変更   */
}

table#wp-calendar th {                     /* 曜日が入る行の体裁                 */
        font-style: normal;
        font-weight: bold;
        color: #fff;
        border-left: thin solid #671114;   /* 自習室マイタスのキーカラーに変更   */
        border-right: thin solid #671114;  /* 自習室マイタスのキーカラーに変更   */
        background-color: #671114;         /* 自習室マイタスのキーカラーに変更   */
}

table#wp-calendar a {                      /* リンク先がある日付の体裁           */
        font-size: 12px;
        color: #671114;                    /* 自習室マイタスのキーカラーに変更   */
        padding: 0;
        text-decoration: underline;
}
 
 
 

 

本日のまとめ

本日から色の変更を始めました。HTMLタグやCSSのことを学ぶのことは、これからWebサイトを作っていこうとする方にとってとても大切なことです。しかし、それよりも前に、まずはこれから作ろうとするWebサイトのイメージカラーや、キーカラーを決めておくことが重要です。「この色」というのをきちんと決めておくと、サイトに統一感が生まれるのはもちろんですが、作っていく作業であれこれ悩まずにさくさく出来上がっていきます。しばらくはWebサイト全体のイメージを決定づける影響範囲の大きいところからCSSを設定していきます。細かいところは後からじっくり調整していけばいいですし、その記事特有の装飾なんかも問題なくできますから、最初はテーマカラーを使う部分から設定して、劇的に変わっていくご自身のWebサイトを眺めて気持ちを盛り上げてください。
いわゆるテーマカラーというのは3色~5色くらいが見やすいあたりです、ご自身のイメージするWebサイトの色設定を優先順位1位から3位まで決めてみてはいかがでしょうか。
 







Author Profile

midzuki
自習室マイタスの運営本部、ハシヅメアーキテック代表者。本業は建設業。自習室マイタスの内装デザインおよび施工はすべて本人が行っている。
何事も断らない性格から、とある学習塾の塾長を任されたり、講師を兼任したり、工事のついでにオフィス機器の導入や慣熟指導、研修会講師など、自分でお役に立てることならできうる限り対応してきた。オフィスの新築・改装の際にワンストップで事務所機能をすべて揃えられると喜んでいただいている。ちなみに塾講師としての専門分野は現国で、現国で満点を取らせる男。

【その他の特徴】
◆一級施工管理技士
◆二級建築士
◆ネットワークに繋がるデバイスならだいたいなんとかできる。
◆基本的に自前主義で自分できることなら何でも自分でやる。
◆とにかく機械が好きで、友人のリサイクル工場で一日楽しめる。
◆ご要望が多いので現国の短期集中セミナーやるかも。
◆趣味は料理とギターで、Facebookから自炊録の移行を計画中。
◆最近、頭髪のことを気にしている。
◆こちら側のどこからでも切れないタイプの人種。
◆極度の育メン