QooQの見出しのデザインをカスタマイズ
ラムネグさんのbloggerテンプレート「QooQ」を使用していますテンプレートはこちら
さて今回はブログ本文の見出しのデザインをカスタマイズします
ブログを書いていると見出しを付けると思います
bloggerでは「見出し」「小見出し」「準見出し」と以下のように3つが標準で付けられます
 |
| デフォルトの見出し |
テンプレートでは
「見出し」が背景塗りつぶしの白抜き文字
「小見出し」がアンダーバー
「準見出し」が文字サイズの背景塗りつぶしの白抜き文字となっています
今回はこれを変えていきます
変更方法
変更方法はHTMLをコピペするだけです
まずはHTMLの編集をしますので念のためバックアップをしましょう
bloggerカスタマイズページ ＞ テーマ ＞ HTMLの編集
「Ctrl」＋「F」で検索ボックスを出し「single-content h2」と検索
以下のようにsingle-content h2の欄が一つだけ黄色くハイライトされます
「h2」「h3」「h4」と並んでコードがありそれぞれ
「h2」が見出し、「h3」が小見出し、「h4」が準見出しに相当します
bloggerカスタマイズページ ＞ テーマ ＞ HTMLの編集
「Ctrl」＋「F」で検索ボックスを出し「single-content h2」と検索
以下のようにsingle-content h2の欄が一つだけ黄色くハイライトされます
「h2」「h3」「h4」と並んでコードがありそれぞれ
「h2」が見出し、「h3」が小見出し、「h4」が準見出しに相当します
#single-content h2{
font-size: 110%;
font-weight: bold;
padding: .5em;
margin-bottom: .8em;
margin-top: 2em;
border-radius: 2px;
background: $(brand.color);
color: $(brand.font);
}
そのため上記のコードの内、｛ ｝で囲まれている黄色くなった箇所を変更するだけで簡単に変えられます
私は以下のサイトを参考にしました
このサイトに見本のコードがたくさん紹介されているため
｛ ｝で囲まれている箇所をコピーし自分のサイトに張り付ければその表記にすることができます
デフォルトの色を使いたい
デフォルトの色を使いたい場合はRGBカラーコードを$(brand.color)
に変更すればデフォルトのままです
変更結果
コードを組み合わせた変更結果がこちら今回は小見出しと準見出しを変更しました
見出しも変更しようとしたらサイドバーのガシェットも一緒に変更してしまったので今回はやめておきました
おそらくh2の見出しを共通で使っていると思うのでそこをいじれば上手くいくのではないかと思います
まとめ
今回は見出しをカスタマイズしました見出しが統一されるとブログがまとまって見えると思います
コードをコピペするだけで変わったのですごく簡単でした
テンプレートが見やすいのもいいですね
私でも見つけられました
カスタマイズしていくとブログを書くモチベーションも上がるので時間があるときにこれからもどんどんしていきたいです
これでbloggerをやる人が増えて盛り上がればうれしいです
bloggerやる人が増えればいろんなカスタマイズ情報を参考にできますしね
