attention admin about comments trackbacks you may also like

普段殆ど使わないCSSはこんな処理も1つの方法です

2020年02月07日
初級パソコン術
6
マウスホバー キャプション CSS W3C 新型コロナウイルス

実は~、あの「貞子さん」が、突然に筆者宅に緊急避難して来たんです。(そんな訳ない 笑)
その理由は、画像にマウスホバーすると判ります(爆)


新型肺炎を怖がる貞子さん

新型肺炎
ワタクシも怖いですぅ
お宅に
非難させてくださいね
マスクもくださいぃぃ

貞子さんでも怖いんですねぇ(笑)、今流行りの 新型肺炎(新型コロナウイルス)。


画像にマウスホバーするとキャプションを表示するWebテクニック

新型コロナウイルスはさておいて、貞子さん画像にマウスホバーして表示されるこのキャプション表示は、装飾がだいぶ凝ってますよね。 同キャプション表示の装飾には、下記ブログカード記事の「Lexi」で使われておりますCSS(CSS自体のサンプル表示はありません)を元に、少し簡略化して弊記事に応用させて戴きました。


Hover Effect Ideas | Set 2

An inspirational collection of subtle hover effects


見た目もなかなかお洒落なキャプション表示ですが、弊ブログではこれは過去には利用したことがなく、またこれから先にも殆ど使わないと思いますが、 とりあえず上図貞子さん画像のHTMLソースと、キャプション表示に施した装飾用CSSを参考に記します。




CSSは、ご覧のようになんともボリュームがありますが、これでも筆者的には、上記参考サイトのものよりずいぶん簡略化したCSSに仕上げてあるつもりですが、もしかしてもっと省ける部分はあるかもしれません。

ブログ運営を長く続けているといつの間にか膨れ上がるCSSの全体容量

さて、ここからがこの記事の本題なんですが、こんなにもボリュームのあるCSSを「ほんのたま~にしか使わないよねぇ、このCSS」となると、当然の行為のように、ブログテンプレートのCSS編集欄にコピペ追記したのでは、いろいろとムダが起きるんです。

テンプレートのCSS編集欄にCSSをコピペした様子

そう、この記事でしか利用しないこんなにもボリュームのあるCSSを、いつものようにテンプレートのCSS欄に追加してしまったのでは、とてもムダなんです。 このCSSを使わない記事でも、こんなにボリュームがあるCSSをいちいち読み込んでからブログ表示することになってしまう訳でして、その分、ブログのファーストビュー(画面をスクロールしない初期的表示範囲のこと)の表示速度にムダな時間となってしまうんです。

それは PageSpeed Insights のような、サイト表示速度チェックツール等で、自身のブログ表示速度をチェックした場合などに、しっかりと「改善項目」に指摘されてしまうことにもなります。


PageSpeed Insights

あらゆるデバイスでウェブページの読み込み時間を短くしましょう


あまり使う機会のないCSSは直接その記事欄に書いてしまおう

今時のモダンブラウザ(ChromeやFirefoxやSafari等)では、Web技術の標準化団体であるW3C勧告の「HTML 5.2」技術が採用されており、CSSをブログ記事内で直接、<style>~~~</style> のようにstyle要素での記述が、HTMLのbody内(記事内)にも書けるようになっております。

従って、上記キャプション装飾用のCSSをスタイル <style></style>タグで挟んで、それを記事欄最下部に記述してあげれば、当該記事内だけにそのCSSを読み込める訳でして、ブログのファーストビューにもムダが起きない誠に都合の良い、個別記事専用CSSとすることが出来るんです。

でもこのままではW3C validatorエラーになってしまう

ただ、スタイル <style></style>タグ で記事内にCSSを直接記述すると、下図スクショのように、W3Cの構文エラーとなってしまうんです。 まぁ、W3Cチェックではエラー表示にはなるんですが、実際には記事にはキチンと反映されますから「W3Cなんて関係ないわ」と構えられるブロガーさんでしたら、これは気にする必要はありません(笑)

スタイルタグがW3Cエラーになっている様子

W3C validatorエラーにならない記述方法もある

「私は気になる!」と言う方は、別の記述方法があります。 それはスタイル <style></style>タグは使わず、CSSをJS(JavaScript)で記述する方法でして、これは雛形を使えば、いとも簡単に記述出来てしまいますからお勧めな方法です。

その雛形は、、、



このようになっており「ここにCSS内容」の部分に、CSSを挿入してあげれば利用出来ますが、CSSを挿入する前後にある グレイブアクセント ` は削除すことがないよう注意が必要です。 この雛形は、筆者が常日頃から「Web知識の師」と敬愛しております、Akira先生のブログ記事からコピペさせて戴いたものです。


body内のstyle要素が一定条件下で再びエラーに

head内限定だったstyle要素の記載がHTML5.2からはbody内にも書けるようになりました ということで私のその件を記事にしております...


但し、CSS表に記述してあるままの内容を、そのまま「ここにCSS内容」の部分に挿入してしまったのでは、とても長大な記述になってしまいますから、上記CSS表の中身を「圧縮」することが最良の方法です。 CSSを圧縮する方法はいろいろとありますが、例えば下記ブログカードのようなWebサービスを利用すると簡単に圧縮出来ます。


CSS Compressor

Use CSS Compressor to compress CSS (CSS 1, CSS 2, CSS 2.1 & CSS 3) to reduce CSS code size and make your website load faster. You can select from 4 levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. It is quick, easy and free!


その圧縮したCSS内容を「ここにCSS内容」にまるごと挿入してあげるとスッキリ収まり、そのJSを記事編集欄の最下部にコピペしてあげれば完了です。 参考に、スクショを貼って於きます。


記事編集欄の最下部に貼ったCSS記述のJSの様子

まとめ

実に理に適ったとても賢い方法でして、ブログ運営を長く続けていると、ブログテンプレートのCSS欄の容量が自然と膨れ上がって来ますから「参ったなぁ」等と嘆いているブロガーさんには、積極的に利用して戴きたい方法かと思います。


CSS処理方法を自画自賛する男性

どうだい
ナイスな方法だろ♪
このCSS処理


自身のブログを各種ツールで分析しましょう

ブログがスマホで正しく表示されるかテストする!
モバイル フレンドリー テスト

ブログのスマホ表示速度分析は PSI が強力です!
Google PageSpeed Insights

ブログのPC表示速度分析は GTmetrix が強力です!
GTmetrix

検索からの方はトップページへもどうぞ


関連する記事
ぼっちん
Author: ぼっちん
記事に関わらないコメントでもOKですからね~ ^^

コメント(6)

There are no comments yet.

よつば  

2020/02/09 (Sun) 08:51

そうなんですね!

ぼっちん先生~♪ おはようございまーす

W3C validatorエラーね~沢山あり過ぎだからね~(;^_^A
改善したほうが良いとは思うけど...普通に記事に反映されてたら良いかなって感じです
でも改善方法をこの記事で教えて頂いたので、今度チャレンジしてみますv(*'-^*)-☆

ぼっちん  

2020/02/09 (Sun) 09:05
ぼっちん

To よつばちゃん

よつばちゃん、おはよ~です~ ^^

> W3C validatorエラーね~沢山あり過ぎだからね~(;^_^A

そりゃ、私も同じ~ (〃^▽^〃)oあはははっ♪
私も本音は「あまり気にしない」んだよね~ (≧ω≦。)プププ
ただ、Akira先生のこのJSを知ってからは、なるべくJSで書くようには心掛けているんです ^^
過去記事は、、、そのままで修正はしてありません (^_^; アハハ…

> でも改善方法をこの記事で教えて頂いたので、今度チャレンジしてみますv(*'-^*)-☆

うんうん(^-^) 機会があったら試しでやってみて「W3C validatorエラー」にならないか、確かめてみるのも「よつばちゃんのスキルアップ」になりますからね~ ^^

aki  

2020/02/13 (Thu) 00:06

直書き…

こんばんは!
記事内でのスタイル使用は、簡単且つ少なければタグ内に直書きしてしまうのですが…量が多いとそうもいかないですよね。
<p style="margin:~;padding:~;">こんな風に直書き</p>してます。
そういう場合にJSで、というのはとても有益なお話ですね♪機会が有ったらやってみたいと思います。(^-^)
私の場合、記事内で超ロングHTMLなどを掲載する際は、onclickで開閉するjavascriptを直書きしたりします。
ほぼ自力では無く他から学んだものですけども、色々利用させて頂いております。^^;
JS等の書き方や使い方に悩んだら、今度是非教えて下さいませ。m(__)m

ぼっちん  

2020/02/13 (Thu) 08:19
ぼっちん

To akiさん

akiさん、おはようございます ^^

> そういう場合にJSで、というのはとても有益なお話ですね♪機会が有ったらやってみたいと思います。(^-^)

この記事のサンプルのようなボリュームのあるCSSですと、普通は皆さん、テンプレートのCSS欄に何も思わず追加してしまいますよね、それでどんどんデフォルトCSS欄が膨れ上がってしまうから、しいてはスマホ表示速度を遅くしてしまう(笑)

弊ブログの場合は、テンプレートのデフォルトCSS以外の個人追加(記事内で利用するもの)CSSは、もう1つ別の外部CSSを設けてありまして、そちらに追加する方法を取っております。
それをJSで「遅延読み込み」しているんですが、それとて普段殆ど使わないCSSは追加したくない(笑)と言う気持ちから「記事内に直接書いてしまおう」と言う発想なんですけどね(笑)

> JS等の書き方や使い方に悩んだら、今度是非教えて下さいませ。m(__)m

えっ? \(><)/ギョギョギョ それはご勘弁ください~(笑)
私のJSは、他人知識をちょっぴりカスタマイズするパクリ利用が得意(笑)なだけでして、0から書く技量は全く自信なくて、従ってakiさんのように素晴らしいWebスキルをお持ちの方に、アドバイス出来る力なんてありません (^_^; アハハ…

ススム  

2020/02/16 (Sun) 23:01

利用してます

こんばんは、ぼっちんさん。
私も、この方法でテンプレートのスタイルシートを軽減させています。

ただ、しばしば使うクラスだと、記事の末尾にいちいち書くのも面倒に感じるのは、贅沢な悩みでしょうね (苦笑)

もう一つのメリットは、テンプレートを変更した時に記事内に書いた分は引っ越しの必要がないことですね。

ぼっちん  

2020/02/17 (Mon) 08:26
ぼっちん

To ススムさん

ススムさん、おはようございます ^^

当地は朝のこの時間から17度もあって、なにか感覚が変ですねぇ、この異様な暖かさ (^_^; アハハ…
そう言えば寝ていても (~Q~;) あっち~ って感じで、布団から足を出して寝てましたよ(爆)

> 私も、この方法でテンプレートのスタイルシートを軽減させています。

(笑)やっぱりCSSの特性が解っていると、自然とそう言う扱いになりますよね(笑)

> ただ、しばしば使うクラスだと、記事の末尾にいちいち書くのも面倒に感じるのは、贅沢な悩みでしょうね (苦笑)

そそそ、使用頻度によってはそうですから、そういうときは迷わず「CSSに追記」しますよね、私の場合はデフォルトのグループと記事内利用の個人追加CSSとはグループ分けして設定してあるんですけど、もう個人追加分の方が圧倒的にボリュームが大きくなっちゃってますし (^_^; アハハ…
PSIチェックでは「使われていないCSSは消せ!」って怒られてますけど(笑)

> もう一つのメリットは、テンプレートを変更した時に記事内に書いた分は引っ越しの必要がないことですね。

そ~なんですぅ(笑) けっこうズボラな私には、ピッタリな方法なんです (≧ω≦。)プププ