2025.03.03
ブログ用に見出しの装飾をテンプレート化 ( CSS )
↑こんな風に見出しっぽく変えるのをテンプレート化。こんなプラグインありそうだけどCSSで簡易実装。
要はCSSの装飾クラスを作っておいて、装飾したい箇所の追加CSSクラスにクラス名を入れる。
開発ツールを出す （プレビューするのに便利）
ブラウザはchrome
右上の縦…を押しその他ツール→デベロッパーツール
って順を追って事細かに説明した方が見てる人にはわかりやすいんだけども、ここに時間を割きたくない。
でもブログの書き方、まとめ方の練習にはなりそうだし長文にすればＳＥＯ的にも良いんでしょう。
ただ今は時間を割きたくないってことで
開発ツールの使い方がわかりやすいサイトをどうぞ！
デベロッパーツールは仮でCSSを変更できるので、ここを赤色にしてみたらどうだろう？とデザインにこだわりある人は是非使って欲しいツール。
どこからどうやって装飾をつくったらいいかわからない。って人はCSSで作れる色んな見出し装飾例をいっぱい紹介しているサイトをどうぞ！
デザインが決まれば後はクラス名を決めてCSSの内容をコピペでOK！HTMLを少し変えるものもあり。
ただそのままコピペしちゃうと 「 h2 」のみに装飾されちゃうので、好きなクラス名に変えます。
自分がわかりやすい名前でOKだけど、簡単すぎると他のクラス名とかぶっちゃうかも
今回は 「 midashinami 」これをクラス名にしました。
微妙に変更したい箇所などをデベロッパーツールを使いながら調整して、書き換え。調整して、書き換え。
できた装飾デザインを追加CSSクラスに書き込む
装飾したいブロックを選択した状態で、ブロックの高度な設定タブの中に追加CSSクラスがあるのでそこにクラス名を入力。
