Google blogger の始め方、見出し装飾、スマホサイズも忘れずに

Google Blog
Google

きょうは Google blogger ブロガーについて学びます。

Google Blogger はレンタルサーバーなし、すべて Google が引き受けてくれて、ユーザーはブログを書くだけで面倒な設定もありません。閲覧スピードも速く、画像の挿入も簡単で、なによりも「広告」が入らない、日本で唯一のブログサービスです。

ただし、それが「そっけない」といわれることがあります。見出しもその一つで、何もしないとただのマークにすぎません。

夕方に仕事を終え、地上に戻ってくる炭鉱夫たちのようになりたいものですね?

きょうはあなたと、Blogger の見出しの装飾について学習します。

1.Blogger の見出しの飾りには、2つ方法がある

見出し
見出し

このページを見たとき、目はときどき細くなり、また大きくなったのではないでしょうか。写真家がレンズの絞りを調整するときのように。

Bloggerの見出しの飾りには、実は2つ方法があるんやで。

デフォルトのテンプレートを使う方法
  • Bloggerには元々いろんなテンプレートが用意されとるから、その中から好きなん選んで見出しを飾れるんや。テンプレートをカスタマイズすることもできるで。
HTMLやCSSを使う方法
  • 自分でHTMLやCSSを編集して、オリジナルのデザインを作ることもできるんや。これやったら、見出しを自分好みにアレンジできるから、めっちゃ自由やで。

以上の2つの方法で、Bloggerの見出しを飾ることができるんや。どっちの方法もええ感じやから、自分のスタイルに合う方を試してみてな!

「制度を知って利用しょう!介護保険の問題点」の見出しは「h2」です。釘を使ってレンガに刻んだような字ですね。味わいもなにもないといえなくもありません。このままではフォントが大きいだけで目立たないというか、「飾り」が欲しいですね。

h1~標準
h1~標準

1.Blogger の見出しの使い方、1つ目

ちなみに、「主見出し」が「h1」で、見出し」は「h2」、「小見出し」は「h3」、「準見出し」は「h4」です。h1 は1つだけですが、h2 は数カ所、小見出しは10カ所、準見出しは多数使用しています。blogger はタイトルと小見出しが兼用されています。

文字の大きさも大~小になっていきます。

飾りには「色」がつきものです。色を変えるには「#〇〇〇〇〇〇」と数字で表されます。その表示方法には、Adobe の色測定を使います。

  1. このページだけの「h2」を変える。
  2. すべてのページの「h2」を変える。

いま、左上鉛筆「作成ビュー」をクリックすると、「<>HTMLビュー」が表示されますから、それをクリックします。

すると、以下のような膨大な語句があらわれます。ここでまず面食らうのですが、「制度を知って利用しょう!介護保険の問題点」を探します。「込み入って見ずらい」と思う方は「三本線」のアイコンをクリックしてください。間隔がきちんと整理された表示になります。

込み入って見ずらいのでアイコンをクリックします

head に近いところにあります。<h2 style><…white;というのが見えるかと思います。つまり背景が「白」になっているのですね。これを red にかえてみると次のように変わります。

red (赤)に変わりました
red (赤)に変わりました

このページだけを変えたい場合は、この HTML にしてから [red] とするだけでいいのですが、見出しはどのページにもありますから、できれば統一した「装飾」をほどこしたいですよね?その方が見た目もいいし、とにかくいちいち HTML ページに書き込む必要がなくなりますからね。

2.Blogger の見出しの使い方、2つ目は「テーマ」から変更

カスタマイズ
カスタマイズ

テーマから「カスタマイズ▼」をクリックし、「HTML を編集」をクリックします。

すると、HTML がでてきます。あまりにもギッシリ書かれているので、どこに何があるのかわからないほどです。横にある「三本横線」をクリックすると普通の HTML で表示されます。

そこで、「Ctrl + F」キーを押してください。右上にボックスが現れるので、そこへ「h2」または「h2.」と入力すると、「h2」に赤色がついて表示されます。ちなみに、「F」は、Find(みつける)。意味も知っておくと覚えやすいです。

h2 を探す
h2 を探す

ここには、サルワカさんの HP から以下を選んであります。コードを表示をクリックします。

美しい見出しのデザイン
美しい見出しのデザイン

以下のコードを参考に、h1 を h2 に、font-size:26px; を加えました。

それが以下です。

制度を知って利用しょう
制度を知って利用しょう

h2 が記事の日付になっているのでこれを外したいですね。h2タグをh4とかにしたいですが、とりあえず<h2></h2> を見つけて <div></div> に変更します。「h3」を変更する場合も、「h3」と入力すると赤と黄色で表示されます。なお、「$」の記号が多用されていますが、これは「同じですよ」という意味のようです。ですからこの記号があれば、その先の「根本」を見つけて変更して下さい。

(#009900)に変更
(#009900)に変更

一番最後に.color とありますがこれはフォントの色を表します。#009900(緑色)に変更します。

緑色に変更されました

3.ブログの行の間隔を広げる

Google Blogger で行間隔を広げるためには、カスタムCSSを使う方法があります。以下の手順に従ってください。

1.ブログのダッシュボードにアクセス
  1. Google Blogger にログインします。
  2. ブログのダッシュボードにアクセスします。
2.テーマのカスタマイズ
  1. 左側のメニューから「テーマ」を選択します。
  2. 右上にある「カスタマイズ」ボタンをクリックします。
3.CSSを追加
  1. カスタマイズ画面で、左側のメニューから「高度な設定」を選択します。
  2. 下にスクロールして「追加CSS」を選択します。
  3. 以下のCSSコードを入力します:

line-heightの値を変更することで、行間隔を調整できます。例えば、1.52.0などに設定することができます。

4.変更を保存
  1. 適用」または「保存」ボタンをクリックして、変更を保存します。

これで、ブログの行間隔が広がります。特定の要素の行間隔を調整したい場合は、該当する要素(例:ph1など)に対してCSSを適用します。

この方法を使うことで、Google Bloggerの行間隔を簡単に調整することができます。

「.post-body」の「line-height」がデフォルトでは「1.4」になっています。このままでは英語ならともかく日本語では少し込み入って読みにくいと思います。1.4は文字の高さの1.4倍ということなので、広げるには1.8とか2にします。

ブラウザの検索機能で「line-height」を検索します。

line-height
line-height

わたしは「line-height:2.0;」と入力しました。

2.Blogger をスマホサイズにするには

スマホサイズ
スマホサイズ

1.スマホで Blogger を閲覧するには

デスクトップの大きさでは文字が小さくなります。とにかくなにもかも小さくなるので見にくくなります。小さくても拡大させればともいえますができるだけ閲覧者の負担をなくす方がいいと思います。

テーマ・モバイルテーマを選択
テーマ・モバイルテーマを選択

デフォルトでは「デスクトップ」にチェックが入っているので、「モバイル」に変更します。この「モバイル」を忘れていると Google から

  • テキストが小さすぎて読めません
  • クリック可能な要素同士が近すぎます
  • ビューポートが「デバイスの幅」に収まるよう設定されていません

などの「忠告」が入ります。そこで「テーマ」→「モバイルテーマ」を選択し、ラジオボタンをモバイルの方にチェックを入れておくのも忘れないように。

・タイトル:<h1>タグ
・見出し:<h2>タグ
・リード文:<description>
・写真:<alt>タグ

それぞれタグを指定することによって、検索ロボットはブログを評価します。タグの指定がきちんと記述されているブログは上位表示されやすいのです。

見出しのデザインや色を変えるとブログの見栄えが変わります。CSSのコピペで簡単にできます。見出しをカスタマイズするだけでブログを書くモチベーションも上がりますね。

2.Blogger の文字を大きくするには

個別のページなら「投稿」からメニューバーの「フォントサイズ」を選ぶだけですが、過去の投稿すべてのフォントを変更するには、「テーマ」を選び、赤い「カスタマイズ」をクリックします。

カスタマイズ
カスタマイズ

「詳細設定」から「フォント」の数字を変えます。デフォルト(最初の設定)では「12px」になっていると思います。スマホサイズで「モバイル」を選択してあれば、これでも問題ないのですが、私は「18px」に拡大しました。

3.Google などの検索エンジンで上位表示を狙うには

検索向け説明

1.検索エンジンのリストに Blogger ブログを追加する

検索エンジンのリストにブログを追加することは、ブログの可視性を向上させるために役立つ場合があります。

利点

  1. 検索エンジンに登録することで、ブログのページが検索結果に表示される可能性が高まります。これにより、新しい読者や訪問者を獲得するチャンスが広がります。
  2. 検索エンジンのクローラーがブログを定期的にインデックスすることで、新しいコンテンツや更新情報が早く検出されるようになります。
  3. ブログが検索エンジンのインデックスに含まれることで、他のウェブサイトからのリンクやソーシャルメディアのシェアによるトラフィックも増加する可能性があります。

手順

  1. Google Search ConsoleやBing Webmaster Toolsなど、主要な検索エンジンが提供しているウェブマスターツールを使用して、ブログを登録します。
  2. ツールの指示に従って、ブログのURLやその他の必要な情報を提供します。必要に応じて、サイトマップを提出することもできます。
  3. 登録が完了したら、検索エンジンのクローラーがブログを訪れてインデックスするのを待ちます。これには時間がかかる場合があります。

ただし、現在の検索エンジンの技術は非常に進化しており、一般的にはブログのURLが他のウェブサイトからリンクされている場合、自然に検索エンジンにインデックスされることがあります。そのため、すでに他のサイトからのリンクやソーシャルメディアのシェアを通じてブログの可視性が高い場合、手動で検索エンジンに登録する必要性は低いかもしれません。

検索エンジンへの登録は、ブログの可視性を高めるための重要な一手段ですが、それだけでなく、他のマーケティング手法やSEO(検索エンジン最適化)の戦略も併せて検討することをおすすめします。ソーシャルメディアの活用や他のウェブサイトへのリンクの取得など、他の方法もブログの成長に貢献します。

また、検索エンジン以外にも、他の方法でブログの可視性を高めることも重要です。例えば、ソーシャルメディアでの宣伝や共有、他の関連ブログとの連携、SEO(検索エンジン最適化)の手法の適用などがあります。

最終的な判断は、ブログの目標や現在の状況によって異なるいます。検索エンジンのリストにブログを追加することはおすすめです。以下にその理由と手順を説明します。

利点

可視性の向上
  • 検索エンジンに登録することで、ブログのページが検索結果に表示される可能性が高まります。これにより、より多くの人々がブログを見つけて訪れることができます。
トラフィックの増加
  • 検索エンジンからのトラフィックは、ブログの成長や収益化のために重要です。検索エンジンに登録することで、新しい読者や訪問者を獲得する機会が広がります。
インデックスの迅速化
  • 検索エンジンのクローラーがブログを定期的にインデックスすることで、新しいコンテンツや更新情報が早く検出されるようになります。

2.Blogger のサイト全体でキーワードを使用する

taka
taka

キーワードは、サイト全体で使用することが重要です。

キーワードは、検索エンジンのランキングに影響を与える要素の一つです。適切なキーワードをサイトのコンテンツに組み込むことで、検索エンジンがサイトを正しく理解し、関連する検索クエリに対して表示される可能性が高まります。

キーワードをサイト全体で使用することによって、サイトのテーマやコンテンツの一貫性が向上します。この一貫性は、検索エンジンがサイトを評価する際に重要な要素となります。ただし、キーワードの使用には過度になりすぎないように注意する必要があります。キーワードの過剰な使用は、検索エンジンにスパム行為と見なされる可能性があり、逆にランキングを低下させる結果となる場合もあります。

キーワードを適切に使用するためには

自然な文章に組み込む
  • キーワードを無理なく自然な文章に組み込むことが重要です。読み手にとっても意味のある文章を作り、キーワードの過剰な密集を避けるようにしましょう。
ページの主要な要素に配置する
  • キーワードをタイトル、見出し、メタディスクリプション、およびコンテンツの重要な箇所に配置することが効果的です。ただし、強制的なキーワードの挿入は避け、自然な流れを保つようにしましょう。
複数の関連キーワードを使用する
  • 単一のキーワードだけでなく、関連キーワードやシノニムを使用することも重要です。これにより、検索エンジンはサイトの内容をより正確に把握し、幅広い検索クエリに対してサイトを表示することができます。
ユーザーエクスペリエンスを重視する
  • キーワードの使用は検索エンジンの最適化だけでなく、ユーザーエクスペリエンスも考慮する必要があります。読みやすく、有用なコンテンツを提供することが重要です。

総合的に言えば、キーワードをサイト全体で使用することは重要ですが、それを自然な形で行うことが求められます。キーワードの使用は、検索エンジン最適化(SEO)の一環として考えるべきであり、サイトの内容やユーザーエクスペリエンスを優先することが重要です。

mika
mika

むやみやたらに「キーワード」を入れればいいってわけではないのね。

3.検索結果での投稿やページのランキングを上げるには

taka
taka

検索結果での投稿やページのランキングを上げるためには

高品質なコンテンツを提供する
  • 検索エンジンは、ユーザーが価値ある情報を見つけられるサイトを好みます。独自かつ質の高いコンテンツを提供することが重要です。情報量が豊富で、読者の問題やニーズに対する解決策を提供するようなコンテンツを作成しましょう。
キーワードの適切な使用
  • サイト内のコンテンツに関連するキーワードを適切に使用しましょう。タイトル、見出し、メタディスクリプション、および本文でキーワードを自然な形で組み込みます。ただし、過剰なキーワードの使用やスパム行為は避けるようにしましょう。
メタデータの最適化
  • メタタグやメタディスクリプションを最適化して、検索エンジンに正確な情報を提供しましょう。これによって、検索結果の表示が改善され、クリック率が向上する可能性があります。
内部リンクの設定
  • サイト内の関連するコンテンツを適切にリンクすることで、ユーザーエクスペリエンスを向上させるだけでなく、検索エンジンがサイトの構造を理解しやすくなります。内部リンクには適切なアンカーテキストを使用し、重要なページに対してリンクを設定するようにしましょう。過剰なリンクは読者を混乱させたり、ページの読みやすさを損なったりする可能性があります。バランスが重要です。一般的には、1000ワードの記事に対して5〜10個程度のリンクが適切とされています。
外部からのリンクを獲得する
  • 高品質な他サイトからのリンク(バックリンク)を獲得することも重要です。他の信頼性の高いサイトからのリンクは、検索エンジンにとってサイトの信頼性や重要性の指標となります。バックリンクを増やすためには、優れたコンテンツを提供し、業界の専門家や influencers にアプローチして共有を促すことが有効です。他の信頼性の高いサイトへのリンク。信頼性を高め、読者に追加のリソースを提供します。
モバイルフレンドリーなサイトにする
  • モバイルデバイスでの利用が増えているため、モバイルフレンドリーなサイトを作成することは重要です。レスポンシブデザインを採用し、モバイルデバイスでの閲覧体験を最適化しましょう。
サイトの読み込み速度を最適化する
  • サイトの読み込み速度が速いこともランキングに影響を与えます。画像やスクリプトの最適化、キャッシュの活用、ホスティングサーバーの選定など、読み込み速度を向上させるための対策を行いましょう。
ソーシャルメディアでのシェアを促す
  • ソーシャルメディアでのシェアやコメントを促すことで、サイトの露出や認知度を向上させることができます。良質なコンテンツを提供し、ソーシャルメディアのシェアボタンを設置するなどの対策を取りましょう。
サイトのセキュリティを強化する
  • HTTPSプロトコルを使用し、SSL証明書を取得してサイトのセキュリティを強化しましょう。検索エンジンはセキュアなサイトを好みます。

これらの要素を総合的に考慮しながら、サイトの品質とユーザーエクスペリエンスを向上させることが重要です。ただし、検索エンジンのアルゴリズムは定期的に変更されるため、常に最新のトレンドやベストプラクティスに対応するように注意してください。長い記事の場合は、必要に応じてリンクの数を増やしても構いません。例えば、3000ワードの記事なら10〜20個のリンクが適切なこともあります。

「検索向け説明」の入力も忘れないでください。150文字以内です。これを記入することによって、Google 検索文字の下に表示されます。重要な要素です。

いちばん現実的で確実な方法は、Google に「検索キーワード」を入力して、表示されたベスト10の「メタ情報」「h1 h2」をそれぞれエクセル一覧表に貼り付けて、よく吟味することでしょう。

4.画像を検索可能にしたり、アクセスできるようにするには

適切なファイル名を使用する
  • 画像ファイル名には、その画像の内容やテーマに関連するキーワードを含めるようにしましょう。また、キーワード同士はハイフンやアンダースコアで区切ると良いです。
alt属性を使用する
  • 画像が読み込まれなかった場合やテキストベースのブラウザを使用している場合に代替テキストとして表示されます。alt属性には、画像の内容を短く説明するテキストを記述しましょう。キーワードを使用して自然な形で記述することが望ましいですが、キーワードスタッフィングは避けましょう。
画像のキャプションを利用する
  • 画像の周りにキャプションを追加することで、画像の内容や関連する情報を提供できます。キャプションには、画像の説明やキーワードを含めることができます。キャプションは検索エンジンにとって重要な情報源となる場合があります。
イメージサイトマップを作成する
  • イメージサイトマップは、サイト内のすべての画像を検索エンジンに通知するためのXMLファイルです。画像のURL、キャプション、説明などの情報を含め、検索エンジンに正確な画像情報を提供します。
ユーザビリティとパフォーマンスを向上させる
  • 画像のサイズを最適化し、高速な読み込みを実現するために圧縮することが重要です。また、適切なキャッシュ制御やCDN(コンテンツデリバリーネットワーク)の活用など、ユーザビリティとパフォーマンスを向上させる対策を取りましょう。
バックリンクの獲得
  • 他のウェブサイトからのバックリンクは、画像へのアクセス性と関連性を向上させるのに役立ちます。他のサイトやソーシャルメディアで画像の共有を促し、バックリンクを獲得することで画像へのアクセス性を高めることができます。
Google画像検索用のメタデータを追加する
  • Google画像検索で画像が表示されるようにするためには、Googleが提供するメタデータを追加することが重要です。Googleの「画像付き検索エンジン最適化ガイドライン」に従って、適切なメタデータを画像に追加しましょう。

これらの手法を組み合わせて実践することで、画像を検索可能にし、ユーザーがアクセスできるようにすることができます。

mika
mika

ただし、画像の内容や利用目的に応じて、適切な画像の最適化と検索エンジン最適化を行うことが重要です。

4.Blogger でやっておきたい6つの初期設定

初期設定
初期設定
taka
taka

「ブロガー」を始めたとしてついおざなりになりがちなのが初期設定です。

初期設定しなくてもブログを書けば表示されますが、それだけなら上位表示は難しくなります。さまざまな「設定」があります。

1.Blogger で特に心がけたい6項目

Google Bloggerを使ってブログを開設する場合、以下の初期設定を行っておくと良いでしょう。

1.プロフィール設定
  • 読者からの信頼度を高めることができます。設定画面から、自己紹介やプロフィール画像を設定しましょう。
2.テンプレート設定
  • 自分の好みに合わせて微調整することができます。設定画面から、テンプレートの変更やレイアウトの調整を行いましょう。
3.カスタムドメイン設定
  • 独自ドメインを取得して、ブログのアドレスを変更することで、読者からの信頼度を高めることができます。設定画面から、カスタムドメインの設定を行いましょう。
4.記事の投稿設定
  • タイトルや本文、カテゴリー、タグなどを設定しましょう。また、記事の公開設定やスケジュール設定を行うこともできます。
5.モバイル設定
  • スマホやタブレットからも快適に閲覧できるように、モバイルテンプレートの設定を行いましょう。
6.Google Analyticsの設定
  • アクセス解析ツールであるGoogle Analyticsを使って、自分のブログのアクセス状況を把握することができます。設定画面から、Google Analyticsのトラッキングコードを設定しましょう。

以上の初期設定を行うことで、自分のブログをより使いやすく、読者にとっても分かりやすいものにすることができます。

2.独自ドメインは、オンラインプレゼンスの重要な要素の一つ

独自ドメインを取得することは、多くの場合において推奨される選択です。

ブランドの確立
  • 独自ドメインを使用することで、独自のオンラインブランドを確立することができます。例えば、あなたの企業名やウェブサイト名をドメインとして使用することで、一貫性のあるブランディングを行い、ユーザーにメモリに残る印象を与えることができます。
カスタマイズ性と柔軟性
  • 独自ドメインを使用すると、ウェブサイトのURLを自由にカスタマイズすることができます。独自ドメインを取得することで、メールアドレスやサブドメインなども独自に設定できます。これにより、ブランドの一貫性を保ちながら、自分のウェブプレゼンスをカスタマイズすることができます。
SEOの向上
  • 独自ドメインは、検索エンジン最適化(SEO)の観点からも重要です。独自ドメインを持つことで、検索エンジンはあなたのウェブサイトをより正確に理解しやすくなります。また、他のウェブサイトからのバックリンクの信頼性も向上する可能性があります。
プロフェッショナルなイメージ
  • 独自ドメインを使用することで、プロフェッショナルなイメージを与えることができます。無料のサブドメインや共有ドメインを使用する場合よりも、独自ドメインは信頼性と信憑性を高めます。特にビジネスの場合、独自ドメインは信頼性や専門性をアピールする重要な要素です。
ウェブサイトの移行と制御
  • 独自ドメインを所有している場合、ウェブサイトを別のホスティングプロバイダーやプラットフォームに移行する際にも制御が容易です。また、将来的なウェブサイトの拡張や変更にも柔軟に対応することができます。
  • 独自ドメインは、オンラインプレゼンスの重要な要素の一つであり、信頼性やブランド構築に大きく寄与します。そのため、可能であれば独自ドメインを取得することをおすすめします。
  • ただし、独自ドメインの取得には一定のコストと管理の負担が伴うことを念頭に置いてください。ドメインの選択には注意が必要であり、短く、分かりやすく、ブランドに合致したドメインを選ぶことが重要です。また、信頼性のあるドメインレジストラやホスティングプロバイダを選ぶことも重要です。

総合的に考えると、独自ドメインはオンラインプレゼンスを強化し、ブランド構築やSEOの向上に寄与することが期待できます。

あとがき

昔、「つき合ってくれない?」といった女の子のことを考えて、「返事もしなかった」自分は今になって、「あの時もっとうまくやれたのになあ」と思ったことありませんか?

僕はあります。それと同じことです。もっとうまくやれたのになぁ、と。でもあの時はあのときでベストを尽くしたっていうか、その気がなかったんですよね。

ブロガーも同じです。あのときたまたまブロガーしかなかった。単にそこにあったから書き始めたけど、あの時もっとうまくかけたのになあと思うことがあります。

コメント

何なりとお申し付けください。