ホーム / ブログノウハウ /

Blogger初心者が最初にやるべき設定（2023年版）

2023/03/14

ブログノウハウ

t f B! P L


この記事では 初心者向けに「Blogger」の使い方をまとめています

■更新履歴

・2023年3月14日…テンプレ作成

環境

Blogger ブログ
テンプレート：QooQリスト

Bloggerって何？

Google が提供する「無料ブログ」サービスです
Google アカウントでログインすればすぐに始める事が出来ます

オススメのテンプレートは？

外部テンプレートの「QooQ」が人気で使い易いです
導入手順を紹介します

1．公式サイトからQooQをダウンロードします…こちら（くうく堂様）

　カード型とリスト型が選べるので好きな方を選んで下さい
　当ブログはリスト型を使っています
2．左のメニューから
　テーマ＞カスタム＞もとに戻す＞QooQ_list.xmlをアップロードします
3．反映されているかどうかは左メニューの「ブログを表示」から
　確認してみましょう

ブログのタイトルを変更するには？

1．レイアウトをクリックします
2．ヘッダーの右にある「編集」をクリックします
3．「ブログの説明文」と「ヘッダー画像」もここから変更出来ます

日付の表示を変更するには？

曜日を非表示に出来ます

1．設定
2．日付ヘッダーの形式
3．水曜日, 3月 15, 2023　→3月 15, 2023へ

ブログ右側のガジェットの順番を入れ替えるには？

1．レイアウトをクリックします
2．サイドバーにマウスを合わせると十字型に変わるので
　掴んで入れ替えて下さい

注目記事の本文を非表示にするには？

サムネとタイトルだけ表示させた方が見易くなります

1．レイアウトをクリックします
2．編集をクリックします
3．スニペットを表示する　オン→オフへ

テーマカラーを変更するには？

ヘッダーの色、ボタンの色などを変えられます

1．テーマをクリックします
2．カスタマイズをクリックします
3．詳細設定をクリックします
4．文字の色の右にある▼をクリックします
5．ブランドカラーをクリックします
6．好きな色に変更して保存します

記事の文字（行間）を変更するには？

Bloggerの文字入力は段落（1行空ける）改行がデフォになっています
これはHTMLで＜P＞タグを使っている様な物なので
標準にする事で治せます

1．一通り記事を書きます
2．行間の空白が気になる箇所をまとめて選択して「標準」をクリック
　すると不自然な行間の隙間がなくなります

3．反応しない場合は、もう一度範囲選択して「標準」を
　再クリックすると反映されます

＜どうやっても反映されない場合は？＞
・修正したい1行を一旦メモ帳にコピペで退避します
・次に記事内の正常な1行を修正したい箇所に上書きします
・最後にメモ帳の文章を再コピペで上書きすれば治ります

フォントを統一したい場合は？

Bloggerはコピペ元の書体、大きさ、色なども一緒にコピー
してしまうので、そのまま張り付けると見辛くなってしまいます
オススメは「メモ帳」に貼り付けてからの再コピペです

＜直で貼り付けて文体がおかしくなった場合の修正＞
1．違和感のある場所を反転選択します
2．「フォントの種類」をクリックします
3．「デフォルトのフォント」をクリックします
これでも治らない場合は
　「テキストの色」
　「テキストの背景色」
　「フォントサイズ」
　「段落」
　「太字」なども確認してみましょう

記事にサムネ画像をアップロードするには？

・上のツールアイコンから「画像を挿入」をクリックします
・記事内に直接ドラッグ＆ドロップでも出来ますが
　バグで失敗する事があるのでアイコンからやった方が無難です

Bloggerに非公開の画像をアップロードするには？

取り敢えず画像だけアップロードしたいという時に使えます

1．ページをクリックします
2．左上の「＋新しいページ」をクリックします
3．画像をドラッグ＆ドロップでアップロードします
4．下書きなので「公開」ボタンを押すまでは非公開です

アップロードした画像のURLを取得するには？

1．「画像を挿入」をクリックします
2．「Blogger」をクリックします
3．目的の画像をクリックするとチェックマークが付きます
4．右クリックから「画像リンクをコピー」でURLが取得出来ます

戻るボタンを追加するには？

スマホでブラウジングしていると右側にスクロール用の
「矢印」が表示されると思いますが、
それをBloggerでも使える様に出来ます

1．レイアウトをクリックします
2．フッター3の項目の「ガジェットを追加」をクリックします
3．「HTML / JavaScript」をクリックします

4．タイトルは空白のままにして下さい
5．コンテンツに以下の構文をコピペします

　"戻るボタン画像のURL"の部分は自分でアップロードした
　画像のURLに置き変えて下さい 

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top">
<img src="戻るボタン画像のURL" height="auto" width="40" /></a>

記事をHTMLで編集するには？

従来のタグを使いたい場合に有効です

1．左上の鉛筆アイコンをクリックします
2．HTMLビューをクリックします
3．タグが上詰めでごちゃ付いている場合は、
　「HTMLの書式」を設定をクリックすると見易くなります
4．元に戻したい時は「作成ビュー」をクリックします

自己紹介を編集するには？

1．設定をクリックします
2．一番下までスクロールします
3．ユーザープロフィールをクリックします
4．必要に応じて各項目の表示 or 非表示の変更、
　アイコンの変更、自己紹介文の変更を行います

投稿とページの違いは？

＜投稿とは？＞
・普通の記事を書く時に使う物です
　書けば書くほど埋もれて行きます
　また、公開ボタンを押すと自動的にリンクが張られて
　閲覧者に見える様になります

＜ページとは？＞
・埋もれさせたくない重要な記事を
　書く時に使う物です
　リンク集（サイトマップ）、問い合わせ先など
　ページは、公開しても自分でURLを調べて貼らないと
　閲覧者に見える事はほぼありませんので
　特殊な使い方になります

BloggerでサイトマップのURLを調べるには？

サイトマップとは今まで書いた記事の一覧表の事です
HTMLサイトマップ（人間向け）と
XMLサイトマップ（検索エンジン向け）の2種類があります
・Bloggerの場合は、XMLサイトマップが自動的に作られるので
　自分のURLを調べてメモっておきましょう

https://あなたのドメイン.blogspot.com/sitemap.xml

サイトマップをサーチコンソールに送信するには？

既にサーチコンソールにBloggerを登録していると
仮定して話を進めます

1．Google Search Consoleにログインします…こちら
2．左メニューから「サイトマップ」をクリックします
3．左上のドメインを登録済みのBloggerに変更します
4．「新しいサイトマップの追加」に
　上で調べたXMLサイトマップをコピペします
5．「成功しました」と表示されればOKです！

サイトマップを送信する意味は？

・グーグル検索に記事を登録して貰う事をインデックス化と言いますが、
　その為には「ちょっと見に来てよ」とクローラーを呼ぶ必要があります
・そのクローラーにお願いをする事をサイトマップ送信と言います
・一度送信して置けば、次からは自動で来る様になりますが、
　新しい記事やリメイクした記事を直ぐにインデックス
　して貰いたい場合は毎回自分で送信しましょう
・送信しないでもインデックスはされますが、数日～数か月
　かかる場合があります

もっと速くインデックスして貰うには？

XMLサイトマップよりも速くクローラーを呼ぶ方法があります
それはグーグルサーチコンソールで「再クロール」を依頼する事です

1．左メニューの「URL検査」をクリックします
2．上に再クロールして欲しい or インデックスに登録して欲しい
　URLをコピペします
3．「インデックス登録をリクエスト」をクリックします
　1～2分で依頼は完了します
4．速ければ5分程度でインデックス化されます
　されない場合でも「クロールはしたけどインデックスは見送ったよ」
　「理由は～」といった具合でステータスを確認出来るので
　サイトマップよりも便利です

サイトマップXMLと再クロールの違いは？

・サイトマップXMLは取り敢えず1回は登録して置く物
・再クロールはURLを直接指定して急ぎで来て欲しい時に使う物と
　覚えておけば良いでしょう

サイトマップHTMLを作るには？

訪問者向けにサイトマップHTMLを作りましょう
こちらも作っておいた方がクローラー対策として有効と言われています

1．左メニューの「テーマ」をクリックします
2．カスタマイズの右にある▼から「HTMLを編集」をクリックします
3．CSS内を一度クリックしてから、Ctrl＋Fを押して
　]]></b:skin> を探します
　基本的にCSSの追加は、この直上に貼る様にしましょう
　空白は何行あっても良いので、Enterキーを連打して
　どこに挿入したか分かる様にして置いた方が良いです
/* サイトマップ */
/* Sitemap plugin By MyBloggerLab */
#bp_toc {
    color: $(font.color);
    margin: 0 auto;
    padding: 0;
    border: 1px solid #d2d2d2;
    float: left;
    width: 100%;
}
span.toc-note {
    display: none;
}
#bp_toc tr:nth-child(2n) {
    background: #f5f5f5;
}
td.toc-entry-col1 a {
    font-weight: bold;
    font-size: 14px;
}
.toc-header-col1,
.toc-header-col2,
.toc-header-col3  {
background:$(brand.color);
}
.toc-header-col1 {
    padding: 10px;
    width: 250px;
}
.toc-header-col2 {
    padding: 10px;
    width: 75px;
}
.toc-header-col3 {
    padding: 10px;
    width: 125px;
}
.toc-header-col1 a:link,
.toc-header-col1 a:visited,
.toc-header-col2 a:link,
.toc-header-col2 a:visited,
.toc-header-col3 a:link,
.toc-header-col3 a:visited {
    font-size: 13px;
    text-decoration: none;
    color: $(brand.font)!important;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.toc-header-col1 a:hover,
.toc-header-col2 a:hover,
.toc-header-col3 a:hover {
    text-decoration: none;
}
.toc-entry-col1,
.toc-entry-col2,
.toc-entry-col3 {
    padding: 5px;
    padding-left: 5px;
    font-size: 12px;
}
.toc-entry-col1 a,
.toc-entry-col2 a,
.toc-entry-col3 a {
    color: #666;
    font-size: 13px;
    text-decoration: none
}
.toc-entry-col1 a:hover,
.toc-entry-col2 a:hover,
.toc-entry-col3 a:hover {
    text-decoration:underline;
}
#bp_toc table {
    width: 100%;
    margin: 0 auto;
    counter-reset: rowNumber;
}
.toc-entry-col1 {
    counter-increment: rowNumber;
}
#bp_toc table tr td.toc-entry-col1:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
       min-height: 3em;
    float: left;
    border-right: 1px solid #fff;
    text-align: center;
    padding: 0px 11px 1px 6px;
    margin-right: 15px;
}
td.toc-entry-col2 {
    text-align: center;
}
4．左メニューから「ページ」をクリックします
5．左上の「＋新しいページ」をクリックします
6．左上の鉛筆マークをクリックして「HTMLビュー」に切り替えます
7．以下のコードをコピペして保存＆公開します
　作成したサイトマップが正常に動作する事を
　目玉👁️アイコンから確認してURLをコピペしておきます 
<div id="bp_toc"></div>
<script src='https://mybloggerlab.com/js/sitemap.js'  type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
8．「レイアウト」をクリックします
9．「ナビゲーション」の「編集」をクリックします
10．「新しいアイテムを追加」をクリックします
11．サイトマップのURLをコピペします
12．ナビゲーションはブログタイトルの上にブレード表示されるので
　確認してみましょう

グーグルにインデックス登録して貰うまでにやったことは？

・1日目に2記事を上げました
・2日目に10記事を上げました
・2日目にブログ登録サイトに2件登録しました
・2日目にサーチコンソールとグーグルアナリティクスに登録しました
・2日目にサーチコンソールからインデックス登録依頼をしました
　⇒結果はクロールあり＆登録なしになりました
　⇒ステータスは「データ集計中＆1日後に確認して欲しい」とのこと
　⇒解説サイトや動画を拝見した所、
　・記事がゴミだと登録されないで消すかリメイクした方が良い
　・立ち上げた直後は時間が掛かるので待った方が良いとのこと
・3日目にサイトマップXMLを送信しました
・3日目にサイトマップHTMLを内部リンクに貼りました
　⇒日付が変わる頃にはインデックス登録が「済み」になっていました
　以上から、インデックスで悩んでいる人は1日待ってみると良いでしょう


QooQ