この記事では、QooQテンプレートの見出しデザインを変更する方法を紹介しています。
ブログ初心者の私でも簡単に変更出来たので、安心してください(*^_^*)
カスタマイズ前
.png "QooQデフォルトの見出しデザイン") |
| デフォルトのデザイン |
↓
カスタマイズ後（例）
※当ブログのカスタマイズ例です。
01.png "カスタマイズ後の見出しサンプル") |
| カスタマイズ後の見出し（サンプル例） |
デフォルトの見出しがシンプルなので、自分好みにカスタマイズしてみました！
テンプレートを編集しますが、５つのステップで終わるので、難易度も高くないと思います。
さっそくやり方を見ていきましょう！(^O^)
■Bloggerの見出しの種類
まず、Bloggerの見出しをおさらいしていきます。
見出し→ｈ２タグ
小見出し→ｈ３タグ
準見出し→ｈ４タグ
以上、３種類です。
見出しの種類によって、「ｈ２～４」の数字が決まっています！
■カスタマイズの準備をする
１）好みの見出しデザインを見つける
Googleなどで「見出し デザイン CSS」のように検索すると、様々な見出しデザインが公開されています。
好きなデザインを探しましょう！
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。
おしゃれで魅力的な見出しデザインを68種類も紹介してくださっています(*^_^*)
サイトの雰囲気もかなり好きです。
２）CSSをコピーする
見つけた自分好みの見出しデザインのCSSをコピーします。
色などをカスタマイズしたい場合…
まず配布元のサイト様の利用規約などを読んで、カスタマイズが可能かどうか確認しましょう。
禁止されている場合は出来ませんのでご注意ください。
可能な場合は、一度メモ帳などへCSSコードを貼り付けて編集するのがおすすめです。
■見出しデザイン変更方法
バックアップを忘れずに！
テンプレートを編集するので、まずはバックアップデータを作成します。
.png "バックアップの場所") |
| テーマ→▼→バックアップ |
失敗してしまった場合に備えてバックアップをとっておきましょう！
１）見出しの記述を探す
.png "HTML編集画面への行き方") |
テーマ→▼→HTMLを編集 |
テーマの編集画面を表示させて、今回カスタマイズする見出しの記述を探します。
.png "見出しのCSSコードの記述")
個別記事本文が目印です。
テンプレートを何もカスタマイズしていない状態で、大体330行前後にあるかと思います。
ポイント
「Ctrl＋F」を同時に押すと、検索窓が出てきます！
個別記事本文を入力して検索すると、すぐ見つかるのでおすすめです(^O^)
個別記事本文の項目内の４つ目の＃からが見出しのCSSコードになります。
上から順番に、見出し／小見出し／準見出しで並んでいます。
２）変更したい見出しのデフォルトCSSを消す！
.png "選択状態の見出しCSS")
変えたい見出しのCSSを選択し、Deleteキーで消します。
下の「 ｝」も忘れずに選択しましょう！
３）コピーしたCSSを貼り付ける！
先ほど消した部分に、好みのデザインのCSSを貼ります。
.png "コードの貼り付け方") |
| 右クリック→貼り付け |
↓
.png "貼り付け直後のCSSコード")
このあとひと手間加えるので、もう少しです＞＜！
４）１行目コードの追記・変更
.png "手を加えた後のCSSコード")
貼り付けたコードの１行目に追記や変更をしていきます。
まずは、ｈ●の番号を変更したい見出しの種類の番号に変更しましょう！
見出し→ｈ２
小見出し→ｈ３
準見出し→ｈ４
数字は半角数字での入力となります。
そして、今変更したh●の前に、
#single-content
を追記してください。
#single-contentの後には （半角スペース）も忘れずに！
before／afterなど他に記述がある場合…
凝った見出しデザインだと、記述が２つ以上に分かれていることがあります。
が、やり方は一緒です(^O^)
.png "CSSコードがセットになっていた時")
すべてコードをコピーして貼り付けます。
.png "加筆変更したCSSコード")
ｈ●の番号を変更したい見出しの種類の番号に変更します。
両方とも同じ番号を入力してください。
そして、今変更したh●の前に、
#single-content
を追記します。
もちろん半角スペースも忘れずに！
５）保存
右上の保存ボタンを押して、カスタマイズ終了です！
実際に自分のブログを開いて、見出しが表示されるか確認しておきましょう。
同じやり方で番号を変えれば、他の見出しも変更可能です。
■おわりに
今回は見出しデザインの変更方法を紹介させて頂きました！
自分好みにカスタマイズすると、より愛着が湧くので、ぜひ挑戦してみてくださいね(^O^)
0 件のコメント:
コメントを投稿