Home > テッキーな小ネタ > WordPressで、カレンダーを表示させるのん

WordPressで、カレンダーを表示させるのん

November 23rd, 2007 key

今日は朝からよいお天気でしたね〜。
午後から出かける予定だったため、お休みなのに仕事にでかけた
若旦那からの連絡を待ちつつ、暇つぶしにWordPressのカレンダーを
表示させたりして遊んでました。

…そしたらっ!

急遽、若旦那の仕事の都合でお出かけはキャンセルに。
せっかくお天気がよかったにもかかわらず、
結局出かけるタイミングを逃してしまいました。
でもこの連休は、明日からもっと暖かくなって過ごしやすいそうですから
それに期待することにします。ぐふっ。

screen.png

そんなわけで、WordPress(このブログソフト)で
Sidebar(右横のメニュー)にカレンダーを表示させようと
Googleしてみたんですけれど、意外とわたしレベルでもわかるような
丁寧な説明がなかったようなので、ここに覚え書いておきます〜。
(間違ってたらごみんね)

sidebar.php内の、カレンダーを表示させたい箇所に追加:

PHP:
  1. <div id="calendar">
  2. <?php get_calendar(); ?>
  3. </div>

style.cssでデザインを指定:

CSS:
  1. #sidebar table#wp-calendar {
  2. /*#わたしのは、sidebarっていうdivに入ってるから*/
  3. empty-cells: show;
  4. font-size: 90%;
  5. *font-size: 0.75em; /*これはWin IE6用*/
  6. margin: 0px;
  7. width: 180px;
  8. }
  9.  
  10. #sidebar table#wp-calendar caption {
  11. /*カレンダーのタイトル。November 2007みたいなの*/
  12. font: 100%;
  13. padding-top:10px;
  14. text-align: center;
  15. text-transform: uppercase;
  16. }
  17.  
  18. #sidebar table#wp-calendar #today {
  19. /*「今日」をマークして表示*/
  20. background-color: #f9f9f9;
  21. border: 1px solid #f9f9f9;
  22. }
  23.  
  24. #sidebar table#wp-calendar #next a {
  25. /*next、prevは、前月、次月メニューのスタイル*/
  26. padding-left: 5px;
  27. text-align: center;
  28. border:0;
  29. }
  30.  
  31. #sidebar table#wp-calendar #prev a {
  32. padding-right: 5px;
  33. text-align: center;
  34. border:0;
  35. }
  36.  
  37. #sidebar table#wp-calendar a {
  38. color: #cc0033;
  39. display: block;
  40. text-decoration: none;
  41. }
  42.  
  43. #sidebar table#wp-calendar a:hover {
  44. color: #cc0033;
  45. text-decoration: underline;
  46. }
  47.  
  48. #sidebar table#wp-calendar td {
  49. text-align: center;
  50. }
  51.  
  52. #sidebar table#wp-calendar th {
  53. text-transform: uppercase;
  54. font-weight:normal;
  55. text-align: center;
  56. }

…そんな感じで、BBlogでは表示できましたえ。
codeの表示はここを参考に…。

<おまけ>
11-23-07-01.jpg

今日のぶーちゃん。陽の当たる場所が好き。

Categories: テッキーな小ネタ Tags:
Comments are closed.