スタイルシートつきHTMLに、他のHTMLを埋め込むにはどうすれば良いのだろう
イッテミアのブログパーツをはてなダイアリーに貼り付けるためのユーザースクリプトを作ってみた - NAT’s Programming Champloo
先日作ったこのユーザースクリプト(グリースモンキー)なのだけど、はてなダイアリーのデザイン設定によっては、うまく表示されないことが分かった。
以前作った、ニコニコ動画を埋め込むためのユーザースクリプト*1でもそうだったのだが、スタイルシートが指定されたHTMLに、他のスタイルシートが指定されているHTMLの一部を埋め込もうとすると、埋め込む先のスタイルシートの影響で、埋め込むHTMLのレイアウトが崩れることがある。
今回も薄々ありそうだと感じていたが、あっさり発生してしまった。
とりあえず今回は、埋め込むHTMLの中の<h1>を<div>に置き換えて、埋め込む先のHTMLのスタイルシートの影響を受けにくくする暫定対策をした*2。しかしそれ以外の部分は、相変わらず埋め込む先のHTMLのスタイルシートに影響されてしまう。
スタイルシートが指定されたHTMLの中に、他のスタイルシートが指定されたHTMLを、元のレイアウトを崩さずに埋め込むには、どうしたら良いのだろうか。
スタイルシートが指定されたHTMLの中で、スタイルシートが指定されていない領域を作れれば、その中に、他のスタイルシートが指定されているHTMLを埋め込めば良い。その方法として