当ブログは忙しさにかまけて日々更新できないのですが、毎日更新されている方はカレンダーの設置をしたいですよね。
しかしワードプレスのウィジェットにあるカレンダーを設置すると
シンプルすぎてちょっと寂しい。
このデザインを、もう少し可愛くカスタマイズしてみましょう！
FURIO
cssが分からない方、面倒な方も、コピペで簡単にカスタマイズできるよ！
（基本）cssを貼り付ける場所
まずは、これを覚えておきましょう！
❶ 左のメニューから、「外観」→ 「テーマファイルエディター」を選択
一番最初にテーマファイルエディターを開く際には、「注意」と書かれた警告文が表示されます。編集を継続する場合には「理解しました」と書かれたボタンを押してください。
❷ 子テーマ用のスタイル
「/*必要ならばここにコードを書く*/」の下に、コピペしたコードを貼り付けます。
FURIO
「cssコードをコピペ」と書かれていたら、ここに貼り付けると思ってね
完成見本
まず、最終的にこうなるという完成カレンダーは下記のとおりです。
色はお好みで変えてもらえればと思うので、ここではシンプルに白＆黒のデザインです。
黄色は、デフォルト設定の「今日の色」です。
cssカスタマイズ
カスタマイズするためのコードを、ひとつずつ紹介していきます。
必要なコードを、コピペして使ってください。
全部ほしい！という方は、最後に全部まとめたコードを掲載していますので、そちらをコピペしてください。
ウィジェットカレンダーの背景と枠線を消す
デフォルトカレンダーから、背景色と枠線を消します。
▼ こんな感じになります
▼ コードはこちらです
/*ウィジェットカレンダーの背景と枠線を消す*/
.widget_calendar #wp-calendar th,
.widget_calendar #wp-calendar td{
width: 14%;
padding: 5px;
font-size: 12px;
background: none;
border: none;
outline: none;
}
ちなみに上記のコードですと、なぜか上と右の枠線が残ってしまいました。
確認してみたところ別設定のborderがありましたので、こちらも消します。
▼ 消えました
▼ コードはこちらです
.wp-calendar-table{
border-top-width:0;
border-right-width:0;
}
日付の背景色・文字色・形を変更する
記事を書いた日の背景色や形を変更します。
四角よりも丸のほうが可愛いと思うので、ぜひ！
ここが変われば、かなり見た目の印象が違ってくると思います。
▼ 印象が変わりました
▼ コードはこちらです
/*日付の背景（色や形を変更）*/
.widget_calendar tbody td a {
background: #000; /*背景色*/
border-radius: 14px 14px 14px 14px;
color: #fff; /*文字色*/
display: inline-block;
height: 28px;
line-height: 28px;
margin: 1px;
vertical-align: middle;
width: 28px;
text-decoration: none; /*リンクの下線を消す*/
}
▼ おすすめ色見本はこちら
世界の伝統色 洋色大辞典 - Traditional Colors of World
世界の伝統色の名前とカラーコードが一目でわかるWEB色見本
「今日」の日付の色を変える
前述したとおり、黄色背景はデフォルトのままです。
そこに「黒背景+白文字」のコードを追加したので、「黄色背景+白文字」になってしまいました。これを変更しましょう。
▼ 文字が黒く、見やすくなりました
▼ コードはこちらです
/*今日の日付のみ文字色を変える*/
.widget_calendar tbody td#today a{
color: #333; /*文字色*/
}
▼ 背景色も変えたい方はこちらです
/*今日の日付のみ色を変える*/
.widget_calendar tbody td#today a{
background: #fdeff2; /*背景色*/
color: #333; /*文字色*/
}
▼ おすすめ色見本はこちら
世界の伝統色 洋色大辞典 - Traditional Colors of World
世界の伝統色の名前とカラーコードが一目でわかるWEB色見本
マウスを上に置いたとき変化させる
マウスをリンクの上に置くことを「マウスオーバー」と言います。
このときに色を変えたり、動きをだしたりと、様々に変化させることができます。
今回は色を紫に、ゆっくり大きくする動きを付けてみました。
▼ 矢印の示す日が、マウスオーバー時の変化です
▼ コードはこちらです
/*マウスを上に置いたとき色を変える*/
.widget_calendar tbody td a:hover{
background-color: #bbbcde; /*背景色*/
color: #000; /*文字色*/
}
/*マウスオーバー時の動き*/
.widget_calendar tbody td a:hover{
cursor: pointer;
transform: scale(1.1,1.1);
transition : 1s;
}
カレンダーナビの位置を左右に配置する
カレンダーナビとは、先月と来月へ移動するリンクのことです。
下記の画像のように、最初は左側に寄っています。
文字色を変え、左右の配置にしてみます。
▼ コードはこちらです
/*カレンダーナビ*/
.wp-calendar-nav{
text-align:center;
font-size:90%;
text-align-last: justify;/*両端ぞろえ*/
}
/*カレンダーナビ リンク文字色*/
.wp-calendar-nav a{
color:#333;
}
/*先月のナビ*/
.wp-calendar-nav-prev{
display:inline-flex;
text-align: left;
}
/*来月のナビ*/
.wp-calendar-nav-next a{
display:inline-flex;
text-align: right;
}
ナビもマウスオーバーで変化させる
今回は少し動きを変えて、横方向に回転するようにしました。
▼ 分かりづらいですが、矢印のように回転
▼ コードはこちらです
/*マウスオーバー時の変化（先月）*/
.wp-calendar-nav-prev a{
transition: all 1s linear 0s;
cursor: pointer;
}
.wp-calendar-nav-prev a:hover{
transform: rotateY(360deg);
}
/*マウスオーバー時の変化（来月）*/
.wp-calendar-nav-next a{
transition: all 1s linear 0s;
cursor: pointer;
}
.wp-calendar-nav-next a:hover{
transform: rotateY(360deg);
}
FURIO
すべてのコード
ここまでの全てのコードを一つにまとめました。
面倒な方は、これを貼り付ければ一発です！
▼ コードはこちらです
/*ウィジェットカレンダーの背景と枠線を消す*/
.widget_calendar #wp-calendar th,
.widget_calendar #wp-calendar td{
width: 14%;
padding: 5px;
font-size: 12px;
background: none;
border: none;
outline: none;
}
.wp-calendar-table{
border-top-width:0;
border-right-width:0;
}
/*日付の背景（色や形を変更）*/
.widget_calendar tbody td a {
background: #000;
border-radius: 14px 14px 14px 14px;
color: #fff;
display: inline-block;
height: 28px;
line-height: 28px;
margin: 1px;
vertical-align: middle;
width: 28px;
text-decoration: none;
}
/*今日の更新のみ色を変える*/
.widget_calendar tbody td#today a{
color: #333;
}
/*マウスを上に置いたとき色を変える*/
.widget_calendar tbody td a:hover{
background-color: #bbbcde;
color: #000;
}
/*マウスオーバー時の動き*/
.widget_calendar tbody td a:hover{
cursor: pointer;
transform: scale(1.1,1.1);
transition : 1s;
}
/*カレンダーナビ*/
.wp-calendar-nav{
text-align:center;
font-size:90%;
text-align-last: justify;/*両端ぞろえ*/
}
/*カレンダーナビ リンク文字色*/
.wp-calendar-nav a{
color:#333;
}
/*先月のナビ*/
.wp-calendar-nav-prev{
display:inline-flex;
text-align: left;
}
/*来月のナビ*/
.wp-calendar-nav-next a{
display:inline-flex;
text-align: right;
}
/*マウスオーバー時の変化（先月）*/
.wp-calendar-nav-prev a{
transition: all 1s linear 0s;
cursor: pointer;
}
.wp-calendar-nav-prev a:hover{
transform: rotateY(360deg);
}
/*マウスオーバー時の変化（来月）*/
.wp-calendar-nav-next a{
transition: all 1s linear 0s;
cursor: pointer;
}
.wp-calendar-nav-next a:hover{
transform: rotateY(360deg);
}
FURIO
コピペしたコードを元に、自分のサイトにあったカレンダーを作ってみてね。
お疲れさまでした！
コメント