上級者向け設定-スタイル割り込みを駆使しよう

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

上級者向け設定-スタイル割り込みを駆使しよう

サンプル画像

スタイルシート(CSS・styles.css)がわかるようになるとサイト運営の幅が一気に広がります。

 

しかしあれもこれもとスタイルを追加していくとどんどん肥大して管理がしにくくなり、
何より容量の大きくなりすぎたスタイルシートは
ページの読み込み速度にも悪影響を及ぼしかねません。

 

読み込み速度に時間がかかるのは SEO で不利に働きます。

 

そのため特定のページにしか使わないスタイルがあったとしたら、
そのスタイルはそのページの表示時のみに読み込まれる
ようにすれば
CSSの管理もラクだろうし、読み込み速度にも影響を与えないで済みます。

 

そんなときに使えるのがこの「スタイル割り込み」機能です。

区切り画像

たとえば下の画像は、文字装飾の『ヒント』を適用した部分のキャプチャ画像です。

 

デフォルトの設定だと『背景色が薄めの青で、枠線で囲まれたボックス』の状態で表示されます。

 

キャプチャ画像

 

ところが、このページで同じように『ヒント』を適用した下のテキストは背景が「黄色」になってますでしょ。(アイコンまで変わっているのはカスタマイズしているせいです。ややこしくてスミマセン)

このサンプルテキストは『ヒント』という機能を利用してデザイン表示されていますが、背景が通常の「青」ではなく「黄色」になっています。

 

ソースを見ればわかりますが、HTMLは通常の『ヒント』を適用した時に吐き出されれる
<div class="thint"> となっています。

 

にもかかわらずこのページのみ背景色が変わっているのは、
記事タイトル上で右クリック→「詳細設定」→「上級者向け設定」→「スタイル割り込み」
このページだけに適用させたいスタイルを書き込んでいるからです。

 

やり方は「詳細設定」→「上級者向け設定」→『スタイル割り込み』欄に
直接スタイルを書き込む、これだけです。

 

キャプチャ画像

 

ここに直接書いたスタイルはスタイルシートに書かれたスタイルよりも優先されるため、
スタイルシート上の .thint に記載された background-color: #EFF4FA; という値は
無視されちゃうんです。

 

以上です。

購入ページへ


TOPへ戻る