buena suerte!@FC2BLOG | CSS で装飾してください。に便乗

スポンサーサイト

Posted at 21:22 |

2005.11.17

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

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

というのもBlukfeedsの検索で面白そうな企画を見つけたので少しずつ作業してました。
その企画というのはCSSデザインで有名なcss Zen Gardenに似た事を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(43) | 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 | 編集

お陰様で　出来ました～

cieさんの　このテンプレートはアクセスカウンターが自分で設置しなくても　入ってくれてるから
本当に助かります[にこっ]知識が有れば　色も変更出来るみたいですが　まだ　そこまでは欲張りません
取り急ぎ　お礼まで[はなび][にこっ]

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 | 編集

Best Site Good Work <a href=" http://blogs.ign.com/DavidScrotch/2008/05/09/89175/ ">does mexican languages have tones</a> 9148

Posted by Jndhxtwk at 2008.05.11 21:42 | 編集

Punk not dead <a href=" http://blogs.ign.com/SindyClaim/2008/05/09/89176/ ">download ringtones v400</a> %-]

Posted by Hzmunjis at 2008.05.11 23:25 | 編集

perfect design thanks <a href=" http://blogs.ign.com/SindyClaim/2008/05/09/89177/ ">poly ringtones text stop 66047</a> %DDD

Posted by Szwvepce at 2008.05.12 01:04 | 編集

Wonderfull great site <a href=" http://blogs.ign.com/SindyClaim/2008/05/09/89180/ ">free ringing tones</a> fcu

Posted by Mnhihuio at 2008.05.12 04:14 | 編集

This site is crazy :) <a href=" http://blogs.ign.com/SindyClaim/2008/05/09/89181/ ">free funny ringtones</a> 8))

Posted by Sxmzpyxc at 2008.05.12 05:47 | 編集

i'm fine good work <a href=" http://blogs.ign.com/MatTaimans/2008/05/09/89182/ ">ringtones motorola v220</a> 90411

Posted by Smsharur at 2008.05.12 07:18 | 編集

It's funny goodluck <a href=" http://blogs.ign.com/MatTaimans/2008/05/09/89183/ ">iphone help how to get ring tones</a> 538784

Posted by Levttgmp at 2008.05.12 08:54 | 編集

this is a best site, <a href=" http://jasminjovian.nm.ru/blogopage78.html ">闔韋� 聽逋蓁礦粤�</a>, 7029,

Posted by Sszcwgdp at 2008.05.23 19:12 | 編集

this is a best site, <a href=" http://caciqcecaper.nm.ru/blogopage174.html ">�迺珸蓊顋</a>, >:],

Posted by Fsuwqccv at 2008.05.23 20:25 | 編集

sorry, <a href=" http://staangell.pochta.ru/blogopage204.html ">痳髀諤鴉鈬頌髑褌� 竇� 驟襃礦粤�</a>, igjazo,

Posted by Ocnocftq at 2008.05.28 21:24 | 編集

visit this link please, <a href=" http://corrugater.hotbox.ru/dro4at-103-4elovek.html ">�鴈褌逞蓿粤碵� 轢謌�</a>, mmc,

Posted by Ugtafdaa at 2008.05.30 16:38 | 編集

visit this link please, <a href=" http://erucaaaio.hotbox.ru/dro4at-267-4elovek.html ">赭鴾齬蓿粮� 赭髓齔瘉韲矗鴾</a>, :(((,

Posted by Rpnhtihj at 2008.05.30 19:39 | 編集

preved, <a href=" http://sprscketst.newmail.ru/dro4at-54-4elovek.html ">骼癡琲瘠?糶</a>, 627,

Posted by Umtjwycr at 2008.06.05 20:53 | 編集

this is a best site, <a href=" http://rerreryr.newmail.ru/dro4at-124-4elovek.html ">�鴈苣繼﨣羝?/a>, jfa,

Posted by Kncaoccj at 2008.06.06 03:52 | 編集

cool site, <a href=" http://gaaliegabble.newmail.ru/dro4at-3-4elovek.html ">�鴈鴃琿髑繩體琺鈞</a>, 02577,

Posted by Wdflacun at 2008.06.06 05:41 | 編集

Sorry, <a href=" http://pawnbrokeru.newmail.ru/dro4im-248.html ">痳髀諤鴉鈬礦粫粤碆�?/a>, 37401,

Posted by Lhhvwnja at 2008.06.26 00:26 | 編集

Preved webmastero4ki, <a href=" http://statesidet.nightmail.ru/blogpage-204.html ">闢鰰逶鉋?/a>, 5945,

Posted by Aohrizee at 2008.06.26 02:02 | 編集

Sorry, <a href=" http://norrnowise.newmail.ru/blog-31.html ">驟襃奛謚鈞 </a>, pjpkj,

Posted by Afjfbvka at 2008.06.26 05:51 | 編集

Visit this link please, <a href=" http://cognatio.newmail.ru/dro4im-206.html ">驫瑾瑩闔齏礦粤苣繼蠇</a>, 136,

Posted by Ftlxdfse at 2008.06.26 07:07 | 編集

Cool site, <a href=" http://edafulfilme.newmail.ru/dro4im-260.html ">驟襃 �鱇鉉</a>, roeenb,

Posted by Ztnasedv at 2008.06.26 11:14 | 編集

Good luck, <a href=" http://pelaggcpgkef.nm.ru/page-95.html ">闔齏驫瑾瑩痳褌糴</a>, 889439,

Posted by Krpvwifx at 2008.06.27 07:19 | 編集

This is a best site, <a href=" http://priredprotra.nm.ru/page-276.html ">骭銜鞳鴾韲謌褂諷驕?/a>, mopx,

Posted by Hmlonkrj at 2008.06.27 08:30 | 編集

Preved webmastero4ki, <a href=" http://behavebentha.pochta.ru/pagga-44.html ">骭銜鞳鴾 �迺珸鉈諤蜊</a>, 413848,

Posted by Gfoedpzs at 2008.06.27 11:00 | 編集

Nice stuff, <a href=" http://geggaegeh.pochta.ru/pagga-7.html ">閠鞳逵粽鋏蓿礦粤?/a>, 868,

Posted by Ckvkffaj at 2008.06.27 12:22 | 編集

Sorry, <a href=" http://jiggjryjudig.nm.ru/pagga-249.html ">闔齏 flash 蓊顋 �迺珸</a>, 875319,

Posted by Loplwiym at 2008.06.29 06:00 | 編集

Good luck, <a href=" http://induraiionin.newmail.ru/dro4im-220.html ">關鉐跪鴃痳髀諤鴉鉈諤蜊 �迺?</a>, mjxruz,

Posted by Dvzqzpip at 2008.06.29 08:33 | 編集

Preved webmastero4ki, <a href=" http://tzazlztzstc.newmail.ru/dro4i-186-raz.html ">閠閠鴃瑪逑赭諷逵褥粮� �鳧?/a>, gddph,

Posted by Tdygutoc at 2008.06.29 12:21 | 編集

Cool site, <a href=" http://clientelea.newmail.ru/dron-215.html ">驟襃闔齏踈譛鶯蓚鶴?/a>, 525,

Posted by Qxqvuatc at 2008.07.03 03:14 | 編集

Preved webmastero4ki, <a href=" http://ridpollriins.newmail.ru/pg-18.html ">痳髀諤鴉驫瑾瑩闔齏跪謗糴?/a>, 2409,

Posted by Yntmdksc at 2008.07.03 06:20 | 編集

Sorry, <a href=" http://codgercommie.nm.ru/dro-205.html ">闔齏礦粤痳骭?/a>, >:)),

Posted by Yuongmwz at 2008.07.03 23:56 | 編集

Preved webmastero4ki, <a href=" http://mauricimd.newmail.ru/pg-246.html ">邇�鉗裨黶琿蓐?/a>, sgjl,

Posted by Lfetwpnk at 2008.07.04 02:29 | 編集

この記事へコメントする

| HOME |

PAGE TOP↑

名前:	CSS で装飾してください。に便乗" />
メール:
URL:
コメント:	メッセージを入力してください
プレビュー:	コメントのプレビューを有効にするご利用のブラウザ、設定ではご利用になれません。
Pass:
秘密:	管理者にだけ表示を許可する
	コメントが反映されない現象が起こっているようですのでお手数ですが「書込」ボタンを押される前に本文を全てコピーしておいて下さい。書き込み後はコメントが反映されているかどうか確認をお願い致します。