GoogleAsSenceも設置できる！Bloggerでオリジナルホームページを作ろう

はじめに：Bloggerで始めるホームページ作り

※ただいまコンテンツ整理中！

Bloggerは、Googleが提供している無料のブログサービスです。難しい知識がなくても、手軽にホームページやブログを始めることができます。すでにいくつかの記事を読まれているようなので、基本的なことはご存知かもしれませんね。

今回は、さらにステップアップして、オリジナルテーマの作成やSEO対策について詳しく見ていきましょう。

なぜBloggerでオリジナルテーマ？

Bloggerの標準テーマでも十分に素敵なホームページは作れますが、オリジナルテーマにすることで、他の人とは違う、あなただけの個性を表現できます。デザインにこだわったり、特定の機能を追加したりすることも可能です。

いま見てているこのサイトもBloggerで作っているんです。

この記事の目次

  1. 準備編: Bloggerの基本設定とホームページの構成を考えよう

  2. デザイン編: オリジナルテーマに挑戦！HTMLとCSSの基本

  3. SEO対策編: 検索上位表示を目指す！初心者でもできるSEO

  4. ステップアップ編: さらに魅力的なホームページにするために

1. 準備編：Bloggerの基本設定とホームページの構成を考えよう

まずは、Bloggerの基本設定を確認し、どんなホームページにしたいかのイメージを具体的にしていきましょう。

Bloggerの基本設定

もし、まだBloggerのアカウントを持っていない場合は、Bloggerの公式サイトにアクセスして、アカウントを作成しましょう。Googleアカウントがあればすぐに始められます。

ブログのタイトルやURL（アドレス）は、後からでも変更できますが、ホームページの内容をよく考えてから決めるのがおすすめです。

ホームページの構成を考えよう

どんな情報を発信したいですか？自己紹介、趣味の紹介、作品の展示、お店の紹介など、目的によってホームページの構成は変わってきます。

  • トップページ: 訪問者が最初に目にするページです。ホームページの顔となるように、魅力的なデザインと分かりやすいナビゲーションを心がけましょう。

  • 個別ページ: 伝えたい情報ごとにページを作成します。例えば、自己紹介ページ、作品紹介ページ、お問い合わせページなどです。

  • ブログ: 最新の情報を発信するのに適しています。日記のように気軽に書けるので、訪問者を飽きさせないコンテンツとして活用できます。

ちょっとコラム：ホームページは「おうち」のようなもの

ホームページは、インターネット上におけるあなたやお店の「おうち」のようなものです。誰かに見てもらいたい、知ってもらいたい情報を整理して、居心地の良い空間を作りましょう。どんな「おうち」にしたいか、ワクワクしながら想像してみてください。

2. デザイン編：オリジナルテーマに挑戦！HTMLとCSSの基本

ここからが本番！Bloggerのテーマをカスタマイズして、オリジナルのデザインに挑戦してみましょう。難しそうに感じるかもしれませんが、基本を覚えれば意外と簡単です。

テーマの編集画面を開く


Bloggerの管理画面から「テーマ」→「カスタマイズ」→「HTMLを編集」をクリックすると、テーマのHTMLとCSSを編集できる画面が開きます。ちょっと専門的に見えますが、大丈夫です。一つずつ見ていきましょう。

HTMLとCSSって何？

  • HTML（エイチティーエムエル）: ホームページの骨組みを作るための言語です。文章や画像などの要素をどのように配置するかを決めます。例えるなら、家の柱や壁のようなものです。

  • CSS（シーエスエス）: ホームページの見た目を装飾するための言語です。文字の色や大きさ、背景、配置などを細かく設定できます。例えるなら、家の壁の色や家具のようなものです。

簡単なカスタマイズ例

まずは、簡単なカスタマイズから試してみましょう。

  1. 背景色を変えてみよう:

    • HTML編集画面で、<b:skin>と</b:skin>というタグで囲まれた部分を探します。

    • その中に、body { という記述があるはずです。

    • body { の中に、background-color: #ffffff; （これは背景が白色という意味です）のような記述を探します。

    • #ffffff の部分を、好きな色のカラーコード（例：#f0f0f0 は薄い灰色）に書き換えて、「テーマを保存」をクリックします。

    • ホームページを見て、背景色が変わっているか確認してみましょう。

カラーコードが分からない時は？

「カラーピッカー」と検索すると、Web上で簡単にカラーコードを見つけられるツールがたくさんあります。

  1. 文字の色を変えてみよう:

    • 同じように、<b:skin>と</b:skin>で囲まれた部分を探します。

    • body { の中に、color: #333333; （これは文字色が濃い灰色という意味です）のような記述を探します。

    • #333333 の部分を、好きな色のカラーコードに書き換えて保存します。

ちょっとコラム：フォントにもこだわってみよう

文字の色だけでなく、フォント（書体）もホームページの印象を大きく左右します。Googleフォントなどのサービスを利用すると、おしゃれなフォントを簡単に追加できます。興味があれば、「Blogger フォント 追加」で検索してみてください。

オリジナルテーマを作るには？

本格的なオリジナルテーマを作るには、HTMLとCSSの知識がさらに必要になります。まずは、既存のテーマをベースに少しずつカスタマイズしていくのがおすすめです。

  • 参考になるサイト:

    • Bloggerの公式ヘルプ：Blogger ヘルプ

    • Bloggerのテーマを配布しているサイト：たくさんありますので、「Blogger テンプレート 無料」などで検索してみてください。気に入ったテーマを見つけて、それをベースに改造していくのも良い方法です。

オリジナルテーマを作る前の基礎知識。セクション、ウィジェット、Bloggerのタグ

セクションとは？

Bloggerのテーマにおける「セクション」とは、ホームページのコンテンツを構成する大きな区画のことです。例えば、ヘッダー部分、サイドバー、メインコンテンツ部分、フッター部分などがそれぞれ独立したセクションとして扱われます。

セクションの役割:

  • 構造化: ホームページのレイアウトを論理的に整理し、管理しやすくします。

  • ウィジェットの配置場所: セクションの中にウィジェット（後述）を配置することで、様々な機能やコンテンツを追加できます。

  • スタイルの適用: セクションごとに異なるスタイル（デザイン）を適用することができます。

セクションの使い方

Bloggerのテーマ編集画面（「テーマ」→「カスタマイズ」→「HTMLを編集」）を開くと、HTMLの中に<b:section>というタグと</b:section>というタグで囲まれた部分がいくつか見つかるはずです。これがセクションの定義です。

セクションの構造:

HTML
<b:section class='セクションのクラス名' id='セクションのID' name='セクションの表示名' show='true/false'>
  </b:section>

  • class='セクションのクラス名': CSSでスタイルを適用する際に使用するクラス名です。

  • id='セクションのID': セクションを特定するための一意なIDです。JavaScriptなどで操作する場合に使われることがあります。

  • name='セクションの表示名': Bloggerのレイアウト画面で表示されるセクションの名前です。分かりやすい名前をつけておくと管理が楽になります。

  • show='true/false': このセクションを表示するかどうかを設定します。false にすると、レイアウト画面には表示されますが、実際のホームページには表示されません。

セクションを編集する:

基本的には、HTML編集画面で直接<b:section>タグを編集することは少ないかもしれません。主に、Bloggerの管理画面の「レイアウト」でセクションの表示順序を変更したり、セクション内にウィジェットを追加・削除したりする操作が中心となります。

ちょっとしたテクニック: HTML編集に慣れてきたら、<b:section>タグをコピー＆ペーストすることで、既存のセクションを複製したり、新しいセクションを自分で作成したりすることも可能です。ただし、誤ってテーマを壊してしまう可能性もあるので、バックアップを取ってから試すようにしてください。

ウィジェットとは？（ガジェット）

Bloggerにおける「ウィジェット」とは、ホームページに様々な機能やコンテンツを追加するためのパーツのことです。以前は「ガジェット」と呼ばれていました。

ウィジェットの例:

  • ブログアーカイブ: 過去の記事を月ごとに表示する

  • ラベル: 記事を分類するためのラベル一覧を表示する

  • 検索ボックス: ホームページ内を検索できる機能

  • 画像: 画像を表示する

  • テキスト: 自由なテキストやHTMLコードを表示する

  • フォローボタン: SNSなどのフォローボタンを表示する

  • AdSense: 広告を表示する

ウィジェットの使い方

ウィジェットは、Bloggerの管理画面の「レイアウト」から簡単に追加・編集・削除、そして配置の変更ができます。

  1. ウィジェットの追加: レイアウト画面で、ウィジェットを追加したいセクションの「ガジェットを追加」をクリックします。

  2. ウィジェットの選択: ポップアップ表示されるウィジェットの一覧から、追加したいウィジェットを選択します。

  3. ウィジェットの設定: ウィジェットによっては、タイトルや表示する内容などを設定する画面が表示されます。必要事項を入力して「保存」をクリックします。

  4. ウィジェットの配置変更: レイアウト画面で、追加したウィジェットをドラッグ＆ドロップすることで、セクション内の表示順序を変更できます。セクションをまたいでウィジェットを移動することも可能です（一部制限があります）。

  5. ウィジェットの編集・削除: レイアウト画面で、編集したいウィジェットの右下にある鉛筆アイコンをクリックすると編集画面が開きます。削除したい場合は、同じく右下にある「削除」をクリックします。

ちょっとコラム：便利なウィジェットを活用しよう

Bloggerには標準でたくさんの便利なウィジェットが用意されています。これらを効果的に活用することで、プロのようなホームページを比較的簡単に作ることができます。どんなウィジェットがあるか、色々試してみるのがおすすめです。

Bloggerのタグ

BloggerのテーマのHTMLコードの中には、通常のHTMLタグに加えて、<b:>で始まるBlogger独自のタグが使われています。これらのタグは、Bloggerのシステムと連携して、ブログのタイトル、記事の内容、ウィジェットなどを動的に表示するために重要な役割を果たします。

主なBloggerのタグ:

  • <b:section>: 前述のセクションを定義するタグです。

  • <b:widget>: ウィジェットを配置するためのタグです。

  • <b:if> / <b:else> / <b:elseif>: 条件分岐を行うためのタグです。特定の条件下でのみコンテンツを表示させたい場合などに使用します。例： <b:if cond='data:blog.pageType == "item"'> （記事ページの場合のみ表示）。

  • <b:loop>: データのリストを繰り返し表示するためのタグです。例：ラベルの一覧表示などに使われます。

  • <data:blog.title>: ブログのタイトルを表示します。

  • <data:blog.homepageUrl>: ブログのトップページのURLを表示します。

  • <data:post.title>: 現在表示している記事のタイトルを表示します。

  • <data:post.body>: 現在表示している記事の本文を表示します。

  • <data:post.url>: 現在表示している記事のURLを表示します。

  • <data:widgets>: セクションに配置されたウィジェットを表示するためのタグです。

  • <b:include data='ウィジェットのID' name='ウィジェットの種類'/>: 特定のウィジェットを直接HTMLコードの中に埋め込む際に使用します。

Bloggerタグを理解するメリット:

  • より高度なカスタマイズ: Bloggerタグを理解することで、HTML編集画面でより自由度の高いテーマカスタマイズが可能になります。

  • テーマの構造把握: テーマのHTMLコードがどのように構成されているかを理解しやすくなります。

  • 問題解決: テーマに不具合が発生した場合、原因を特定しやすくなります。

ちょっとコラム：Bloggerタグは便利なパーツ

Bloggerタグは、例えるならホームページに動きや情報を与えるための「パーツ」のようなものです。最初は難しく感じるかもしれませんが、少しずつ覚えていくことで、あなたのホームページはどんどん魅力的になっていきます。

セクション、ウィジェット、Bloggerタグの関係性

  • セクションは「箱」、ウィジェットは「箱の中に入れるもの」: セクションはホームページのレイアウトにおける区画であり、ウィジェットはそのセクションの中に配置して機能やコンテンツを追加する役割を持ちます。

  • Bloggerタグは「指示書」: Bloggerタグは、Bloggerのシステムに対して「ここにブログのタイトルを表示して」「このウィジェットを表示して」といった指示を出すためのものです。

オリジナルテーマ作成への応用

これらの要素を理解することで、以下のようなことが可能になります。

  • 独自のレイアウト: 複数のセクションを組み合わせて、自由なレイアウトを作成する。

  • 特定の機能の追加: 必要なウィジェットを追加し、配置を調整することで、ホームページに必要な機能を追加する。

  • 動的なコンテンツ表示: Bloggerタグを使って、ブログの情報を自動的に表示させる。

例：サイドバーに独自のコンテンツを表示したい場合

  1. 「レイアウト」画面で、サイドバーにテキストウィジェットを追加します。

  2. テキストウィジェットの設定画面で、表示したいテキストやHTMLコードを入力します。

  3. 「保存」をクリックすると、サイドバーに独自のコンテンツが表示されます。

例：フッターに著作権情報を表示したい場合

  1. テーマのHTML編集画面を開き、フッター部分の<b:section>を見つけます。

  2. そのセクションの中に、著作権情報を記述したHTMLコード（例：<p>© 2025 Your Website Name. All Rights Reserved.</p>）を直接記述します。

  3. 必要に応じて、CSSでスタイルを調整します。

3. SEO対策編：検索上位表示を目指す！初心者でもできるSEO

せっかく作ったホームページ、たくさんの人に見てもらいたいですよね！そのためには、SEO（Search Engine Optimization：検索エンジン最適化）がとても重要になります。難しそうに聞こえるかもしれませんが、初心者でもできる基本的なSEO対策をいくつかご紹介します。

SEOって何？

SEOとは、Googleなどの検索エンジンの検索結果で、自分のホームページがより上位に表示されるように行う対策のことです。上位表示されるほど、たくさんの人の目に触れる機会が増えます。

初心者でもできる基本的なSEO対策

  1. キーワードを意識したタイトルと見出し:

    • ページの内容を表すキーワードを、タイトルや見出し（<h1>, <h2> タグなど）に入れるようにしましょう。

    • 例えば、旅行に関するブログなら、「旅行 おすすめスポット」「海外旅行 費用」のようなキーワードを盛り込むと良いでしょう。

    • ただし、キーワードを詰め込みすぎると不自然になるので、自然な文章になるように心がけてください。

  2. 分かりやすいURL:

    • Bloggerでは、記事の投稿画面でURLをカスタマイズできます。

    • 内容が分かりやすいように、日本語ではなく英数字で、キーワードを含んだURLにするとSEOに効果的です。

    • 例：「新しいブログを始めました」という記事なら、new-blog-started のようにします。

  3. 質の高いコンテンツ:

    • 最も重要なのは、訪問者にとって価値のある、質の高いコンテンツを作成することです。

    • 独自の情報や体験談を交えたり、分かりやすい言葉で丁寧に説明したりすることを心がけましょう。

    • 内容が薄いページは、検索エンジンからの評価も低くなります。

  4. 内部リンクと外部リンク:

    • 内部リンク: 自分のホームページ内の他のページへのリンクを貼ることで、訪問者の回遊性を高め、SEOの効果も期待できます。関連性の高い記事があれば積極的にリンクしましょう。

    • 外部リンク: 信頼できる他のホームページへのリンクも、情報源として役立ち、SEOに良い影響を与えることがあります。

  5. 画像にalt属性を設定する:

    • ホームページに画像を掲載する際は、<img src="画像ファイル名" alt="画像の説明"> のように、alt属性に画像の内容を説明するテキストを入力しましょう。

    • これは、検索エンジンが画像の内容を理解するのに役立ちます。

  6. モバイルフレンドリーなデザイン:

    • 最近では、スマートフォンでホームページを見る人が చాలా多いです。Bloggerのレスポンシブデザイン（画面サイズに合わせて表示が変わるデザイン）のテーマを選んだり、モバイル表示を確認したりすることが大切です。

ちょっとコラム：SEOはすぐに効果が出るものではない

SEO対策は、すぐに効果が出るものではありません。コツコツと続けていくことが大切です。焦らず、訪問者のために良いコンテンツを作り続けることを意識しましょう。

BloggerのSEO設定

Bloggerには、SEOに役立ついくつかの設定項目があります。

  • メタディスクリプション: 各記事の概要を説明する短い文章です。検索結果にタイトルの下に表示されることが多く、クリック率に影響します。「設定」→「メタディスクリプション」で設定できます。各記事の内容を簡潔にまとめ、魅力的な文章を作成しましょう。

  • カスタムrobots.txt: 検索エンジンのクローラー（ホームページの情報を収集するロボット）に対して、どのページをクロールしてほしいか、どのページを無視してほしいかを指示するファイルです。通常はBloggerが自動的に設定してくれるので、特別な理由がない限り変更する必要はありません。

  • カスタムrobotsヘッダータグ: 各ページごとに、検索エンジンへの指示を細かく設定できます。これも基本的にはデフォルトのままで問題ありません。

4. ステップアップ編：さらに魅力的なホームページにするために

基本をマスターしたら、さらにホームページを魅力的にするためのステップアップに挑戦してみましょう。

Googleアナリティクスの導入

Googleアナリティクスを導入すると、ホームページへの訪問者数や、どのページがよく見られているかなどのアクセス状況を詳しく分析できます。分析結果を元に、コンテンツの改善やSEO対策に役立てることができます。「Blogger Googleアナリティクス 設定」で検索して、設定方法を調べてみてください。

読者との交流を大切に

ブログ機能を使って、定期的に記事を更新したり、コメント欄で読者と交流したりすることで、ホームページが活性化します。読者の意見を参考に、コンテンツを改善していくのも良いでしょう。

他のSNSとの連携

TwitterやInstagramなどのSNSを活用して、ホームページへのアクセスを増やすのも効果的です。Bloggerには、SNSとの連携機能も用意されています。

ちょっとコラム：成功しているホームページを参考にしよう

色々なホームページを見て、デザインやコンテンツ、構成などを参考にしてみましょう。自分が良いと思った要素を取り入れて、自分のホームページに取り入れてみるのも良い方法です。ただし、完全にコピーするのはNGですよ！

５ 実践編：実際にオリジナルのテーマを作ってみよう。

それでは実際に、オリジナルのテーマを作ってみましょう、
管理画面から、テーマ→カスタマイズ右側の▼→HTMLを編集と進みます。

　（作成中）

まとめ：あなただけの素敵なホームページを作ろう！

今回は、Bloggerを使ったホームページ作成とオリジナルテーマの作成、そしてSEO対策について解説しました。少し難しいと感じた部分もあったかもしれませんが、一つずつ丁寧に実践していけば、必ず素敵なホームページを作ることができます。

ホームページ作りは、試行錯誤の連続です。色々な情報を参考にしながら、あなたらしいオリジナルのホームページを育てていきましょう！