タイトルと見出しをカスタマイズ【QooQ】｜Bloggerカスタマイズ【備忘録】

　テーマをQooQに変更して次に取り掛かったのはCSSを弄ってタイトル部分、見出し部分のカスタマイズです。やり方はあれこれ探して以下のブログエントリを参考にさせていただきました。

Bloggerカスタマイズ STEP1【テーマとHTML編集】-ハッピーお父さんの人生と財産ハッピーお父さんのブログより。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選サルカワさんのブログより。

　基本的にはハッピーお父さんのブログに書いてある手順で、サルカワさんのブログに書いているCSSのコードをコピペさせて自分のブログをいじる訳ですがやる前にテーマ（テンプレート）のバックアップは必ずとっておいてください。

追記20190827：タイトルを変更しました。

追記20190902：タイトルを『タイトルと見出し』から『タイトルと見出しをカスタマイズ』に変更しました。

画像はイメージです。｜100万点以上の高品質なフリー画像素材 - Pixabay

タイトル

　まずは投降のタイトル部分をいじります。タイトルHTMLではh1で括られるとその文章はタイトルとなります。ちょっと説明雑ですね。でも基本的に投稿ページより題名部分に入れた文章がh1で括られるのです。テーマ（テンプレート）をつるし（デフォルト）のままで使うのであればこの辺り特段気にしなくてもいいのですが、見た目を気にする人にはここら辺は避けては通れない道です。

またtonbori堂はぬるいブロガーですがガチブロガーの人はタイトルが大事という方が多いです。（それはエントリの文章的やキャッチという事もですが）やはりトップに来るので目立った方がいいと。そして見やすいのがいいという事でまあそこも意識しているつもりですが基本tonbori堂は好みでカスタマイズしています。

　文字色は先にご紹介したテーマデザイナーで変更可能です。変更する際はこれまたバックアップをとって変更してください。そして文字色だけでなく文字の大きさや装飾（飾り罫、下罫などを入れてタイトルを強調する、または背景とは違うタイトル別背景など）をする場合はスタイルシートCSSを使って変更します。

※しつこいようですがHTMLやCSSでのカスタマイズやテーマデザイナーでのカスタマイズの際は必ずバックアップを取るように。そして自己責任でお願いいたします。

タイトルの上下に罫線を入れる

　デフォルトではQooQの場合、投稿のヘッダー部分（上部）にh1指定での文字がはいるだけです。ふるゆわなブログならこれでも十分な気がするんですが、トップのタイトルをキュッと締めるために上下に罫線を入れてみたいと思います。ここは上で紹介したサルカワさんのブログでCSSを探して上下に罫線がはいるコードを探します。「上下に線」というのがありますのでそれを今回は使用させていただきました。これは好みなので色々気に入ったものを使うのがいいと思います。

　タイトルなのでそのままh1でやっていますけど見出しや小見出しの場合はそれに則したh2やh3に変更すれば見出しを上下罫線にすることも可能です。また文字色、罫線の色変更については#から始まる番号を変更してやれば色が替えれます。MTMLまたはCSSカラーコードで引けばそれらを網羅しているサイトに行き当たりますが手っ取り早いのは前回も使用した背景色、文字色の変更などに使用したテーマデザイナーを起動して文字色のところにあるコードをマウスポインタでハイライトして右クリック。コピペするのが早いかと。

}
h1 {
  color: #0c343d;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px #0c343d;/*上線*/
  border-bottom: solid 3px #0c343d;/*下線*/
}

　CSSを記述する方法は２つ、一つはそのままテーマデザイナーの上級者の項目からCSSを選んで右のテキストエディタ部分にコードを記述するか、HTMLから編集するか。テーマデザイナーからだと簡単ではあるんですが反映されない場合がありますのでご注意を。HTMLから編集の場合はCSSの「個別記事見出し」の項目を探します。探す場合はHTML編集内でctrl+fのコマンドを使うとウィンドウ内に検索窓が開きますのでそこから検索すると早いです。このコマンドはワードやブラウザでも使用する方いらっしゃると思うので作業効率化のため是非ご活用ください。

tonbori堂はまるで素人だったのでこのコマンドのおかげであれこれ楽をさせて頂いています。そこからその項目の下に上のコードを記述してください。このコードはサルカワさんのところのコードをtonbori堂が別の色コードに変更しています。そしてテーマを保存して投稿記事をプレビューして変更されていればOKです。

見出しの変更

　見出しはデフォルトでは見出し背景色に対して白抜き文字でしたが投稿部分の背景色に色を付けたので、こちらは背景色を白抜きし、文字を色文字にしてみました。これはCSSを弄る必要はなくテーマデザイナーで可能です。

小見出しも同様にそのままで、小見出しの下に罫線のデザインを踏襲していますが統一感を出すためにテーマデザイナーで色を変更しました。

準見出しは見出しのみをタイトルボックスで囲む仕様になっていてどうもデザイン的に統一感が無い気がしたのでこれは変更する事に。Vester2の時に準見出しは左側に縦罫線が入るものでしたのでそれをさきほどのサルカワさんのブログのエントリで探します。「左線」というのがそれに当たります。

h1 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #7db4e6;/*左線*/
}

　こちらは準見出しがh4のためまず、HTMLの編集から#single-content h4を探します。見つかったら{display: table; から後ろ（下）にあるPadding:からを記述。それで上と同じ手順で投稿記事のプレビューで変更されているかを確認します。変更されていればそれでこの作業は終了です。（下のように見えていればOK）

↓

小見出し（例）

小見出しの見え方はこのようになります。

準見出しh4（例）

このように準見出しの左に線がでています。これでOKです。

最後に

　他にもまだ細かい変更があるのですがCSSをみだりに変更するとレイアウト配置が崩れたりします。まずはバックアップをとってテスト用ブログを用意して（Bloggerではブログをすぐに立ち上げることが出来ます。ダッシュボード画面の左上のプルダウンメニューから新しいブログ…を選択すると作成できます。）具合を確認するといいと思います。

CSSが反映されない場合もありますのでテスト用ブログで確認しながらやればトラブルシューティングもしやすいのではないかと。とりあえずこれで形になったので、また何かを弄った場合には記事にまとめたいと思います。ではでは皆さまよしなに。