スタイル割り込みとheadタグの使い方(上級者向け設定)

キャプチャ画像

『スタイルシート』というのはページのデザイン設定を一気に引き受けてます。

 

そしてその設定はすべてのページに影響を及ぼします。

 

しかしながら特定のページにしか使わないスタイルがあったとしてそれを『スタイルシート』に記述してしまうと、必要のないページ表示時にもその設定が読み込まれてしまい、無駄に読み込み速度を低下させることにもなりかねません。

 

そんな時には上級者向け設定スタイル割り込み機能を使って、
そのページの表示時のみ特定のスタイルを読み込むようにしてしまえば無駄を省けます。

 

SEO的にも効果があります。

 

”SEO”とは?

SEOとは「Search Engine Optimization」の頭文字をとったもので、一般的には「検索エンジン最適化」と訳されます。

 

これは検索結果で自分のウェブサイトをより上位に表示させるために行う対策全般のことを指します。

 

たとえば”サイト名にはキーワードを含めるべき”とか”画像には代替テキストを添えるべき”といった基本的なものから”1記事は○文字以上にすべき”といった漠然としたものも含めて、いろんな対策が昔から講じられてきてます。

 

しかしながら具体的にどの対策が一番効果的なのかといったことは明文化されてないため、だれもが検索エンジン対策用に効果的と思われることはやっておいて損はないと信じて取り組んでいるのが実情です。

 

これは特定のページにしか使わないスクリプト(簡易プログラム)を読み込ませたい時にも
役に立ちます。

 

こちらは同じく上級者設定の<head>タグを利用します。

 

特にスクリプト類は動作が重くなる傾向があるので、
SEO効果は”スタイル割り込み”よりも高いでしょう。


スタイル割り込み&<head>タグの使い方

たとえば『ヒント』を適用するとこんな↓感じで表示されます。

(※説明用に画像に変換してます)

 

キャプチャ画像

 

ところが、このページで同じように『ヒント』を適用した下のテキストは
背景が「黄色」になってると思います。

 

ここはビジネスタイプの『ヒント』を適用した説明ブロックです。

 

全体的に青系の色合いになってま、、、せん。

このページだけ背景を黄色系に変えてます。

 

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

 

実際にはコチラのように書き込んでます。

 

キャプチャ画像

 

『スタイル割り込み』に記述したスタイルは
【テンプレート】→【スタイルシート編集】に書かれたスタイルよりも優先されます。

 

実際には.thintの背景色はbackground-color: #EFF4FA;と設定されてます。

 

これが#fcf572というカラー値(黄色系)でこのページに限って一時的に置き換えられてるという仕組みです。

ある程度スタイルについて知識がないと使いにくい機能ですので、まさに上級者向け設定と言えるでしょう。

 

<head>タグも同様です。

 

このページだけに作用するスクリプトを<head>タグ内に記述しておけば、
他のページを開いたときにはそのスクリプトが読み込まれることはありません。

 

つまり”余計なモノは可能な限り省きなさい”というSEOのかがみみたいな手法と言えます。

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSカスタムテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください

 この記事をシェア 
キャプチャ画像

PC版レイアウトに切替

スマホ版レイアウトに切替