内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
2017/10/14(土) body内でCSS(Styleseet)追加
diary20171014
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
[[start]]>[[diary_start]]>[[diary201710]] ====== 2017/10/14(土) body内でCSS(Styleseet)追加 ====== WordPressはどのページでも共通のCSSを読み込むので、特定のページでだけスタイルシートを使いたくても「共通のCSSに追記」「プラグインの導入」など全ページに影響する変更が必要か要素ごと毎回毎回直接指定しなければならないと思っていたのですが・・・、調べてみるとhtml5対応の比較的新しいブラウザなら記事の本文内でスタイルシートを書いても装飾するようです。 ---- ===== body内の直接styleを直書き ===== body内でstyleタグを使います。古いブラウザだとスクリプトが画面に表示される可能性があるようです。(表示されたく無い場合は次項のjavascript案もあります)。WordPressのビジュアルエディタで再編集の予定がある場合は<style>から</style>まで改行せずに書いてください。改行すると<br />が挿入されて動作しません <code> <style> .js_yellow{ background-color:#ffff00; } .js_sky{ background-color:#00ffff; } </style> <p class="js_yellow">背景が黄色</p> <p class="js_sky">背景が空色</p> </code> ===== body内の直接Javascriptを直書 ===== 直接bodyにスタイルシートが書けるとは思っていなかったので、当初はこの方法を使っていました。上の方法と比べJavascriptが動作しIE9以降でないと動きませんが、かなり古いブラウザでもコメントアウトによりスクリプトが画面上に表示されないなどメリットがあります。 <code> <script type="text/javascript"><!-- var style = document.styleSheets.item(0); style.insertRule(".js_green{background-color:#00ff00;}", style.cssRules.length); style.insertRule(".js_red{background-color:#ff0000;}", style.cssRules.length); // --></script> <p class="js_green">背景が緑</p> <p class="js_red">背景が赤</p> </code> * insertRuleは1つで1スタイルしか指定できないので複数スタイルする場合はinsertRuleを追加して下さい。ダブルクォーテーション内で改行は使えません * ビジュアルエディタを使用する場合は「<!–」と「%%// –>%%」を削除し改行せずに書く必要があります。 デモ <html> <script type="text/javascript"><!-- var style = document.styleSheets.item(0); style.insertRule(".js_green{background-color:#00ff00;}", style.cssRules.length); style.insertRule(".js_red{background-color:#ff0000;}", style.cssRules.length); // --></script> <p class="js_green">背景が緑</p> <p class="js_red">背景が赤</p> </html> ---- [[start]]>[[diary_start]]>[[diary201710]]
diary20171014.txt
· 最終更新: 2018/05/20 16:42 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ