横型のカレンダー紹介でHorizontalCalendarを設置しましたが前回の投稿のやり方はindex.phpにソースを追加するやり方をしたのでソースが書き込まれてなかったカテゴリーやアーカイブなど別のページに飛べば当然表示されなくなる。
AfroNamiHeiの箱 : WordPressの横型カレンダープラグイン
関連するphpファイル全部を編集すればいいだけですが面倒のもあってプラグイン配布元がやってる通りやっぱりheader.phpファイルを編集し反映させてみます。
横型カレンダープラグイン for WordPress(WP2.3/2.5対応版) – The blog of H.Fujimoto
HorizontalCalendar配布サイトの設置方法はWordPressの標準テンプレートを例に説明してます。
標準のテンプレートだとheader.phpファイルの最後の方に追加すれば問題なく表示されますがWPTP-Chocolateテーマで追加するだけだと・・・。
背景画像に溶け込んで文字が見え難かったのでカレンダー部分は指定で反転させてます。
themesディレクトリにあるwptp-chocolateディレクトリのheader.phpにソースを追加です。
Afroはheader.phpファイルの最後にある/divタグの後ろに追加です。
スタイルシートはまだ使ってない状態だと文字もみえにくくヘッダーとボディ部分が分断されてて崩れてしまう。
これを修正するにはカレンダーにもボディと同じ画像を使いたい。
ボディ内の記事で使われてるdivタグのIDはcontentっぽいので使われてるソースをそのまま使ってみます。
- IDのcontentの見つけ方はブログを表示してマウスの右クリックのメニューから「ソースを表示する」で見つけることができます。
あ、ちなみにスタイルシートはプラグインサイトで紹介されてるコードをそのまま使い直してます。
#wp-calendar-horizontal {
float: left;
width: 922px;
background: url(images/content.jpg) repeat-y;
position: relative;
margin : 0;
padding : 3px 0;
text-align : center;
}
赤い部分が追加ソース。
上手く画像がハマッたので後は位置と文字の色ぐらい。
フォントや色で似合いそうなものを・・・
Afroは以下のようにスタイルシートを編集。
themesディレクトリにあるwptp-chocolateディレクトリのstyle.cssファイルの一番最後に追加。
#wp-calendar-horizontal {
float: left;
width: 922px;
background: url(images/content.jpg) repeat-y;
position: relative;
margin : 0;
padding : 3px 0;
font-family: Comic Sans MS, Impact, sans-serif;
text-align : center;
font-size: 18px;
}
#wp-calendar-horizontal a:hover {
color : #ffffff;
text-decoration : underline overline;
background-color : #393328;
}
#wp-calendar-horizontal .saturday,
#wp-calendar-horizontal .saturday a {
color : #0000ff;
}
#wp-calendar-horizontal .sunday,
#wp-calendar-horizontal .sunday a {
color : #ff0000;
}
#today {
background-color : #debb87;
border : 1px solid #ff9900;
}
#wp-calendar-horizontal a:link {
background: #f3f3f3;
color: #666666;
}
後は徐々に少しずつ直していくことにする。
前回の投稿ですでにスタイルシートを編集してる人は注意
引用、参考サイトは以下です
横型カレンダープラグイン for WordPress(WP2.3/2.5対応版) – The blog of H.Fujimoto