[Blogger] 改造の基本

この記事では、Blogger改造の基本として「カスタマイズ」「レイアウト」「HTML編集」の方法を簡単にまとめます。慣れている人にとっては当たり前の内容だと思いますが、私のような初心者はけっこう戸惑ったので…。Blogger公式ヘルプは、ちょっと分かりづらいし、情報も古い…？これから新しくなるのかもしれませんが。

また、2020年9月からBloggerの管理画面が少し変わったので、その最新版に対応した記事として記録します。

ちなみに筆者は QooQ というテーマを使っています。テーマによって画面が少し違うところがありますが、基本は同じです。

カスタマイズ

カスタマイズ画面では、背景色や文字色などを変えられます（他にもあると思いますが、筆者はそれ以外で使っていません）。

管理画面トップから

左メニューの「テーマ」をクリック、中央上の「カスタマイズ」をクリック。

使い方

テーマによって項目が少し異なるようです。
配色は「上級者向け」という項目から変えられる、と書かれている記事をいくつも見たのですが、見つからなくて戸惑いました。項目名が変わったようです。2020年9月現在は、「詳細設定」から配色を変えられます。保存ボタンは右下です。

ちなみに、この「詳細設定」の中に「CSSを追加」という項目があり、そこから文字通りCSSを追加できるのですが、後述する「HTML編集」からも追加できるので、筆者は使っていません。

レイアウト

レイアウト画面では、ページに表示させる内容を追加・削除したり、配置を変えたりできます。

管理画面トップから

左メニューの「レイアウト」をクリック。画面は下でまとめて出します。

使い方

記事本文、サイドバーなどを「ガジェット」という単位で管理します。テーマがBloggerのどのバージョンに対応しているかによって画面が異なります。QooQは少し古いバージョンで、「編集」でそのガジェットの設定や削除、ドラッグ＆ドロップで移動、「ガジェットの追加」で表示内容を追加できます。

Blogger公式テーマは最新バージョンに対応していて、以下のような画面です。編集ボタンがアイコンになったり、削除せず非表示にできたりといった変化があります。

HTML編集

HTML編集画面では、HTMLコードを直接いじることでカスタマイズやレイアウトではできない複雑なことができます。いかにも「改造！」という感じです。筆者はこれにはまりました。

管理画面トップから

左メニューの「テーマ」をクリック、中央上の「カスタマイズ」の右にある矢印をクリック。2020年9月からここが少し変わりました。前は縦向きの「…」だったので、ちょっとわかりやすくなりました。

テーマのバックアップと復元

矢印をクリックすると、この画面が出てきます。HTML編集から少しそれますが、ここに重要な項目が詰まっているので、それぞれ説明します。

1. バックアップ…テーマのHTMLファイルをPCに保存します。HTML編集をする前にはバックアップを取ることをおすすめします。間違えて変なところをいじって元に戻せなくなると大変なので…
2. 元に戻す…HTMLファイルやXMLファイルを読み込みます。バックアップを復元するのはもちろん、公式以外のテーマを適用するのもここからです。分かりにくいですよね…。
3. クラシックテーマ（第一世代）に切り替える…過去のテーマが使えるようです。使ったことはありません。
4. HTMLを編集…HTML編集画面に行きます。後で説明します。
5. モバイルの設定…スマホやタブレットでレイアウトが崩れないようにする、いわゆるレスポンシブ対応の設定です。公式以外のテーマは、基本的に独自のレスポンシブ対応をしていると思うので、ここは「デスクトップ」にする場合が多いです。QooQはそうです（テーマによって異なるので、それぞれ確認してください）。

HTML編集方法

上の画面で「HTMLの編集」を押すと画面が変わります。右上のボタンは見れば分かるし、HTMLコードはここで説明しきれないので省略しますが、ここでは重要な機能である「検索」について説明します。
HTMLコードのどこかを、どこでも良いのでクリックします。そして、「Ctrl+F」を押します（Macは「Command+F」ですね）。すると、上に「Search」が現れます。ここに文字を入力してEnterキーを押せば、HTMLコードの中でその文字と一致する部分にジャンプしてくれます。複数あれば、選択した位置の下で、一番近いものから順番にEnterキーを押すたびにジャンプします。HTML編集で一番使う機能だと思います。検索ボタンを用意してくれたら分かりやすいのに、と思いますが…。

おわりに

Blogger改造の基本として「カスタマイズ」「レイアウト」「HTML編集」の方法を簡単にまとめました。基本的な内容でしたが、最初は混乱しますよね。
以下の記事に当ブログの改造内容を一覧にまとめているので、こちらもどうぞ。