寝る部

常識にとらわれない新しい〝快眠〟を日々探求しているブログ

【はてなブログカスタマイズ】別に全記事じゃなく「1記事にだけ」CSS装飾をしたい時の方法

どうも。

私は就寝時刻を毎日1時間ずつ遅らせることによって、快適な睡眠を得ようと言う新時代のライフスタイルを送り、それをこのブログに綴っている男です。

ブログもある程度扱い慣れてきました。「こんなことがしたいなあ」と思ったら、どうやってやればいいのかというのはある程度わかる。でもそういえばCSSの装飾について、初心者時代に歯がゆい思いをしたことがあったので、それを後世に語り継いでみようと思いました。 

問題の所在

初心者時代苦労したのがCSS。

例えば

こんな風にちょっと文章をテキストボックスで囲んで印象付けたい

と思ったり、Amazonへのリンクをちょっと押しやすいボタンにしたいといったことです。

もちろん検索にかければ、「テキストボックスの作り方」や「アフィリンクの作り方」という解説はたくさんあります。

ありがたいことです。

おかげで「デザインCSS」に、教えてくれたコードをコピペするだけでオッケーです。

f:id:tsukarukatamade:20190709022511p:plain

でも私は、素直に言われた通りにしていたわけなのですが、どうも釈然としないものがあった。

――そんな、大げさな話なのだろうか……?

ちょっと〝この記事だけ〟文字を大きくしたり、ちょっと〝この記事だけ〟サクッとテキストボックスを作ってみたり、みたいなことなのだから、もっと簡単に、できるんじゃないかと。

そして実際にできることを知りました。

200時間くらいかかってからでした。

つまりはてブの「デザインCSS」の箇所に書き込むのではなくて、それぞれの個別の記事のHTML編集画面にCSSを書き込む方法です。

1記事だけ、特殊な装飾をする方法

方法は簡単。

<style type="text/css">


</style>

という文字列をHTML編集画面の、どこでもいいのでどこかに書いて、ここの間に、「「デザインCSS」のところに書け」と言われているコードを挟めばOK。それで他の記事には影響なく、その記事にだけそのCSSが反映されます。

たとえば、文字をちょっと小さくするコード。

p {font-size: 0.9em;}

というCSSコードならば、

<style type="text/css">

p {font-size: 0.9em;}

</style>

この3行をどこかしらに、書けばいいわけです。

f:id:tsukarukatamade:20190709022703p:plain

↑こんな感じ。これでこの記事だけpのフォントサイズがちょっと小さくなりました。

ちなみにHTMLにこのように書き込んだCSSは、「デザインCSS」に書き込んだコードよりも優先されます。

1記事だけCSS装飾をするメリット

1記事だけCSS装飾をするメリットは、「ちょっと手軽に実験ができる」ということでしょう。初心者としてはまだHTMLとかCSSに慣れてないわけですから別に全記事じゃなく1記事だけこんな文字の大きさにしてみたいとかこんなテキストボックスを使ってみたいということがあります。

しかしいちいちデザインCSSの画面を開いて、そこにコードを入力して、チェックして、という段取りはちょっと手間です。それに記事全部が反映しちゃう。それで別の記事では変になっちゃったり。

何回も何回も使っている装飾コードがある、何回も書くのが面倒臭い、となって、そこではじめてすべての記事を統率している「デザインCSS」の使用に進むのが、無理のない流れかと思います。

まとめ

確かにブログのデザインという世界は非常に複雑で難しい。

おそらくそのプロフェッショナルとしている人たちにとっては、当たり前で超簡単なことでも初心者にはちょっと難しかったりしますよね。

是非同じようなことで悩んでいたらお役立てください。

↑ちなみにこれ超よかったです。HTML系の本は4、5冊買いましたが、最後まで面白く勉強できたのはこれです。(他は挫折中)