fc2ブログ
2005.11.17

CSS で装飾してください。に便乗

livedoorに帰参するとか言っておいてむこうは全く更新していないわけで・・・


というのもBlukfeedsの検索で面白そうな企画を見つけたので少しずつ作業してました。
その企画というのはCSSデザインで有名なcss Zen Gardenに似た事をFC2ブログでもやってみようという趣旨。


CSS で装飾してください。 - R'style Lab in FC2


とても面白そうなので私も乗っかってみました。
デザインするに当たってのちょっとしたルールは以下。

1. タグの総数を増やしてはいけない
  (ただし、減らすことに制限なし)
2. 他の部分でタグを削れば、その同数タグの追加は可
3. xml 宣言、head 要素 内などは上記条件の対象外。
4. 一般的なブログとしての機能は確保してあること
  (コメント、トラックバック、ナビゲーション、なるべくトップに記事)
5. テキスト部分、及び属性などは全て自由に編集可
  (タグ以外の編集に制限なし)
6. RSS Feed、管理者ページへのリンクなどの記述位置・有無は自由。
7. id 属性は 10 個まで任意で追加可
8. class 属性は 5 種類まで任意で追加可
9. CSS で使用する画像サイズに制限なし

こちらのルールに従って基のXHTMLテンプレートから
id属性を5つ(#container, #descript, #contents, #navi, #paging)、class属性を1つ(.main)
追加させてもらい残りはほとんど弄らずにデザインしてみました。
※macIEだとカラム落ちする様子。(泣)


プレビュー:rouge (XHTML, CSS)


感想:
とりあえず今持っている自前の知識のみで作ってみましたが、やはり知識不足を実感させられます。
CSSはもちろんですが、構造の勉強にもなりました。
また他の参加者の方の作品を見ることが出来るのでとても参考になりますね。
面白い企画を立てられたR'styleさんに感謝です。

スポンサーサイト




Posted at 12:06 | Template | COM(12) | TB(0)
この記事へのトラックバックURL
http://cie.blog11.fc2.com/tb.php/29-30566a92
この記事へのトラックバック
この記事へのコメント
cie さん、はじめまして。
私もしばらく LivedoorBlog を利用していたので、一方的には知っていましたが…。

シンプルでも、これくらいだとスッキリしてると文字も読みやすくていいですね。サイドバーのリンクリストの小さいアイコンがカワイイです。

感想には嬉しい言葉が^^
何かプラスになることがあれば、私もやった甲斐があったというものです。

ついでに、MacIE で崩れると言うことですが、MacIE ではある要素に内包する要素の幅の合計が100%だとうまく収まらなかったと思います。合計90数%にされては如何でしょう。
Posted by R'style at 2005.11.18 03:30 | 編集
R'styleさんはじめましてこんにちは。
コメントありがとうございます。

デザインとしては平凡ですが、やはりブログは読みやすさが大事ですから。[さむあっぷ](という私の勝手な持論ですが)
字体にしてもserif系(明朝系)はあまり好みではなく使ったのは初めてだったんですが意外と読みやすくて見直しました。
他にも新しい発見もありとても有意義な企画でした。ありがとうございました。[きゃー]

> MacIE ではある要素に内包する要素の幅の合計が100%だとうまく収まらなかったと思います。
ほーmacIEにはそういう現象(バグ?)があるんですね。知りませんでした。[へぇ]
早速#contentsと#naviの幅を少し調節してみましたが崩れてたり(トップ)崩れていなかったり(個別記事)するようでやはり良くわかりません。[どくろ]

> 一方的には知っていましたが…。
弱小ブログなので知られていた事にビックリです。[驚]
どこかで悪いことしたかな・・・[汗2]
Posted by cie at 2005.11.20 11:47 | 編集
> 弱小ブログなので知られていた事にビックリです。驚
> どこかで悪いことしたかな・・・汗2
いえいえ、私も LivedoorBlog でテンプレートを作ろうと考えていた事があったので、テンプレート作者やカスタマイズ系の人はチョット知っていただけです^^

それで、MacIE の方ですが、p 要素かもしれませんね。letter-spacing プロパティを MacIE に読み込ませないようにされるといいと思います。
Posted by R'style at 2005.11.20 22:39 | 編集
R'styleさんこんばんは。

> テンプレート作者やカスタマイズ系の人はチョット知っていただけです
なるほどそういうことだったんですね。安心しました。

> MacIE に読み込ませないようにされると
これはいわゆるCSSハックって奴ですね。[ひらめき]
まだ良く知らないのですこし勉強してからそのうち修正させてもらいます。
いろいろとご指導ありがとうございました。
Posted by cie at 2005.11.21 23:50 | 編集
メッセージを入力してください

cieさん 初めまして!
cieさんの作ったテンプレートのdivisionが
とても気に入って使わせて頂いております。
PCには 詳しくない私が無謀にもブログを
やっているのですが リンク集を入れたいのですが どうすれば 入れられるでしょうか?
ビギナーで すみませんが どうぞ 宜しく!

アドレスは http://mongaikan.blog8.fc2.com/
暇な時に 覗いて見て下さいね[にこっ]
Posted by シニア at 2005.12.02 23:30 | 編集
シニアさんはじめまして。
テンプレートをご利用くださりありがとうございます。[にこっ]

リンク集はまず管理メニューの「プラグインの設定」から「プラグインの追加」を選択し
リンク」の項目の左にある「追加」ボタンを押してプラグインを追加します。
その後管理メニューの「リンクの編集」でリンクしたいサイト名URLを入力後「追加」ボタンを押せばリンクが追加されます。
あとは追加したいだけ「リンクの編集」からサイトを追加していってください。
Posted by cie at 2005.12.03 13:06 | 編集
メッセージを入力してくださいありがとう ございます[にこっ]  何とか 頑張ってやってみます[ひよこ]
Posted by シニア at 2005.12.03 17:46 | 編集
お陰様で 出来ました~v-218cieさんの このテンプレートはアクセスカウンターが自分で設置しなくても 入ってくれてるから
本当に助かります[にこっ]知識が有れば 色も変更出来るみたいですが まだ そこまでは欲張りません
取り急ぎ お礼まで[はなび][にこっ]
Posted by シニア at 2005.12.03 18:52 | 編集
このコメントは管理人のみ閲覧できます
Posted by at 2005.12.05 00:13 | 編集
>> 匿名の方
はじめまして、コメントありがとうございます。

えー現在配布しているものと差別化しておきたいので、今使用しているこのテンプレートは配布する予定は今の所ありません。
ご期待にそえず申し訳ございません。[しゅん]
Posted by cie at 2005.12.05 22:49 | 編集
 こんにちわ。

 cieさんの作るテンプレのファンです。すでに6つほどお借りしてます。これからもステキなテンプレ作ってくださいね。

 ぜひ僕のブログへ遊びに来てくださいね。
Posted by ken-chang at 2005.12.26 09:17 | 編集
ken-changさんはじめましてこんにちは。
たくさんテンプレートをご利用くださってありがとうございます。[にこっ]
Posted by cie at 2005.12.29 14:19 | 編集
この記事へコメントする

ご利用のブラウザ、設定ではご利用になれません。
  コメントが反映されない現象が起こっているようですので お手数ですが「書込」ボタンを押される前に本文を全てコピーしておいて下さい。
書き込み後はコメントが反映されているかどうか確認をお願い致します。