はてなブログで記事内にてCSSとJavaScripを適用する方法

f:id:TomoG:20181127101553j:plain

本記事では、はてなブログで記事内にてCSSとJavaScriptを適用する方法をご紹介していきたいと思います。

本記事でやりたいことを具体的に言えば下記のようなことです。

※ボタンを選択しても文字列が変わらない時は、少し待ってからボタンを押してください。

まだクリック無し！

ボタン

上記のボタンや計算処理を行うための、CSS及びJavaScriptは全て記事内にあります。

このように記事内でCSSやJavaScriptを動かせるようにするというのが本記事でやりたいこととなっています。

ここで、記事内でCSSやJavaScriptを入れておくことに何のメリットがあるのか気になる方が多いと思います。そのような方向けにメリットをご紹介します。

一番大きなメリットとして、全体にCSSやJavaScriptを適用しなくて済むということが挙げられます。

この全体に適用しなくて済むことによる効果は2つあると思います。

まず効果の1つ目はソースコードの可読性を高めるということです。はてなブログをよくカスタマイズする人は、カスタマイズのデザインCSSが長くなっていると思います。そのような時に、1記事でしか使わないようなCSSを入れておくというのは、より長くし可読性を失うということにつながります。

次に効果の2つ目は、サイトの表示速度を上げることです。ほとんどの記事で使用したいCSSやJavaScriptでも、デザインCSSやヘッダーなどに入れておくと処理しなくてはいけなくなります。そのサイトの表示速度を下げてしまいます。

そのようなことをページの本文にCSSやJavaScriptを書き込むことで、不要な処理をなくしサイトの表示速度を上げています。

注意点として、なんでも記事本文に入れて置いたらいいというわけではないため、下記の記事を参考にしてください。

はてなブログで記事内にCSSとJavaScriptを適用するソースコードは下記のようなものとなっています。

上記のソースコードを記事執筆時のHTMLにコピーしてください。

注意点として、参考記事では特にJavaScriptを本文に貼り付けるときは

となっていますが、付けなくても問題ないように思います。これは付けてない状態でJavaScriptが動かなければ付けてみるくらいの認識で個人的にはいいと思います。

本記事で利用したサンプルコードは下記の物となっています。

実験的に利用してみたいと思った方はコピペして自分の記事に貼り付けてみてください。

プレビュー直後はJavaScriptが動かないためご注意ください。

本記事の内容は以上となります。

特定の記事だけに活用したいCSSやJavaScriptは基本的にありませんが、知っておくと便利であるうえ、どちらか片一方のみを利用するということも出来ます。

本記事は以上です。お疲れさまでした。