CSSでブログデザイン

テンプレート「PNG」修正
Opera9.5で背景画像を変更するときの不具合が出るのを修正しました。

テンプレートのコメントで、YouTubeなどを貼り付けても反応しないという意見がありました。

ソースコードを以下のタグでくくってやれば解決します。
<div style="_position: relative;"><object 〜 </object></div>

テンプレート「PNG」が公開されました。


使用上の注意

サイドカラムにバナーやブログアクセサリーを入れる場合は、
<div class="blog-parts">バナーなど</div>
としてください。

---

背景画像の表示はJavaScriptを使用しています。
背景画像を変更するとクッキーに記憶されるので、以後サイトを訪問したときは最後に選択した背景画像になります。

初めてブログを表示したときの背景を変更するときは、HTML内（上の方）の
// 最初に表示される背景画像
var firstimage = "http://14.dtiblog.com/s/season/file/back001.gif"
この画像URLを変更してください。

例えば最初の画像を懐中時計とパスポートの画像にしたい場合は、
サムネイルのURL
http://14.dtiblog.com/s/season/file/back011s.jpg
から画像名（この場合はback011s.jpg）のピリオドの前のsを抜いたものに変更します。
http://14.dtiblog.com/s/season/file/back011.jpg
↑これです。

---

フラッシュ素材がメインカラムの上下のタイトルやメニューボタンにかぶさると、フラッシュ素材のほうが上に被さってしまうことがあるので、記事内にフラッシュ素材（特にIframeを使ったもの）は使わないほうが無難です。
YouTubeなどのコードを書き込むタイプのものは、
<PARAM NAME=wmode VALUE=transparent>
にすれば回避できます。

ご無沙汰しております。

ほぼ一年ぶりにテンプレートを作ってみました。すでにこのブログは新しいテンプレに変わっていますが、今細かなところを修正中なのでもう少ししたら申請できると思います。

今回のテンプレはかなり気合が入ってますよ！特にIE6では難しかった透過PNG画像を使いまくっています。

では登録されるまでもうしばらくお待ちください。

drop-screenテンプレートですが、いろいろ欠点が多いので申請を取り消しました。

現在もっとまともなテンプレを作成中〜

透過スクリーンメニューの1カラムテンプレを共有申請しました。

IE6では透過PNGが使えないので、かなり手抜きデザインになってます。
出来ればIE7・Firefox・Operaで見ていただければ幸いですが・・・

背景画像が自由に追加でき、サムネイルの中から選択できるようになっています。
記事部分にも横幅700pxまでの画像が入りますので、写真をたくさん見せたい方に向いているかもしれません。

1カラムなのでブログアクセサリーやバナーなどを入れる部分がほとんどありません。
ですので使い勝手はいまいちかも（笑）

続きを読む ≫

ドロップスクリーンメニューをIE6に対応させるためにJavaScriptを書きました。
スクリーンの透過部分はスタイルシートのfilterを使用しています。（IE6のみ。他のブラウザは透過PNG使用。）
メニューの固定はIE6ではposition: fixed;が使えないので、疑似フレームを使っています。

なお、このメニュー単体でも配布できるようにしたかったのですが、他のテンプレに組み込むと表示が崩れてしまうものが多いので断念します。
一応公式テンプレートで問題なく対応する物がいくつかあるのですが、やはり使えないテンプレのほうが多いのでは問題ありなので・・・

でも今回はプロトタイプなので無理でしたが、もっとシンプルな物であれば元のテンプレのスタイルシートの影響を受けないで使えるものが作れるのではないかと思っています。

画面上部に常時固定されているドロップダウンメニューを作りました。
全てCSSを使ってますので、JavaScriptが切られていても動作します。
ただし対応ブラウザが、IE7、Firefox、Operaのみで、IE6には未対応です。

IE6に対応させるためのJavaScriptはまだ組み込んでないので、動作を見たい方はIE6以外のブラウザを使って見てください。（是非一度見てもらいたいと思うくらいの出来栄えですｗ）

このメニューは既存のブログにもアドオンできるように作ってますので、テンプレを変更することなく使うことが出来ます。（テンプレ変えないで使う意味があるかどうかは別ですが）

メニューの中にはプロフィールやカレンダーなども入れてますので、1カラムのブログに一番適してると思います。

まだまだ未完成ですが、近いうちに正式に発表したいと思ってますので、お楽しみに！

春、夏、秋、冬、月（3カラム）、月（2カラム）のテンプレをVer.2に変更しました。（DTIさん早く承認してください！）
今後はこのバージョンのHTMLを基本にして、どこまで多様なデザインを作れるかを考えて行きたいと思っています。

空のテンプレに関しては、IE7で透過PNGが使えるという話しなので、それを試してから大幅に作り変えようかと思ってます。
透過PNGの例

IE7は position:fixed も使えるらしいので楽しみですね。
position:fixed とは画面上の位置を固定できるスタイルで、たとえばサイドメニューをposition:fixedで位置指定しておけば、画面をスクロールしても上のほうに隠れてしまうことなくなるので便利です。

まあ当分はIE6用の表示方法も考えて作らなければならないので、かえって面倒くさそうですが。。。

公開されている「秋のテンプレ」のHTMLとCSSを大幅に変更してUPしました。
順次他の申請中のテンプレも変更していく予定です。

変更点は以下の通り

続きを読む ≫