アメブロをカスタマイズするうえで理解しておくべきHTMLの文章構造を理解し、アイデア検討とその実現について検討したいと思います。
後回しになってしまっていたアメブロプロフィール画面のカスタマイズ。実際に行う前にその実装方法について整理しておきたいと思います。
編集したユーザーCSSは読み込まない
HTMLを見ますと、プロフィール画面はアメブロ共通のCSSしか読み込んでおらず、「スキンCSSの編集」で設定したユーザーCSSは読み込んでいません。ということは、デザイン変更の手段は絶たれていることになります。
しかし、実際にプロフィール画面をカスタマイズしている方はいらっしゃいます。どういうことでしょう？
からくりは、各ブラウザの現在のHTML5への対応状況にあるようです。アメブロはHTML5で書かれていますが、プロフィールページのみはXHTML1.0。ですが、HTML5として期待される動作を各ブラウザが行なってくれるようです。幸いといっていいのか微妙なところですが、ともあれカスタマイズができるのはありがたいことです。
新しく導入されたスタイル指定の方法
HTML5以前は、スタイル設定の方法は、
- 外部ファイルを読み込んでスタイル設定する
- head要素内のstyle要素で指定する
- インラインstyle属性としてスタイルを埋め込む
の3種類でしたが、HTML5では、次の方法で指定ができるようになりました。
- scoped属性が伴う場合、フローコンテンツが期待される場所で使用できる
その仕様については、HTML5の翻訳サイト を読んでみても、原文 を読んでみても、私には即座には厳密な意味は理解できません。
間違いを恐れずに簡単にいうと、HTML文書のなかで、<style scoped="～">～</style>という形でスタイル設定ができるけど、そのスタイルが適用されるのは、それが指定されている親をルートとするサブツリーに対してだけ。
といったところでしょうか。
前提として、scoped属性が伴う場合に使用できるんと書いてあるんですが、もしそれがなければ、ブラウザはそのCSS設定を適用するとしたら文書全体に適用しないといけないみたいなことも書いてあります。私には、「前提条件を無視して使われたらブラウザはこうしないと仕方ないでしょう」という意味合いで書かれているように思われるのですが、つまり、これを利用してプロフィール画面をカスタマイズするわけです。
ですので、HTML5の標準化がすすめば、このやり方はブラウザによっては無視されることになるかも知れませんが、それはいま気にしても仕方ないかなと思います。
できる方法があるのなら、それを利用しちゃおうということです＾＾；
他のページと同じデザインに
分かりにくい説明だったと思いますが、具体的には、フリースペースに独自のCSS設定をすればそれが文書全体に適用されることを利用して、プロフィール画面のカスタマイズを実現します。
プロフィールページのページの幅は800ピクセルで、HTMLの構造も違ってますので、新たなサイトにデザイン組み込みをするという作業となりそう。ちょっと手間がかかるかも知れませんが、他のページ同様のデザインに仕上げていきたいと思います。
カスタマイズ完了後、気づいた点などがあれば、記事にしたいと思っています。
もし記事が気に入ったら、クリックいただければうれしいです
またのご訪問、お待ちしております