diary20171014

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- diary20171014 [2018/04/26 00:22] – [body内の直接styleを直書き] 管理者
+++ diary20171014 [2018/05/20 16:42] (現在) – 管理者
@@ 行 1: / 行 1: @@
+[[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]]