お金はないけどキャンプに挑戦！

　
さて、完全にネタがなくなりました＼(^o^)／
　
なのでブログでもいじっちゃおうのコーナー♪
　
　

今回はこちら。カレンダーの表示をちょっと見やすくしちゃいましょう。
　
　
以前、関東の赤天狗様ことstegoさんがやられてましたね。
→カレンダー表示プチカスタマイズ
　
　
そちらも参考にさせていただき、さらに手を加えてみます。
　
　
　
おっと、その前に↓ポチッとクリックお願いします♪



　
　
　
今回、私がいじった内容は
・日、土の色をそれぞれ、赤、青に変更する
・投稿日の文字色と背景色を変更する
・さらにそこにカーソルをあわせると色が変わるようにする
　
以上３点です。
　
　
ではやってみましょう＼(^o^)／
　
　
まずは「ブログの設定」項目にある、「テンプレート」をクリックしましょう。
　
すると現在使用中のテンプレートが出てきます。そこで「テンプレートの編集・再選択」の項目にある「カスタマイズ」を選択。
　
　

するとスタイルシート等ダーっと文字の羅列が出てきます。
　
今回いじる部分はこの「スタイルシート」の部分。
　
　
　
では、まず“検索”をします。WindowsならCtrl＋Fかな？Macはコマンド＋Fです。
　
検索ウインドウに“calendarweek”この文字をコピペしてください。
　

するとその部分へジャンプするはずです。
もしうまくジャンプしない人は「スタイルシート」の中の半分よりちょっと下ぐらいにあるので手動でスクロールして行きましょう。
　
　
　
この、.calendarweek{　〜〜〜　} の次の行に、この文章をペーストしてください。
　

---

.sun span.calendarweek{color:#ff0000;}/*日曜日の文字色*/
.sat span.calendarweek{color:#0000ff;}/*土曜日の文字色*/
.calendartable td a{
color: #330033;/*投稿日文字色*/
background-color: #c1fff1;/*投稿日背景*/
display:block;
}
.calendartable td a:hover{
color: #dddddd;/*MO文字色*/
background-color: #75e49a;/*MO背景色*/
}

---

　

こんな感じになるはずです。赤で囲まれた部分が追加した文字です。
　
これで後は画面一番下の「登録」を押せばカスタマイズ完了ですが、このままだと私の設定したカラーリングになってしまうので、黄色く塗られた部分の文字を変えてやると好きな色にすることができます。
　
どの項目を変えるとどの色が変わるかは、後ろにコメントが書いてあるのでわかるかと思います。
ちなみに“MO”とは“マウスオーバー”の略です。マウスカーソルが重なった時、という意味です。
　
　
色は１６進数で設定しなくてはならないので、直感的には難しいという人は、こちらのサイトを参考にするとわかりやすいかもしれません。
　
　
　
　
どうです？
今までは何の色もない平凡なカレンダーでしたが、投稿日がわかりやすくなり、さらにカーソルを重ねると色が変わるという仕様になりました＼(^o^)／
　
　
↓他にも色々なカスタマイズ情報がいっぱいです

にほんブログ村