Javascript を利用してスタイルを変更する(2)
スタイルシートを操作するもう 1 つの方法を提案します.「詞織: 自作スタイルシートの適用」や「埼玉住人: 引用をわかりやすくしよう」で,link 要素や style 要素をなんとか埋め込んで,スタイルシートを適用しようという試みがされています.すばらしいテクニック.
でも本来おくべきところに link 要素や style 要素をおくわけではないので,XHTML の文法違反になってしまいます.この点はなんとも残念です.
ぼくも先人のマネをしてみたのですが,link 要素や style 要素ではなくて,script 要素を埋め込みました.そして外部ファイルにした javascript を読み込んでスタイルシートを操作します.こうして XHTML の文法違反になるのを避けてみました.
script 要素を埋め込んだのは,マイリンクの中です.なるべく下側になるのが良いでしょう.
<script type="text/javascript" src="/handshaking/style.js"></script>
/handshaking/ の部分は,ご自身の Weblog のディレクトリ名,つまりファイルをアップロードする場所に変更してください.
javascript のファイルは,ダウンロードして改変してみてください.
Download file [javascript のファイル]
この例では,見出しのスタイルと本文の字の大きさ,長文引用時の枠線などをのスタイルシートを操作しています.
下にソースコードを貼っておきます.
公開後に間違いを発見したので修正しました.
// ココログ用 javascript によるスタイルシート操作 // これは,正しい XHTML を保つために,スタイルシートの操作を javascript で行う試みです. // これは自由に使用し,改変して,配布してかまいませんが,正しい XHTML を心がけましょう. // マイリストになにかの項目を足すときに,そのメモの部分に以下のタグを書きくわえます. // <script type="text/javascript" src="style.js"></script> // そのマイリストの項目よりも先に出現するものしか,操作できません. // おのひろき // http://onohiroki.cocolog-nifty.com/foaf.rdf // // ココログ タイトルとサブタイトル document.getElementsByTagName("h1")[0].style.fontSize = '54px'; if(document.getElementsByTagName("h2").length){ document.getElementsByTagName("h2")[0].style.fontSize = '64px'; document.getElementsByTagName("h2")[0].style.color= '#768BA0'; document.getElementsByTagName("h2")[0].style.paddingTop = "30px"; } // 各パートの横幅 document.getElementById("container").style.width="90%"; document.getElementById("right").style.width="23%"; document.getElementById("center").style.width="77%"; if(window.innerWidth < 500){ document.getElementsByTagName("h1")[0].style.fontSize = '2em'; document.getElementsByTagName("h2")[0].style.fontSize = '2em'; document.getElementById("right").style.width="100%"; document.getElementById("center").style.width="100%"; } if(window.innerWidth > 1600){ document.getElementById("right").style.width="12%"; document.getElementById("center").style.width="88%"; } // 記事の見出し var i=0; do { document.getElementsByTagName("h3")[i].style.fontSize = '2em'; document.getElementsByTagName("h3")[i].style.color = '#FFFFFF'; document.getElementsByTagName("h3")[i].style.backgroundColor = '#768BA0'; document.getElementsByTagName("h3")[i].style.padding = '0.3em'; document.getElementsByTagName("h3")[i].style.borderStyle = 'solid'; document.getElementsByTagName("h3")[i].style.borderWidth = '2px'; document.getElementsByTagName("h3")[i].style.borderColor = '#667B90'; i+=1; } while (i < document.getElementsByTagName("h3").length); // 本文 p 要素 var i=0; do { document.getElementsByTagName("p")[i].style.fontSize = 'medium'; i+=1; } while (i < document.getElementsByTagName("p").length); // 長文引用 blockquote 要素 if(document.getElementsByTagName("blockquote").length){ var i=0; do { document.getElementsByTagName("blockquote")[i].style.fontSize = 'medium'; document.getElementsByTagName("blockquote")[i].style.padding = '0.3em'; document.getElementsByTagName("blockquote")[i].style.borderStyle = 'solid'; document.getElementsByTagName("blockquote")[i].style.borderWidth = '1px'; document.getElementsByTagName("blockquote")[i].style.borderColor = '#667B90'; i+=1; } while (i < document.getElementsByTagName("blockquote").length); } // 整形済みテキスト pre 要素 if(document.getElementsByTagName("pre").length){ var i=0; do { document.getElementsByTagName("pre")[i].style.color = 'green'; document.getElementsByTagName("pre")[i].style.padding = '0.3em'; document.getElementsByTagName("pre")[i].style.borderStyle = 'solid'; document.getElementsByTagName("pre")[i].style.borderWidth = '1px'; document.getElementsByTagName("pre")[i].style.borderColor = '#667B90'; i+=1; } while (i < document.getElementsByTagName("pre").length); }
| 固定リンク
最近のコメント