FCafe  PRF的?

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

  当店リンク巡回中にR'style さんの記事が目に留まり、気付いたら反応してました。
「提示された(X)HTMLソースをCSSで装飾してテンプレートを作る」 という企画?なのですが、詳しくは元記事を御覧頂くとして これってまんま R'styleさんが先日登録されたsymple_cord のものなのでした。 「タグ数を節約した軽量HTML」との事でして確かにシンプルなんですが、どうしたらあんな風にキレイに「飾れる」のかしらん?て感じで挑戦してみた訳です。( R'styleさんの世界を覗見る事ができるかも・・)

  マークアップは如何にあるべきか、とかいう問題には詳しくない私ですが、定まったHTMLを如何に修飾するか、という事であるなら・・・ という気安さもありました。
当初はいつも?通り「1カラム」を作ろうとしたのですが 1カラムですとどうしても(2カラムに於ける)サイドバーアイテムへのリンク(や切替SW)が要ります。 でもそれを追加するとHTML構造が別物になってしまいます。  ”Log" と "Menu" を並べて( Webbingstudio さんのサイドメニューみたいに)切り替える方法も考えたのですが、スクリプトに頼るのはまずかろう(これはCSSに関する企画ですから)ということで、2カラムという慣れない土俵に上がる事となりました。

   中略

  提示されたHTMLは一字一句も変更不可という訳ではありませんで、多少のmodifyは許容されています。(HTML構造に関する)私の変更箇所は主に以下の通りでした。

  1. 全体を包含する DIV を廃しました
  2. h2要素を「記事タイトル」とし、以下h要素を1段階 UP
  3. 記事単位を包含する DIV を設定しました
  4. 「記事の続き」 を包含する DIV を廃しました
  5. 「記事諸元」のリスト構造を廃しました
  6. 「コメント諸元」のリスト構造を廃しました
  7. 「コメント編集」のhレベルを一段 UP させました
  8. ページナビの h(タイトル)とリスト構造を廃し、エントリナビと統合しました

この企画には 「タグの総量を増やしてはいけない」 というルールがありますので、ソース内にタグを追加するにはどこかを削らなければなりません。 上記の他にも省略したタグはありますが、表示される「内容」で削ったのは"copyright"くらい(Authorに近いので)です。 (念の為に付記しますが ad タグはちゃんとあります^^;)
コンテンツ要素の出現順序等は(同一リスト内の並び順を除き)変更していません。
( 特に意味は無いのですが 「 100% 英語化」 してみました )
勿論削っただけではなく追加したタグもあります。

Comment

bonk bonk Edit
11/01 23:56

2カラムでも、danielさんの雰囲気が出ていますね R'styleさんのところから、ソースをコピーして、よし作ろうと思った矢先にこんな素晴らしいものが出来てる…。うーん、一気にハードルが高くなった(汗)

daniel daniel Edit
11/02 07:21

bonkさんお早うございます
目立ちたがり屋 の癖にグラフィックではアピールし(でき)ない。
・・・だからこういう感じになってしまいます。
( 有希之武 さんクラスの画力が欲しい ッス ・・・)
もう少し整理したら共有に登録(ソース公開)するつもりです。
bonk さんも是非! ( 楽しみです )

ブログフリーク ブログフリーク Edit
11/02 16:54

「ブログフリーク」からのお知らせ ブログランキングサイト「ブログフリーク」がオープン!!
只今【 iPod nano 】が当たるキャンペーンを実施中です。
皆様のご登録・ご参加をお待ち申し上げております。
目指せ、アクセスアップ!

ブログフリーク
http://blogfreak.jp/

お問い合わせはコチラから
http://blogfreak.jp/ask/


※記事の内容とは関係のないプロモートで失礼致しました。
ご不要でしたら削除下さいませ。

daniel daniel Edit
11/02 22:50

<br> が多数連続しています ・・・


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/242-b6ec4dc7

Shown after Admisson
.

≫ Teal 廊下にて ≪

2005 / 11 / 01  Tue
ThisBlog   
Comment 4 / TB 0 / Edit
Designed by Daniel Corporation . all rights renounced
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。