アメブロをカスタマイズするうえで理解しておくべきHTMLの文章構造を理解し、アイデア検討とその実現について検討したいと思います。
【新エディタ】でHTMLを書いてみます。通常表示から途中でHTML表示に切り替えましたので、Pタグが大文字のものがあったりします。改行ごとにパラグラフが p タグで囲まれてますので、<BR>が連続するよりはいいですね。
楽天のショップシステムなんかもそうですが、こうしたASPで書き出されるソースコードはメチャクチャ
なことが多いのですが、かなりまともそうなのに驚いています。
何よりもの驚きは、HTMLバージョン5で書かれていること。スマートフォン対応はスムーズになりそうですが、PC用ブラウザの実装はまだまだバラけていると思いますので、その確認がしんどそうです。私自身も、仕様書とにらめっこする時間が増えそうです。
エディタでは font タグが使われてしまったり、 <A name=blogContent></A>
なんてのがソースコード中にあるのは、ご愛きょの範囲ですね。1記事投稿した段階で、W3C Validator にかけたところ、「エラー：20／警告：7」。そのエラーの内容的にみても、かなり優秀な範囲ではないかと思います。
アメブロで読み込んでいるスタイルシート
- http://stat100.ameba.jp/common_style/css/user/amebabar100314.css
- http://stat100.ameba.jp/blog/new/css/cmn/blog111206.css
- http://stat100.ameba.jp/p_skin/wu_pf_cssedit/css/skin.css
画像をアップロードした後に貼り付けるると、周辺のソースの改行が、<BR>に置き換えられてしまうのは辛いですね。URIも絶対URIでペーストすると、通常エディタでURIを書いたのと同様に扱われてしまうようです。ソースのタグは、小文字で書いても編集するために開くと通常表示がデフォルトのため、HTML表示に切り替えると全部大文字に変わっています。改行もどんどん増えていってしまうので、HTMLを書ける人にとっては辛いですね。
カスタマイズ対象のスタイルシート
skin.css です。
【2012-12-22追記】だと思ったのは勘違いでした。CSSを編集しない段階では当記事で書いた通りのCSSしか読み込みませんが、一度CSS編集をすると新たにCSSファイルが作成されて読み込まれるようになります。編集対象はそのファイルでした。
訂正してお詫び申し上げます。