あちあち情報局

趣味や日曜プログラムなどを書いています

ユーザ用ツール

サイト用ツール


サイドバー

メニュー

現在リニューアル中

タグ一覧

diary20171014

ここは旧トップページ日記日記 2017年10月

2017/10/14(土) body内でCSS(Styleseet)追加

WordPressはどのページでも共通のCSSを読み込むので、特定のページでだけスタイルシートを使いたくても「共通のCSSに追記」「プラグインの導入」など全ページに影響する変更が必要か要素ごと毎回毎回直接指定しなければならないと思っていたのですが・・・、調べてみるとhtml5対応の比較的新しいブラウザなら記事の本文内でスタイルシートを書いても装飾するようです。


body内の直接styleを直書き

body内でstyleタグを使います。古いブラウザだとスクリプトが画面に表示される可能性があるようです。(表示されたく無い場合は次項のjavascript案もあります)。WordPressのビジュアルエディタで再編集の予定がある場合は<style>から</style>まで改行せずに書いてください。改行すると<br />が挿入されて動作しません

<style>
  .js_yellow{ background-color:#ffff00; }
  .js_sky{ background-color:#00ffff; }
</style>

<p class="js_yellow">背景が黄色</p>
<p class="js_sky">背景が空色</p>

body内の直接Javascriptを直書

直接bodyにスタイルシートが書けるとは思っていなかったので、当初はこの方法を使っていました。上の方法と比べJavascriptが動作しIE9以降でないと動きませんが、かなり古いブラウザでもコメントアウトによりスクリプトが画面上に表示されないなどメリットがあります。

<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>
  • insertRuleは1つで1スタイルしか指定できないので複数スタイルする場合はinsertRuleを追加して下さい。ダブルクォーテーション内で改行は使えません
  • ビジュアルエディタを使用する場合は「<!–」と「// –>」を削除し改行せずに書く必要があります。

デモ

背景が緑

背景が赤


ここは旧トップページ日記日記 2017年10月

diary20171014.txt · 最終更新: 2018/05/20 16:42 by 管理者