【Vaster2】カスタマイズ方法

2018/02/02

とりあえず、Vaster2のテーマデザイナー対応版を導入したので、これからカスタマイズしていこうと思う。そこで、まずはカスタマイズの方法から書き残していくことにする。

・Vaster2についてはこちら
・Vaster2の各部位のカスタマイズについてはこちら

Vaster2のカスタマイズ方法

カスタマイズについて

Vaster2は、基本的にテーマデザイナーからページ幅や文字サイズを変更することはできない。なので専ら「HTMLの編集」から「CSS」や「HTML」を編集してカスタマイズしていくことになる。

BloggerにはテーマデザイナーからCSSを編集することもできるが、この方法はVaster2に向いておらず、HTMLを直接編集する方が効率が良い（テーマデザイナーのCSS編集機能はHTMLを直接編集すると表示されなくなることがある）。

なお、カスタマイズする前には必ず「テンプレートのバックアップ」を取ることをおすすめする。これをしておかないと、失敗した時に復元することが難しくなる場合がある（特にHTMLの変更時）。

カスタマイズの方法

HTML編集画面の表示

・Bloggerの編集画面から「テーマ」を選択
・Bloggerのプレビューの下にある「HTMLの編集」を選択

CSSの表示

・の下の<b:skin>…</b:skin>の横にある▶をクリック
・表示された部分がVaster2のCSSになる（Chromeでは文字がブルーで表示される）

CSSの編集

・CSSを見ていくと「/*　記事ページ　*/」などのタイトルが見える
・このタイトルの下のコードがその箇所の設定となっている
・ちなみに「/*　*/」はCSSのコメントなので、これで囲めば編集中にメモを残せる

HTMLの編集

・ソースの下の方にあるという部分からHTMLとなる
・ちなみに「」で囲まれた部分がHTMLのコメントとなる

検索方法

・HTML編集画面を1回クリックする
・「Ctrl＋F」キーを押すと、編集画面右上に検索フォームが出る
・ちなみに編集画面には検索フォームが2箇所出てくる

コラム

最初に行ったこと

Vaster2を導入後に最初に行ったのは、まず全体像を考えることである。そこで大まかなデザインが決まったら「編集する場所」を具体的に羅列していくと、テンポよくカスタマイズしていけると思う。

なので、最初は「タイトルを中央に寄せる」などのように、自分がどのようにカスタマイズしたいかを箇条書きで挙げていくと、スムーズにカスタマイズ方法を検索できると思う。

例

・ヘッダーのタイトルを中央に寄せる
・記事ページの文字サイズを小さくする
・記事ページの見出しのデザインを変えるなど

CSSの編集について

最初はCSSについて無知だったので、各コードを検索してその意味を知ることから始めた。そして、ソース内の数値を変更して変化があった場所を確認して、そのコードの横に「/*　*/」でいちいち説明を書き加えた。

こんな作業を繰り返していくと、やがてCSSの大まかな意義と指定されているコードの意味が理解できてくる。つまり、まずは地道に数値をいじってCSSに慣れることが重要なんだと思う。

なお、CSSのコードは「.クラス名{}」で囲まれた部分が、HTMLに割り振られた「クラス名」を変更するポイントらしい。この{}内に指定したコードがそのクラスのデザインを変更する要素となる。

なので、慣れてきたら「.クラス名{}」の{}内に適当なコードをコピペして、どのように変化するのかを試してみた。そこで変化が起こると、体感的にコードの意味を覚えることができるようになると思う。

編集時の注意点

冒頭にも書いたとおり「HTMLの編集」の前には必ず「テンプレートのバックアップ」という作業はしておいた方がいい。

その理由として、Bloggerの「HTMLの編集」のエディターはエラーが起こって落ちやすい。そのため、編集時には変更の保存はこまめに取っておく必要があると思う。

また、BloggerのエディターにはHTMLのミスを自動的に補完する機能があるようなので、HTMLを変更した時に失敗していると変な位置にコードが補完されて修復不可能になることがある。

こうした理由から、Vaster2のカスタマイズ前には必ず「テンプレートのバックアップ」を行うことが重要である。

Blogger Labo