ブログは一旦書き始めると記法が定まりやすく、途中で路線変更することが難しい。なので、前から運営しているブログなんかはMOREタグを入れてなかったり、見出しタグを使わないまま何百件もの記事を書いてしまっている。

そのため、MOREタグを利用した機能追加や見出しの一括変更なんかができないわけだ。"時すでに遅し"とはこのことだろうか…。よって、この記事を読まれている駆け出しブロガー様には、僕の後悔を踏まえて以下の点を押さえておいて頂きたい。

テンプレートについて

テンプレートの選択は重要

Bloggerには標準搭載されているテンプレートが多数あるが、最初はそれを使って満足できていたとしても後で良いテンプレートを見つけた時に、自分のように上手く乗り換えられない事態になって後悔することもある。

なので、Bloggerを使うならば「テンプレート選びは結構重要」と思っておいたほうが無難だと思う。今更思うにテンプレートに関しては以下の点を押さえておくべきだったと思っている。

押さえておくべき点

・標準のテンプレートはなるべくさける（カスタマイズに不向きなため）
・CSSの構成が簡単でカスタマイズしやすいテンプレートを選ぶ（初心者では分かりづらいか？）
・レスポンシブデザインが標準搭載されているテンプレートを選ぶ
・SEO対策が標準搭載されているテンプレートを選ぶ
・関連記事、SNSボタンなどのユーザービリティを上げる機能がついているテンプレートを選ぶ

オススメのテンプレート

・Smart：当サイトで配布中のスマートなデザインのテンプレート
・Hello, world!：当サイトで配布中の画像ブログ向きなデザインのテンプレート
・Vaster2：機能性、カスタマイズ性に優れた国産のテンプレート（今はダウンロード不可）
・Tokyo：レスポンシブデザインでかつカスタマイズ性も高い国産のテンプレート
・Zelo：レスポンシブデザインでSEO対策もなされた優良な国産のテンプレート

テンプレートの変更・編集時の注意点

Bloggerでテンプレートを変更すると、それ以前に使っていたテンプレートの設定を引き継ぐことがあり、その結果としてレイアウトが崩れてしまうことがある。

また、テンプレート編集機能にはエラーコードを自動で補完する機能がついているらしく、誤ったコードを打ったまま保存してしまうと修復不可能なほど無茶苦茶になってしまうことが多々ある。

なので、現在使っているテンプレートを変更・編集する際には必ず「テンプレートのバックアップ」をとっておく必要があると言える。もし取らずにミスしてしまった場合には修復がめちゃめちゃややこしいぞ。

記事作成について

MOREタグは入れておこう

「MOREタグ」とは「続きを読む」までの範囲を区切ることのできるタグで、テンプレートの仕様によっては使わない方が有意義な場合もあるが、記事中にアドセンスや目次を入れたいときなんかのポイントになりやすいという特徴も併せ持っている。

なので、「トップページに記事全文が羅列するような昔ながらのブログスタイルにしたい」などのこだわりがなく、今主流になっている「トップページに記事タイトル＋サムネイル＋要約文が並ぶ」ようなスタイルで運営したい場合なんかには、必要であろうがなかろうが各記事にMOREタグを入れておくと色々と便利だったりすると思う。

見出しはタグで入れておこう

自分がまだ初心者だったときには内容重視でタグとか云々は全然意識していなかった。で、ちょっと慣れ始めた時に文中で見出しに当てたい部分をHTMLで編集して見出しっぽく改変するなど、今思えば間の抜けた編集をしていたなあと思う。

ブログは閲覧者が増える頃には記事数もそれなりに増えてくると思われるので、後々一括してレイアウトを変更したい場合なんかはタグを使って編集しておいた方がかなり便利が良い。

また、CSSを使ったレイアウトの方が読込が早いなどの利点もあるので、この辺は慣れてくるに従って重要になってくるポイントだと思う。ちなみにCSSは見出しの編集程度ならば初心者でも簡単で、一度覚えておくとブログ運営はかなり楽になる。

なので、先のテンプレートの件とあわせて、まずは「それなりにスタイリッシュでカスタマイズ性に優れたテンプレート」を選んでおき、最初は既存の見出しを使った記事を書き、慣れてきた頃に一括してレイアウトを変えるのが理想だと思う。

パーマリンクをつけておこう

Bloggerにはパーマリンクを設定できる機能が付いている。このパーマリンクというのは記事のURLの末尾部分のことで、パーマリンク設定で指定した文字列がその記事のURLになるという寸法だ（後からの変更は不可能）。

Bloggerではこれを設定していない場合、タイトルや投稿日時などから適当に取得した文字列が割り当てられる。なのでパーマリンクを設定しなかった記事に人気が出た場合にURLを紹介されるとかなりダサいし、分かりづらい。

なので、このパーマリンクというやつは なるべく意識してつけておいた方が無難だと思われる。ちなみにパーマリンクは検索順位に影響を与えないといわれているが、読者目線に立ってみれば分かりやすい方が良いだろう。

CSSについて

CSSというものに触れておこう

ブログの人気に関しては内容次第だとも言われるが、読者目線に立ってみればスタイリッシュなデザインのブログの方が魅力的に見えると思う。なので、ブログをスタイリッシュにレイアウトするためにはCSSの知識は必須になってくる。

このCSSについて1から10まで把握するのは難しいが、CSSに触れてみて基本構造というか法則性みたいなものが見えてくると途端にそのブログのCSSの構成が見えてきたり、CSSを使ったレイアウトのアイデアなんかが浮かぶようになってくる。

自分の場合、Vaster2を導入してから適当にCSSを触り始めたわけだが、最初の頃はよく分からなかったものの、「記入 → 反映」というルーチンを繰り返すことで段々と使い慣れてきて、気づいた頃にはCSSの編集が板についていた。

そんな経験から、自分にとってはVaster2のカスタマイズがCSSを使いこなすための登竜門的な役割になったわけだが、上記で紹介した国産のテンプレートでも同様の作業は可能なので、CSSを知りたいという人にはぜひ実践的に覚えていって欲しい。

なお、この基本的な法則を知るには、当サイトのVaster2カスタマイズ記事が少しでも役に立つと思われるので、多少なり読んでいただけると個人的にはありがたい（書いた甲斐があるという意味合いで）。

コメントアウトしておくこと

BloggerのテンプレートにおけるCSSの編集部分は、編集画面中の「 <b:skin>～</b:skin>」の間に当たり、最初は隠されているので三角ボタンをクリックして表示させなければ見ることができない（自分の場合は青文字で表示される）。

ちなみにテーマデザイナーからもCSSの追加は可能なのだが、慣れてくると逆に使いづらいので、後々のことを踏まえて「HTMLの編集」から直接編集するのが良いと思われる。

この際に親切なテンプレートであれば、まとまったコードがどの部分を指しているのかがコメントで示されているのだが、標準のテンプレートなんかは英語仕様で初心者には分かりづらい感じで記されている。

なので、最初のうちは自分でコメントアウトして、どういう構成になっているのかを把握する作業から入るのが無難だと思う。ちなみにCSSにおけるコメント部分は「/*～*/」で囲まれた部分となり、この部分はブログのレイアウトに影響しない。

また、このコメントアウトという所作は、色々なサイトで紹介されているコードをコピペして適用する際にやっておくと後々編集したくなった時なんかに非常に便利なので、この作業は慣れてきた時でも結構重要かと思われる。

CSSの効率的な学び方

上記と内容が重複するかもしれないが、CSSの学習を効率化するならば やはり自力でテンプレートをカスタマイズすることが一番の近道だと思う。しかも、何より自力でレイアウトを変えるという作業自体が楽しい。

なお、ネット上にはCSSの解説サイトは五万とあるので、検索の方法次第で無料でいくらでも知識を得ることができる。だが、その際に「コピペ」で済まそうとするのは避けたほうが良い。というのも、これをしてしまうとエラーが起きた時に原因究明ができなくなったり、「コピペした部分」自体を忘れてしまうことが多いからである。

なので、基本的には「自分でキーボードを叩いてコードを打ち込む」ということを意識しておくと覚えが早いと思われる。

CSSのコードはカレーにたとえられる？

CSSの記法は一定の形になっており、その基本構造が理解できれば応用は結構簡単だと思われる。例えば、記事タイトル（h2見出し）のCSSコードはこんな感じになっている（※は解説）。


大体こんな感じの構造になっており、編集を指定する部分を書き換えればその部分がレイアウトとして反映される。なので、雰囲気で言えば「編集部分の指定＋｛編集内容｝」といった形になると思ってもらえれば良い。

これをカレーにたとえると、こんな感じになる。


ちなみに上記のコードは見出しタグのh2、h3、h4を指定している（内容は適当）。自分の場合はこんな感じで把握しており、この把握の仕方で支障はない。だが、うまい説明かどうかは読者の判断におまかせしたいと思う。

その他

HTML/JavaScriptガジェットをうまく使う

Bloggerには他のブログサービスのような便利なガジェットは搭載されていないが、わりとシンプルでカスタマイズ性に優れた機能が備わっている。中でも「HTML/JavaScriptガジェット」は非常に使い勝手が良い。

使い方は簡単でガジェット内にHTMLやJavaScriptのコードを追加して設置しておけば、テンプレートのHTML内にコードを打ち込んだことと同じような結果が得られる。なので、これを使うとHTMLの編集からコード追加せずともブログのレイアウトを編集することができ、削除する際もガジェットごと消してしまえば済むということになる。

試験用のサンプルブログを用意しておく

Bloggerは1アカウントでも複数のブログを作ることが可能である。なので、一つぐらい「テンプレートを試験するためのサンプルブログ」を作っておくと非常に便利である。

具体的には、今運営中のブログがあるとして、このブログのテンプレートを変えたいと思った時にすぐに新たなテンプレートを適用してしまうと予見できなかった不具合が発生することがある。こうなってしまった場合、ブログを復旧するまでに色々とロスが発生してしまうので良いことなど一つもない。

こんなとき、あらかじめ作っておいたサンプルブログに新たなテンプレートを適用して様子を見れば、今後発生するかもしれない不具合を未然に防げる可能性が高くなる。また、サンプルブログに運営中のブログに新たに使いたいテンプレートを適用しておき、そこで先にカスタマイズしておけば、テンプレートの移行もスムーズになると思われる。

こんな感じでいざという時に対処できるようにしておけば、ブログ運営において色々と捗る点が出てくるだろう。

まとめ

理想的な流れ

上記の内容をまとめると、これからBloggerでブログを始める人は以下のような流れで始めるのが良いと思われる。

・01.新たにブログを始める
・02.すぐに国産のテンプレートを適用する
・03.記事は「MOREタグ」「見出しタグ」「パーマリンク」に気をつけてアップする
・04.試験用のサンプルブログを立ち上げておく
・05.カスタマイズを意識するようになったらCSSの編集を始めてみる
・06.よくわからないコードを適用する場合は「HTML/JavaScriptガジェット」を使うようにする

失敗したとしても

自分はここまで知識を得るために様々な失敗をしてきたが「失敗は成功のもと」ということわざがあるように、失敗したからこそ得られた知識や経験がたくさんある。なので、失敗したからといって悲観することはないと思う。

また、色々な知識を得ることで失敗を未然に防ぐためのアイデアが湧いたり、失敗から新しい方法論が生まれたりすることも結構多い。なので、失敗を恐れずに色々と試してみた方が、意外と良い結果を得られるのかもしれない。