FC2blogのブログテンプレートを配布中

 - - - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 -

FC2blogの着せ替えブログスポンサー広告カスタマイズのヒントW3C検証サービス検証済みとは言っているものの

スポンサーサイト

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

羽アイコン FC2 Blog Ranking 羽アイコン

W3C検証サービス検証済みとは言っているものの

今回FC2の共有テンプレートスペースへ登録したテンプレートは、「W3C検証サービス検証済み」とか、書いておりますが、登録した実際のテンプレートは、Validとは言えない仕様になっております。
それでは、検証に通った各サンプルテンプレートと登録したテンプレートとは、どこが違うのか?説明させていただきますね。

まずは、ブログのテンプレートとは何か?についての前置き(笑)

FC2のブログテンプレートは、HTMLが1シートしか無いですよね?
しかし、ブログには、色々なページ(トップページ、コメント投稿が出来るページ、など)があります。
それは、1枚のテンプレートの中から、ある特定の部分が、その都度必要に応じて使われる仕組みになっているからです。
したがって、その1シートの中でHTMLが正しく書かれ、完結する必要は無く、それぞれのページで正しく使われ、きちんと完結されるように書く必要があります。

ですから、ブログのテンプレートの場合は、管理画面から投稿した内容を取り込んで吐き出されたソースこそが、検証されるべきHTMLとなります。
そう言った意味で、実際の私のブログのある特定のページを検証に使っています。
あまり、流動的なページを対象にすると、私が記事中で、うっかりおかしなタグの使い方をして、いつエラーが出るとも限りませんので(笑)

さて、それでは、サンプルとの相違点は?と言うと・・・・

・登録したテンプレートには、XML宣言が抜けている(抜いている)
・登録したテンプレートには、スクロールバー装飾のスタイルを設定している
・登録したテンプレートは、プラグイン対応版

以上の3点です。
詳しい内容を知りたい方は、続きをどうぞ。
続きは、すっごく長くてクドイです。すみません。

以下が詳しい内容です。

登録したテンプレートには、XML宣言が付いていない

こちらは、IEのバグに対して取らせていただいている処置です。
しかし、登録したテンプレートにXML宣言を付加していただいても、表示の崩れが無いように書いてありますから、気になる方は付加していただいても問題はありません。

では、なぜあえて付加しないのか?
それは、文字の大きさの問題にあります。

XML宣言を付加した場合、IEのバグで、「後方互換モード」というモードで表示されてしまいます。
(FirefoxやOperaでは、普通に「標準準拠モード」で表示されます。)
こちらの場合、基準となる文字が「標準準拠モード」に比べて、大きく表示されるんですね。
それならば、文字のサイズをスタイルシートで同じように見える書き方で書き直せば良いのですが・・・・

その場合、「後方互換モード」で表示されるIEの文字の大きさに合わせて、「標準準拠モード」での文字を大きく調整すれば何も問題は無いのですが、私の登録したテンプレートですと、固定幅で3カラムという事で、文字サイズを「標準準拠モード」に合わせて文字を小さくせざるを得ないんですよね。
文字を大きくすると、なんだかバランスが悪くなっちゃうので。

では、「標準準拠モード」に合わせて小さく調整すると、IEだとどんな問題が?

FC2ブログのみなさんは、ブログの管理画面の入力支援ボタンを使って、文字を大きくしたり小さくしていますよね?
「標準準拠モード」に合わせて基準の文字を小さく調整すると、入力支援ボタンの「大」「中」「小」を使って書かれた記事をIEで見た場合、「大きい」「小さい」がちゃんと反映されされないんです。

入力支援ボタンの「大」「中」「小」を使って書かれた記事をIEで見た場合、「大きい」「小さい」がちゃんと反映され、なお且つ「標準準拠モード」と「後方互換モード」での見え方を同じようにする為には、「後方互換モード」の文字の大きさに合わせて文字を大きくするしか無いようなんですよね。
私の勉強不足かもしれませんが(涙)

まあ、そもそも、入力支援ボタンを使った「大きい」「小さい」を正しく表示させる為には、記事部分の文字には「medium」とか「small」とかのキーワード指定で、スタイルシートで文字サイズを設定しなくては、正しく表示されないので、「後方互換モード」と「標準準拠モード」での見え方の差を縮める方法は、入力支援ボタンを使う限り、無理があるという事で(-_-;)。
(注:OSの違いやフォントやブラウザの設定などによって、必ずしも「大きい」「小さい」が反映されるとは限りません。)

そんなわけで、お気づきの方もいらっしゃったとは思いますが、着せ替えブログのどのテンプレートにも、XML宣言が抜けております。

登録したテンプレートには、スクロールバー装飾の設定がある。

こちらの、スクロールバー装飾関係のスタイルは、IE独自のものです。
したがって、通常、他のブラウザでは、エラーとして捉えられます。

登録したテンプレートは、プラグイン対応仕様です。

サンプルのテンプレートは、プラグイン非対応版です。
しかも、サイドバー部分は、プラグイン部分のコピーでは無く、少しばかりカスタマイズを施しています。

プラグイン版で検証しますと、プラグイン内の内容についても、当然、検証の対象になるわけで、プラグインによっては、ディフォルトでは検証には通らないものもあるので、手っ取り早く(-_-;)
(例えば、RSSフィードプラグインは、自分で書き換えが必要)
検証に引っかかる主な原因は、アンカーのURLに含まれているパラメータ間の区切りとして使われている「&」を文字実体参照で表していない為です。

プラグイン内は、書き換え可能なものは、自分で書き換えたり、FC2のテンプレートで使われる変数から置き換えられる内容については、そこはその変数を使わないような工夫が必要かも。

以上、長くなりましたが、サンプルテンプレートと登録したテンプレートについての相違点は、以上の3点です。

以上の内容に興味を持たれた方は、以下のキーワードでWeb検索してみると良いかも。

W3C
文書型宣言、XML宣言
ブラウザ、標準準拠モード、後方互換モード
後方互換モード、フォントサイズ
文字実体参照

スポンサーサイト

羽アイコン FC2 Blog Ranking 羽アイコン

ソースネクスト

コメント

コメント投稿フォーム

(必須)
(必須)
(必須)
(必須)
管理者にだけ表示を許可する

【コメント、トラックバックについて】を読まれましたか?

トラックバックURI

side menu

羽アイコン INDEX 羽アイコン

W3C検証サービス検証済みとは言っているものの

★★★

【COMMENT】

    【TRACKBACK】

      ★★★

      全タイトルを表示

      ★★★

      羽アイコン INFORMATION 羽アイコン

      ★★★

      ご利用の前に

      お問い合わせの前に

      ★★★

      • ▼リンクスタッフがおすすめ!
      • 3000円キャッシュバック中

      ホームページ売上アップ診断+オリジナルSEO対策ツールで売上アップ!
      ホームページ売上アップ診断+オリジナルSEO対策ツールで売上アップ!

      ★★★

      このブログをリンクに追加する

      FC2ブックマークに追加

      羽アイコン RECENT ENTRIES 羽アイコン

      羽アイコン RECENT COMMENTS 羽アイコン

      ★★★

      羽アイコン RECENT TRACKBACK 羽アイコン

      羽アイコン CATEGORY 羽アイコン

      羽アイコン ARCHIVES 羽アイコン

      羽アイコン LINKS 羽アイコン

      羽アイコン MATERIAL 羽アイコン

      【イラスト素材】
      オレンジジュース100%
      オレンジジュース100% 様

      【素材の加工】
      FC2blogの着せ替えブログ

      <こうさぎ背景>
      silverheart

      羽アイコン PROFILE 羽アイコン

      elouai's doll maker 3

      ez-HTML

      Powered By FC2 blog

      FC2Ad






      side menu

      サイトマップラス
      Powered by SEO対策

      マクロミルへ登録

      羽アイコン BLOG PET 羽アイコン

      羽アイコン Collection Picnic 羽アイコン

      ★★★

      羽アイコン 訪問バナー配布中 羽アイコン

      ★★★

      はなみつきのお家に行く!

      ★★★

      はなみつきの家に訪問の際は、コレピクにログインしている必要があります。

      ★★★

      トイザらス・オンラインショッピング

      ★★★

      Apple Store
(Japan)

      art5_120x90.jpg

      羽アイコン おすすめ本・ソフト 羽アイコン

      ベクターPCショップ&ソフトウェア・ライブラリ

      ★★★

      羽アイコン RECOMMEND 羽アイコン

      ★★★

      ★★★

      ★★★

      ★★★

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