既成概念にとらわれない生き方をしようと思っているけど、それを実践するのはなかなか難しいなと思っているmartinです。ppBlogでは現状、大まかに3種類のカレンダーを指定できますが、その内2種類は、TABLEタグを用いたものです。見るカレンダーの構造を見ると、TABLEタグを使って表みたく作成というのは自然な流れでしょう。web界隈の最前線は追っていないので、ちょっと知るのが遅かった気もしますが、カレンダーの中には、TABLE要素を使わずに、UL要素やOL要素などのリスト要素を用いてカレンダーを生成する試みもあるようです。Calendar一口にリスト要素を使うといっても、色々な記述があり、紹介しているサイト毎に違っています。無視できない数のユーザーの方々がIE6を使っていると思うのですが、少なくとも上記2つのサイトは、IE6で見ると微妙に表示が崩れてしまいます(IE6,7に見られるバグで、hasLayoutをもった要素のOL要素の番号付けが無視されるというものは、有効な解決法がなく致命的)。自分なりに、どのブラウザで見ても同じような見栄えになるようにと色々試した結果、以下のやつが現時点での最適解かなというのに辿りついたので、ppBlogにも採用するついでに紹介しておこうと思います。これはスクリーンショットです。実際のデモは下のリンクから。List)を使います。日付は時系列なものですから、順序付きリストを用いるのが良いでしょう。)にすることが可能ということです。この見栄えの制御には、CSSを使いますが、かなりシンプルな記述で済みます。IE6にも対応となると、色々ややこしいCSSハックを駆使しがちですが、CSSハックは全く必要ありません。カレンダーを生成するHTMLソースを見てみましょう。以下のような感じです。</div>例として今年4月のカレンダーをあげます。曜日を表す部分(日月火水木金土)と、日にちの部分を分けて、それぞれOL要素でグルーピングしていて、各にwheaderとweekdayというクラス名を与えています。ppBlogでは、記事を書いた日付には、daySubmitというクラス名が与えられます。通常の、よく見るボックスタイプですが、これは以下のようなCSSで実現できます。}ポイントは、OL要素に具体的に横幅を指定して、かつ、LI要素を左寄せにすることです。指定した幅に達すると自動的に下に流れ込みます。なると、水平タイプにするのは簡単で、幅を指定しなければ良いわけです。その際に、曜日の部分や、空白のリスト要素はあえて表示させる必要はないので、以下のような記述になります。*/}最後に、垂直タイプですが、これも簡単で、従来、OL要素は縦に展開するものです。それを上ふたつではフロート指定で横方向に伸ばしたので、そのフロート指定をしなければ、自ずから縦になります。明示するなら以下のような感じです。*/}それでは、実際のデモを見てみましょう。Calendarのデモボタンをクリックすれば、その場でひとつのカレンダーが3通りに切り替わります(最後にスタイルを適応させないボタンも付けました。OL要素のデフォルトの動作が確認できます)。紹介した手法を用いています。個人的に、このOL要素を用いたカレンダー表示というのは、お気に入りなので、近くバージョンアップ予定のppBlogに組み込んでいます。後、現状、ボックスタイプでは、週の初めは日曜日ですが、これを任意の曜日を指定できようにしています。アップデートこんばんは。自動インストール版を昨日リリースしました。今日ちょっと弄っていてutils.phpのurl_encode関数辺りを変更したので、その差分を添付しておきます。テーマ管理画面で「テンプレート」←→「スタイルシート」の切り替えリンクが適切に作動してしなかったので修正しました(theme.inc.php)。あと見栄えの修正でpages.inc.php。以上の3つを添付しておきます。先月の4月23日に差分ファイルを出しましたが、それから至る所を弄りました。comment.jsは軒並み手が入ってます。modulesも色々変更を加えているので、1.7.3ベータ版をお使いの方は、現行リリース版(080511)をダウンロードされて、jsディレクトリとmodulesディレクトリの中身は一括して上書きするのが楽だと思います。utils.phpなどのトップディレクトリのファイル群については、これも一括して上書きして下さい。変わっていないPHPファイルもありますが、アップデート漏れを避けるにも、とりあえず上書きというのが良いかと。ログやらownerディレクトリ、cssディレクトリ、statディレクトリの中身は特に何も変更することはないです。テーマ関連で変更があります。Ajaxを利用してコメントなどを読み込んで表示させるボタンですが、これらのボタンにはcute-buttonというクラス名を与えました。utils.phpが出力する、このボタンのHTMLは以下のようになります。[+]</button></div>これに対するテーマBasicでのCSS指定は以下のような感じです。ボタンの右パディング。上記の左パディングと同じ値。*/}上記以外に、配布しているベーシックテーマのCSSには、一応IE6向けに、モダンなブラウザに似せたボタンアクションにするための記述も書いてますので参考に。コメントアウトしていますが。結果として、それまでのこのAjaxボタン関係で使用していた.button-ownerとか.comment-expandとか.commentFormHereは不要になります。あと、1.6以下のバージョンと現行バージョンでは、カテゴリー定義ファイルとページリストの定義ファイルの形式が異なっているので、これを現行のものに対応させるための変換ページを用意しました。トップページのメニューバーの「Tools」にあります。1.6系からのバージョンアップに関しては、新規に最新バージョンをアップロードして、そこに既存のログなどを流し込むやり方をオススメします。既存のカテゴリー定義ファイルとページリスト定義ファイルは上記ページで変換した後にアップして下さい。CSSこの辺に落ち着こうかな。従来のノーマルタイプ。キャプションは画像の下に表示されます。キャプションが画像のボーダー内に含まれるパターンドロップシャドウあり、ボーダーなしのパターンドロップシャドウなし、ボーダーありのパターンドロップシャドウもボーダーもなしのパターン。今回の試行で分かったことは、IE7のみに適用されると思っていたCSSハックが、実はOpera9.xにも有効だったこと。*/何かOpera9.27での表示がおかしいなと思ったら、このハックがOperaにも適用されていました(追記:XML宣言するとOperaにも通ってしまうみたいです)。純粋にIE7のみをターゲットとしたい場合は、以下のようにすると良いらしい。*/ちょっとググった感じでは、IE6とIE7とを一緒にハック対象とする方法が分からなかったんだけど、個別に書かないとダメかなぁ。近々、ドロップシャドウのまとめ記事を書こうかと思っています。最新10件のコメントmimimimifaghasegawahiroshimartinsarutarosスーパーコピースーパーコピーウブロスーパーコピー時計のブランド時計コピー通販です。弊店のウブロコピー時計等のブランドコピー時計は送料手数料無料で、業界NO.1品質2年無料保証です。全サイト15%OFFキャンペーン実施中です。