カンタンBlogger学習 #02 テーマカスタマイズの基礎

2023年2月23日

GoogleBloggerのテーマは、Wordpressのテーマと同じ扱いだと思っていいですが、内容は全く違います。 Wordpressは、PHPでできることはほぼ実装可能ですが、GoogleBloggerは独自のXMLを使った簡易プログラミングスクリプトでやるので、初めて触るとホント意味不明すぎてビックリです。残念ながら、リファレンスサイトでも親切に書かれていなくて、ブログで解説しているサイトをいくつか見て個人学習をしてしまいました。今回は、GoogleBloggerのテーマカスタマイズの基礎を学んでいきましょう。

テーマのバックアップ

テーマをカスタマイズするのは、非常に簡単で、メニューから「テーマ」をクリックして、「カスタマイズ」をクリックするだけで、ビジュアライズなカスタマイズエディタが立ち上がります。

でも、基本的にこの方法でのカスタマイズは今回の学習では一切行いません。

そして、テーマをカスタマイズしたりこれから行う編集作業をする前には、必ずテーマのバックアップを取っておきましょう。 ※テーマのバージョン保存や自動バックアップなどは、GoogleBloggerでは一切行ってくれないので、自己責任で行います。

テーマのバックアップ

テーマ - カスタマイズの右側をクリックすると、リストが表示されるので、クリックして

「バックアップ」を選択します。

この様なモーダルが表示されるので、「ダウンロード」をクリックします。

中に書かれているXMLがファイルで保存できるので、日時などを自分で追加してファイル管理しておくと良いでしょう。 XMLを編集して、もし失敗した場合は、そのXMLファイルを使ってもとに戻すことができるので、必ずバックアップをしておくようにしましょう。（ココ重要！）

HTMLの編集

今回の学習は、カスタマイズではなく、「HTMLの編集」を選択して、作業を進めていきます。

「元に戻す」という項目がありますが、カスタマイズを設定した場合はそのテーマ（公式サイトからダウンロードしたテーマ）のデフォルト状態に戻してくれますが、 HTMLを編集すると、バックアップをしていない限りは元に戻すことができないので、この項目は使わないという風に考えておきましょう。そして、HTMLの編集画面は、このような、コードエディタ画面になります。

デフォルトのテーマのHTML(XML)が表示されていますが、行数が４０００行以上あり、これを理解するのはちょっとしんどいでしょう。なので、今回は、最もシンプルな状態のHTML(XML)を設定してみたいと思います。

最もシンプルなHTMLを登録

GoogleBloggerのHTML(XML)は普通のHTMLを書いて登録をしてもエラーになってしまいます。それは次のルールがあるということを理解しておきましょう。

HTML(XML)のルール

1. htmlタグ属性の登録 2. headタグ内に<b:skin/>を登録 3. bodyタグ内に<b:section id='test'/>を登録この３つが整えば、正常に保存ができます。

一番ミニマムなコード

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html
  b:version='2'
  class='v2'
  expr:dir='data:blog.languageDirection'
  expr:lang='data:blog.locale'
  xmlns='http://www.w3.org/1999/xhtml'
  xmlns:b='http://www.google.com/2005/gml/b'
  xmlns:data='http://www.google.com/2005/gml/data'
  xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <b:skin/>
  </head>
  <body>
    <b:section id='test'/>
  </body>
</html>

２０行弱のコードですが、これをセットしても、画面真っ白のページしか表示されません。この状態をバージョンアップさせて行きながら、GoogleBloggerの学習を進めていきたいと思います。

カンタンBlogger学習 #02 テーマカスタマイズの基礎