簡単に体裁を整える方法編
どうも、F-EUEです。
下のブログで、体裁崩れを直しました。
とりあえず、この方法でも体裁を整えることには成功しましたが、
あまりにもコードが長く、毎回毎回やるのは正直面倒です。
今回は、はてなブログのデザインCSSの機能を利用して、
このコードを短くしていくやり方を紹介していきます。
それではやり方の詳細について、説明していきたいと思います。
1 デザインを整えたいものにidを付与する
これは簡単で、毎回定型的に使うものに対して <（要素） id=～～> といった感じで
名前をつけていくだけになります。
渡しの場合、記事冒頭のサマリーや途中の見出しに対して、
idを付与することで、入力の手間を省いています。
下の画像がHTMLで体裁を規定していたときと、紹介しているやり方の差になります。
画像を見比べてもらえば一目瞭然ですが、
圧倒的にコードが短くなっています。
一つの記事の中だけでも、何度か使うものなので、
この方法の変更はかなり役に立っています。
このブログからこの方法で体裁を整えているのですが、
ブログ作成が圧倒的に早くなりました。
2 idごとに、デザインCSSへコードを記載する
1でidをつけたものに対して、体裁を整えていくのが2になります。
ここで改めて、CSSのコードを紹介します。
ここに記載されている内容はHTMLで体裁を整えていた中身を
CSSにほぼ丸々転記しただけです。
これはサマリーのCSSですが、他にも見出しのCSSもあります。
これもHTMLの中身を転機しただけです。
画像中ではdiv要素のCSSしかありませんが、
他にも、li要素やp要素にも適宜idをつけており、
使用のたびに、背景色や文字の太さ/大きさを指示する必要をなくしています。
これらのCSSの記載先ですが、
ブログのダッシュボード＞デザイン＞カスタマイズ＞デザインCSS
となります。
多少ですがHTMLとCSSでルールが違う箇所はあるものの、
基本的には同じ書き方で色々と指示できるので、
とっつきにくということはないと思います。
唯一欠点があるとすると、idを付与しすぎてしまった時に
何が何だか分からなくなることですね。
もし多人数で1つのブログを編集している場合は、
idを付与する際のネーミングルールを決めておいたほうが良いと思います。
また、これだけ頑張って設定しても、スペルミスをしてしまえば、
反映されないのはHTMLもCSSも同じなので気をつけましょう。
以上が、簡単に体裁を整える方法でした。
皆様のお役に立てば幸いです。
ここまで、読んでいただきありがとうございました。
ではでは！！！
