要注意事項と役立つコツを知っておこう - Blogger（ブログの作り方01）

どうも～♪ 本のソムリエ（見習い補佐）のだるまです。


ブログを作り始めて最初は分からないことだらけでしたが、最近はずいぶん目指すべき形に近づいてきました。しかし、Bloggerというのは良くも悪くも自由放任で慣れるまではアタフタすることが多いですね。


そこで、私が今まで学んだ「ブログの作り方」を何本かの記事にまとめて公開しようと思います。この記事を読めば少なくとも私のブログと同程度のものなら作れるようになりますよ。一つ一つ調べるのが面倒だという人は、ぜひこの記事を参考にしてブログ作りに励んでくださいね。


それでは、初回は「要注意事項」や「コツ」を中心に記事を書きたいと思います。非常に重要なことも書いていくので必ず目を通して次の記事へ進んでください♪


《注意！》この記事はBloggerの「ｼﾝﾌﾟﾙ･ﾃﾝﾌﾟﾚｰﾄ」に関してのものです。その他のブログやテンプレートでは記事の通りに反映されない可能性があります。

目　次

• １．要注意事項！
ⅰ．「ブルーエリア」は編集しない
ⅱ．バックアップを忘れずに
ⅲ．記事と「カスタムCSS」の保存
• ２．コード編集のコツ
ⅰ．CSSが反映されない !?
ⅱ．HTMLで編集箇所を見つけやすく
ⅲ．コードの変更点を記録する
<補>PCでモバイル画面を確認
• ３．記事作りのコツ
ⅰ．<br/>タグを消そう
ⅱ．言葉選びの強い味方
ⅲ．記事の文字数を確認する

１．要注意事項！

ⅰ．「ブルーエリア」は編集しない

Bloggerの【HTMLの編集（テンプレート⇒HTMLの編集）】では複数色で書かれている「カラフルエリア」と、青一色の「ブルーエリア」に分かれています。「カラフルエリア」は編集しても問題ないのですが、「ブルーエリア」を編集すると大変なことになります。

複数色のコードで書かれている「カラフルエリア」

青一色のコードで書かれている「ブルーエリア」

「ブルーエリア」を一度でも変更してしまうと、ブログスタイルの変更がモバイルに反映されなくなってしまいます。知識のある人ならモバイル用のCSSなどを追加して解決できるでしょう。しかし、この記事を参考にブログを作ろうとしている人には難易度が高くなってしまいます。なので自信のない人はココを編集しないように気をつけましょう。

ⅱ．バックアップを忘れずに

「HTMLの編集」を行う前は必ずバックアップをとってからにしましょう。バックアップをとっておけば万が一にもﾃﾝﾌﾟﾚｰﾄ･ﾃﾞｰﾀが失われた場合、または元のスタイルに戻せなくなった時に復元できるようになります。

バックアップは【テンプレート画面の右上】からできるようになっています。ちなみに復元するときもココから行います。ただし！必ずしも復元が上手くいく保障はないので、「HTMLの編集」をするときは慎重に行うようにしましょう。

ⅲ．記事と「カスタムCSS」の保存

ﾃﾝﾌﾟﾚｰﾄ･ﾃﾞｰﾀの他にも、記事や追加したCSSのデータも失いたくないですよね。せっかくコツコツ積み上げてきたのに何かのアクシデントで失ってはブログを作る気力も失せてしまいます。なので、これらもきちんと保存するようにしましょう。

記事に関してはBloggerの【設定⇒その他⇒インポートとバックアップ】で保存できます（コメントなども保存されるのでとても便利ですよ）。しかし！これも必ずしも完璧に記録されているとは限りません。なので、記事の記録は別の場所にも保存しておくようにしましょう。


保存方法は人それぞれでもいいですが、私は「Googleドキュメント」を使っています。無料ですし大量に保存できます。ついでに追加した「カスタムCSS」のデータも保存しておくといいと思います。私は「HTMLの編集」記録なども一緒に保存しています。

目次に戻る

２．コード編集のコツ

ⅰ．CSSが反映されない !?

BloggerではHTML内で編集しなくても、外部から簡単にCSSを追加できます。CSSの追加は【カスタムCSS（テンプレート⇒カスタマイズ⇒上級者向け⇒CSSを追加）】でできます。この機能はブログを作るうえで重要になってきますので、ぜひ覚えておいてください。

さて、HTML外部からCSSを追加できるのはとても便利なのですが、CSSコードをコピペしても変更点がブログに反映されないことがあります。私はこの現象に非常に悩まされました。『コードとBloggerとの相性が悪いのか？』とも思っていましたが、コツが分かればとても簡単なことでした。


そのコツとはCSSをコピペした後に、その周辺で「半角スペースを挿入する」というものです（必ずしも半角スペースでなくてもいいのですが、一番無難なので半角スペースにしています）。コードのコピペでつまづいている人は試してみてください。

ⅱ．HTMLで編集箇所を見つけやすく

「HTMLの編集」は非常に複雑で、編集したい箇所を探すのが大変です。【ウィジェットへ移動】を使えば編集エリアを探しやすくはなるのですが、ピンポイントではないので迷ってしまいます。そこで、編集ポイントがすぐに見つかるコツを伝授です。


そのコツとは「HTMLの編集」画面内で「Ctrl と F」を同時押しすることです。こうすることで編集画面の右上に検索窓が出てきます。ここに編集したい箇所のコード（一部分だけ）をコピペして検索しましょう。該当する箇所が複数ある場合は、Enter（エンターキー）を押すたびに移動して教えてくれます。

「Ctrl+F」はコードを書き込める場所で押す

ⅲ．コードの変更点を記録する

HTMLやCSSを闇雲に編集していると、自分でもどこをどう変更しているのか分からなくなってきます。そこで便利なのが「コメントアウト」というものです。特にHTMLを編集する場合は不可欠のものだと思います。

「コメントアウト」で囲まれている箇所はブログに反映されないので、編集箇所に説明文を付け加えたいときに使います。またHTMLを編集するときに「コメントアウト」を挿入しておけば、上記（2-ⅱ）の検索窓を使って編集点を簡単に見つけられます。さらに編集前のコードを「コメントアウト」内に保存しておけるので、もし元のコードに戻したくなったときも簡単に戻せます。


※「コメントアウト」の詳しい説明は以下の記事がわかりやすかったですよ。

HTML用 ⇒「<!-- --> .. ソース中にコメントを入れる｜HTMLクイックリファレンス」
CSS用 ⇒「/* */ ..CSSソース中にコメントを入れる｜HTMLクイックリファレンス」

<補>PCでモバイル画面を確認

PCでブログを作っていると、モバイルでどう表示されているかも気になってきますよね。今ではスマホも普及しているのでそれで確認している人も多いでしょうが、実はPCでもモバイル画面を見る方法があります。


それは自分のブログアドレスの後ろに「/?m=1」を付け足して検索すればいいのです。私の場合は「https://komenikuyasai.blogspot.jp/?m=1」で見ることができます。自分のアドレス（灰色部分）は【設定⇒基本⇒公開】で確認できます。


サイズも自由に変更できるので一度お試しください（ただし全く同じものが表示されるとは限りません。参考程度にどうぞ）。

目次に戻る

３．記事作りのコツ

ⅰ．<br/>タグを消そう

Bloggerで記事を作る場合、【記事作成】画面と【ＨＴＭＬ】画面の２種類を使って書いていきます。このとき初期設定では【記事作成】画面で改行するたびに、「<br/>」というタグが【ＨＴＭＬ】画面に表示されてしまいます。

<br/>タグだらけで編集しづらいですよね。

初心者が【ＨＴＭＬ】で編集する場合はなるべく見やすくしておいたほうがいいので、この「<br/>タグ」は非表示にすることをオススメします。Bloggerでは元々このタグを消せる機能がついているので簡単に変更できます。


記事作成画面から【投稿の設定⇒オプション⇒改行】で「Enterキーを押して改行」を選択して「完了」を押してください。これで記事作成時のコードが見易くなりました。


※改行については以下の記事も参考になるので目を通してみてください（ただし、Bloggerでは<p>タグは使えないのでご注意を）。

⇒「BRタグは使うな! 私が「改行」を一切使わなくなった1つの理由｜ヨッセンス」

ⅱ．言葉選びの強い味方

記事を書いていて困るのは、思ったとおりの言葉が思い浮かばないときです。近い言葉は出てくるのにドンピシャな言葉が出てきてくれません。『あと少しで思いつきそうだ』と思いながら長い時間考え続けるのは面倒ですね。


そこで、そんな時に手助けをしてくれる道具を紹介したいと思います。その名も「シソーラス（類語辞典）」です。これにある言葉を入力して「類語検索」すれば、その言葉と似通った意味の言葉を探し出してくれます。また「対義語（反対語）検索」もできるので記事作りには欠かせないものだと思います。

ⅲ．記事の文字数を確認する

記事を書いていると『一体いま何文字書いているのだろう？』と疑問に思う人もいることでしょう。Bloggerの機能には文字数をカウントするものがないので、別で用意しなければいけません。文字数をカウントできるソフトはいろいろあるでしょうが、私がオススメするのは「Googleドキュメント」です。


上記（1-ⅲ）でも「記事やカスタムCSS」を保存する目的で紹介しましたね。このソフトの記事内に文章をコピペして、【ツール⇒文字カウント】で文字数がわかります。記事の一部分だけマウス（タッチパッド）で選択すれば、その範囲だけの文字数も教えてくれます。無料なのでぜひ使ってみてください。

目次に戻る

あとがき

今回は初回なのでブログを作るに当たって欠かせない「要注意事項」や、知っておくと便利な「コツ」を紹介しました。私はこの程度の知識もなかったので何度も失敗を繰り返し、ブログも一つ潰してしまいました（汗）。


おかげでこういった記事も書けるようになったので、良い経験だったと今では思っています。ストレスも多かったけど、最近では楽しみながらブログを作れるようになりました。


※次は実際にHTMLやCSSを編集して、本格的にブログを作る方法を紹介していきますよ。ぜひそちらも参考にしてください♪

⇒「文字・見出し・引用のデザインを変えよう - Blogger（ブログの作り方02）」