はてなブログでCSS
みなさんどうも。お元気してますか？
前回のブログでCSSとはなんぞやについて軽くまとめましたが、あのやり方だとはてなブログにはCSSの編集項目なんてものはないので実行できないという。
そんな困難に見舞われてしまったのですが、別に.htmlと.cssにわけなくても実装可能なことが分かったのでそれについてまとめたいと思います。
CSSをはてなブログで
さあみなさん、この見出しはどうでしょうか。
こちらはHTMLでの編集を行って表示させているものです。
この機能を使ってみて分かったことが1つあります。
今まで編集見たままのところで記事を書いていたのですが、すべて<p>で書かれています。改行・空白もすべてそうです。めっちゃやばいですね。
なぜやばいのか、そう、CSSでまとめにくいのです。
例えば、今回の見出しはこのようなコードで書いています。
<h3 style="color: #990000;">CSSをはてなブログで</h3>
そう、それぞれの<p>のところに書体の設定を書き込んでいく必要が出てきてしまうということです。
試しに同じ<h3>見出しで設定を与えずに書くとこうなります。
上で設定した後の設定なし見出し
どうでしょう。しっかり黒いですね。つまり毎度書くときは上のように記述する必要があるわけです。デフォルトの設定が嫌で変えたい時とか地獄ですね。
これを設定したままにする方法もあります。
それは、こんな感じにclass分けをしてあげることで、少し書き足すだけで設定が反映されるのです！
<style>
p.bluetext{
color:Blue;
font-size:180%;
}
p.redtext{
color:Red;
font-size:150%;
}
</style>
<p class="bluetext">こんな感じで対応します</p>
<p class="redtext">こんな感じで対応します</p>
こんな感じで対応します
こんな感じで対応します
と、最初に書かなくても全体に反映されるため、一番上に書いておいた方が編集が楽になると思います。
実際に試した結果ですが、フォントの書体の変更はできなかったため全体に適応されているCSSの部分で変更をする必要がありそうです。
他にも各種設定ができそうなので面白くなりそうですね。
それでは皆様もお試しください！
