Bloggerカスタマイズのための基礎知識を初心者目線でまとめてみました。

ブログカスタマイズのための基礎知識

テンプレートとは？

テンプレートとはブログのタイトル・背景・文字色・文字サイズなどの表示形式をまとめて設定したもので、個人的には「ブログデザインの仕様書」といった感じで捉えている。

Bloggerのテンプレートは「XML」という形式になっており、これをカスタマイズするには「HTML」と「CSS」の知識が必要になる（簡単にいじるだけならば「XML」の知識は必要ない）。

HTMLとは？

HTML（エイチ ティー エム エル）とは、ウェブページを作成するために開発された言語で、Bloggerにおいては「テンプレート」および「記事ページ」「固定ページ」などを作成・カスタマイズするときに知識が必要になる。

基本的には「HTMLタグ」と呼ばれるもの要素でウェブページの構成やカスタマイズを行う。この「HTMLタグ」の書き方は「<タグ>～</タグ>」といった変更部分をはさむものが基本となっており、「<br>」で改行など一つで良いものもある。


参考リンク：HTMLタグリファレンス

CSSとは？

CSS（シー エス エス、スタイルシート）とは、ウェブページのスタイルを指定する言語で、HTMLと組み合わせて使用される。Bloggerでは主にブログ全体のスタイルの指定に用いられ、「記事ページ」「固定ページ」を個別に装飾することも可能だ。

HTMLとの違いは「ページ全体」あるいは「サイト全体」のスタイルをまとめて指定できることで、これを使用することでウェブページのスタイルを一度に変更するときなどの手間が格段に減るといったメリットが得られる。

書き方は「セレクタ{プロパティ:値;}」といった形になっており、セレクタは「スタイルを適応する対象」で、プロパティは「適応するスタイルの種類」だと思ってもらえれば良い。

セレクタ（適応する対象）の指定方法にはいくつかの種類があり、「h1（見出し）」など要素全体を指定するものや、HTMLで指定した「class（クラス）」「id（アイディー）」を対象にすることもある。

プロパティ（スタイルの種類）には様々なものがあり、文字装飾で言えば「大きさ」「太さ」「フォント」「色」「背景色」などを指定できたりする。この辺については参考リンクから色々調べてみてほしい。

BloggerでCSSを使うことになるシチュエーションは「テンプレート」と「ページ」をカスタマイズするときで、テンプレートの場合は「<b:skin>～</b:skin>」に、ページの場合はHTMLモードで書き込んだ「<style>～</style>」の間に記入して使う。

粗末な説明になったが、CSSの知識は他のブログサービスやウェブデザイン系の仕事なんかにも応用が効くと思われるので学んでおいて損はない。なお、CSSについてのさらに詳しい知識については下記リンクを参照してほしい。


関連記事：【CSS】ブログカスタマイズのためのCSSの基礎知識（初心者向け）
参考リンク：スタイルシートリファレンス

レスポンシブデザインとは？

レスポンシブデザインとは、表示するデバイス（PC・スマホなど）の画面サイズに依存しないサイトデザインのことで、これを使うと使わないとではGoogleの検索順位に影響が出るといわれている。

Blogger標準のテンプレートでは自動で「PC表示」と「モバイル表示」が切り替わるような設定になっているので、それを使う場合は特に気にする必要はないが、これを自分で指定することも可能である。

ちなみに当サイトが使っている「Vaster2」なんかはBloggerのモバイル表示に依存しないレスポンシブデザインになっており、CSSを編集することで細かい指定も可能になっている。

このレスポンシブデザインを設定するには、Blogger標準のモバイル表示を使わずに、CSSで画面サイズと表示方法を指定して設定する。この方法は上級者向けだと思われるので使う頻度は少ないかもしれないが、知っておいて損はない。


関連記事：【ブログ制作】PCでスマホの表示を確認する方法

テンプレートのカスタマイズ方法

テンプレートをバックアップする

Bloggerの管理画面から「テーマ」 → 「バックアップ/復元（右上にある）」 → 「テーマのダウンロード」を選択すると現在のテンプレートをバックアップすることができる。

逆にバックアップしたテンプレートや外部からダウンロードしたテンプレートを適応したい場合は、「バックアップ/復元」 → 「ファイルを選択」 → 「アップロード」という順で選択すれば良い。

この「テンプレートのバックアップ」という作業は、Bloggerテンプレートのカスタマイズにおいては非常に重要なものとなるので、更新する前には必ず行うような癖をつけておくと良いと思われる。

「HTMLの編集」からカスタマイズする

Bloggerの管理画面から「テーマ」 → 「HTMLの編集」を選択すると、テンプレートのHTML・CSSを直接編集できる。

これがBloggerテンプレートの基本的なカスタマイズ法になるので、今後 テンプレートを細かく設定したい場合はこの方法を覚える必要がある。しかし、誤記のあるまま更新すると取り返しがつかなくなることもあるので注意が必要。

なお、この方法を使うとテーマデザイナーのフォームに書き込んだCSSは表示されなくなるようだ。

関連記事：【Vaster2】カスタマイズ方法

「テーマデザイナー」からカスタマイズする

Bloggerの管理画面から「レイアウト」 → 「テーマデザイナ（リンク）」を選択し、テーマデザイナーの「上級者向け」 → 「CSSを追加」 → 「カスタムCSSを追加（フォーム）」にCSSを書き加えるとテンプレートに反映することができる。

この方法は初心者には簡単で使い勝手も良いだろうが、できることはあくまで「CSSの追加」のみなので「書き換え」を行うことはできない。よって、カスタマイズ性は非常に悪いと言える。

結局は上で説明した「HTMLの編集からカスタマイズする方法」に取って代わるので使用する必要はないと思う。