Blogger記事の作成方法

Blogger の記事は，管理画面の[投稿]から作成します．新しい記事を書くときは[+ 新しい投稿]をクリックし，タイトルと本文を書きます．公開前には[プレビュー]で表示を確認し，すぐに公開しない場合は[保存]で下書きとして残します．公開済みの記事を編集した場合は，[更新]をクリックして変更を反映します．

記事は公開すると読者に見えるだけでなく，URL や検索結果にも関係します．本文を書くだけでなく，ラベル，パーマリンク，検索向け説明，画像の説明も確認してから公開すると，後で直す手間が減ります．

作成ビューと HTML ビュー

Blogger の投稿エディタには，通常の文章を書くための作成ビューと，HTML を直接編集する HTML ビューがあります．普通の記事は作成ビューで書けば十分です．一方で，CSS グリッド，独自の HTML，MathJax，細かいリンク修正などを行う場合は HTML ビューを使います．

HTML ビューを使うときは，Blogger が自動で追加したタグを消しすぎないようにします．特に画像は，Blogger が div や table で囲むことがあります．画像の配置を直すときは，画像タグだけでなく，その外側のタグも含めて移動します．

公開前チェック

記事を公開する前に，私は以下を確認します．

• タイトルが長すぎず，記事の内容が分かるか．
• 冒頭の数行だけで，何についての記事か分かるか．
• リンク先が正しく開くか．外部リンクを新しいウィンドウで開く必要があるか．
• 画像の向き，大きさ，キャプション，説明が適切か．
• ラベルを付け忘れていないか．複数のラベルはカンマで区切る．
• パーマリンクを変更する必要がある場合は，公開前に設定したか．
• 検索向け説明を書いたか．
• スマートフォンで読みにくくないか．特に表，横長画像，数式，コードブロックを確認する．
• [プレビュー]で，公開時の見た目を確認したか．

記事を増やすためのメモ

ブログや WEB サイトの記事を増やすには，書くときだけ頑張るのではなく，普段からネタを集めておくことが重要です．思いついた瞬間にタイトルだけでも下書きに入れておくと，後で本文を書き始めやすくなります．写真を撮っておく，参考 URL をメモしておく，手書きの計算メモを残しておく，という小さな記録が記事の材料になります．

まとまった時間が取れるときに一気に書くのも有効です．私の場合，週末にまとめて書いたり，通勤時間に下書きを進めたりします．完全な記事になるまで待つと公開できないので，まずは 60 点くらいで公開し，気になる部分は後から直す，という考え方も大切です．

ただし，公開を急ぐ場合でも，事実関係，リンク先，画像の権利，個人情報は確認します．公開後に直せる部分と，公開前に確認すべき部分を分けて考えると，気楽に続けやすくなります．

投稿設定

投稿エディタの右側には，記事ごとの設定があります．忘れやすい項目を以下にまとめます．

Blogger の投稿設定で確認する項目

項目	メモ
ラベル	記事を分類するための目印です．読者はラベルで記事を絞り込めます．複数のラベルを付ける場合は，カンマで区切ります．
公開日時	すぐに公開するだけでなく，日付と時刻を指定して予約投稿できます．予約投稿する場合は，ブログのタイムゾーンが正しいか確認します．
パーマリンク	記事の URL です．日本語タイトルのまま自動生成すると分かりにくい URL になることがあります．必要なら[カスタム パーマリンク]で，短い英数字の URL にします．公開後に変更すると古い URL から読めなくなることがあるため，公開前に決めるのが安全です．
検索向け説明	検索結果や共有時に使われることがある説明文です．記事の要点を 1 から 2 文で書きます．
オプション	コメントを許可するか，HTML の改行をどう扱うかなどを確認します．通常は標準設定でよいですが，コメントを閉じたい記事では確認します．
カスタム ロボットタグ	検索エンジンに出したくない記事では noindex を使います．通常の記事では触らないほうが無難です．

トップページで記事の一部だけを見せたい場合は，本文の区切りたい位置に[追記の区切り]を挿入します．長い記事では，冒頭に要点を書き，続きは個別記事で読んでもらう形にできます．

リンク

リンクはハイパーリンクとも呼ばれます．Blogger の記事の中で，画像や文字列をクリックすると他のページを表示する仕組みです．ページにリンクを設定する操作を「リンクを貼る」といいます．

1. Blogger で記事を書きます．
2. リンク先の URL をコピーします．たとえば，図の「ジャスパー」の URL を探してコピーします (図1)．
3. リンクを設定する文字列を選択します．具体的には，リンクにしたい文字列をマウスでドラッグします (図2)．
4. 上部メニューのリンク挿入アイコン をクリックします (図3)．このアイコンが表示されていない場合は，メニュー右端の「…」をクリックすると表示されることがあります．
5. リンク設定のダイアログが表示されます．「表示するテキスト」には，選択した文字列が入っています．「リンクを貼り付けまたは検索」に，先ほどコピーした URL を貼り付けます (図4)．
6. 外部サイトを開くリンクでは，「このリンクを新しいウィンドウで開く」を必要に応じてチェックします．信用できないリンクや検索エンジンにたどらせたくないリンクでは，「rel=nofollow 属性を追加する」をチェックします．自分の記事同士の通常リンクでは，nofollow は基本的に不要です．
7. [適用]をクリックします．

以上でリンクの設定は完了です．公開前にプレビューを開き，リンク先が正しく表示されるか確認します．

画像を入れるときの注意

画像は，上部メニューの画像挿入アイコンから追加します．Blogger にアップロードした画像はウェブ用に圧縮・最適化されることがあります．大きな画像を元の画質のまま保存する用途には向きません．また，アップロードした画像は Blogger のメディア マネージャーで管理できます．

画像を入れたら，画像をクリックしてサイズ，配置，キャプション，代替テキストを確認します．代替テキストは，画像が表示されない場合やスクリーンリーダーで読まれる説明です．検索にも関係するため，何の画像か短く具体的に書きます．

他人の画像を使う場合は，著作権と利用条件を必ず確認します．Blogger の公式ヘルプでも，他人がホストしているコンテンツや著作権で保護された素材を無断で追加しないよう説明されています．

画像ファイルサイズのメモ

2021 年に自分で試したときは，JPEG 画像を Blogger にアップロードしても，クリックして表示される元画像のファイルサイズは大きくは変わりませんでした．一方で，記事本文に表示される画像は小さいファイルとして配信されていました．つまり，本文表示は軽くなりますが，元画像相当のファイルも残る場合がある，という結果でした．

2021 年に確認した画像ファイルサイズの変化

図番号	アップロード前 [MB]	アップロード後 [MB]
図1	0.085	0.048
図2	0.197	0.159
図3	0.555	0.509
図4	1.184	1.150
図5	6.811	6.785

ただし，Blogger の現在の公式ヘルプでは，アップロード画像はウェブ用に圧縮・最適化されることがあり，大きな画像を元の画質のまま Blogger に保存する方法はない，と説明されています．したがって，上の結果は当時の実験メモとして扱い，現在も常に同じとは考えないほうがよいです．大きすぎる写真は，アップロード前に必要な大きさへ縮小しておくと安全です．

Google Drive の画像を使う

Blogger には通常の画像挿入機能がありますが，Google Drive に置いた画像を外部ファイルとして読み込むこともできます．勉強用，または同じ画像を複数の記事から参照したい場合のメモです．通常の記事では，Blogger の画像挿入を使うほうが簡単です．

1. Google Drive に画像を置きます．
2. 画像ファイルを右クリックし，[共有]または[リンクを取得]から，リンクを知っている人が閲覧できる設定にします．
3. 共有 URL の /d/ と /view の間にあるファイル ID を控えます．
4. Blogger の HTML ビューで，以下のように img タグを書きます．

<div style="text-align:center;">
  <img src="https://drive.google.com/uc?export=view&amp;id=ファイルID" style="width:300px;" alt="画像の説明">
</div>

Google Drive の共有設定が限定公開のままだと，読者には画像が表示されません．また，Google Drive 側の仕様変更で表示できなくなる可能性もあります．長く残したい記事では，Blogger に画像をアップロードする方法を優先します．

画像を横に並べる

Blogger の画像挿入では，画像を自由に横並びにする操作が分かりにくいことがあります．2 枚以上の画像を横に並べたい場合は，HTML ビューで CSS グリッドを使うと整理しやすくなります．

2 枚の画像を横に並べる基本形は，以下のとおりです．HTML ビューで，画像を囲むように記述します．

<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:start;">
  <div>
    <!-- ここに 1 枚目の画像を入れる -->
  </div>
  <div>
    <!-- ここに 2 枚目の画像を入れる -->
  </div>
</div>

画像を 3 列にしたい場合は，grid-template-columns:1fr 1fr 1fr; のように列を増やします．幅の比率を変えたい場合は，1fr 1fr 2fr のように指定します．固定幅にしたい場合は，200px 300px のような指定もできます．

CSS グリッドでよく使う指定

CSS	設定
display	grid にします．
gap	画像どうしの間隔を指定します．
grid-template-columns	列の数と幅を指定します． 例: 1fr 1fr なら 2 列，同じ幅です．
align-items	各セル内の縦方向の位置を指定します．画像の上端をそろえるなら start が分かりやすいです．

画像を表示するセルを結合することも可能です．CSS の grid-row や grid-column を子要素に指定します．考え方を図5に示します．Blogger が生成する HTML は，画像だけの場合とキャプション付きの場合で変わることがあるため，実際の HTML を見て，画像全体を囲んでいる要素に指定します．

スマートフォンで横並びの画像が小さくなりすぎる場合は，無理に横並びにせず，1 列にするほうが読みやすいです．必要なら，スマートフォン用に別の CSS を追加します．

Google マップを埋め込む

場所を示す記事では，Google マップを埋め込むと分かりやすくなります．Google マップの埋め込みコードは iframe です．Blogger では HTML ビューに切り替えて貼り付けます．

1. Google マップを開き，記事に載せたい場所を表示します．
2. メニューから[地図を共有または埋め込む]を選びます．
3. [地図を埋め込む]タブを開き，サイズを選びます．必要なら[カスタムサイズ]で幅と高さを指定します．
4. [HTML をコピー]をクリックします．
5. Blogger の投稿エディタを HTML ビューにし，地図を表示したい場所に貼り付けます．
6. 作成ビューまたはプレビューで表示を確認します．

マーカー，線，ルートなどを入れた地図を使いたい場合は，Google マップのマイマップで地図を作成し，地図名の横のメニューから[自分のサイトに埋め込む]を選びます．共有設定が限定的だと読者に表示されないことがあるため，公開範囲も確認します．

貼り付けた iframe の width と height を変更すると，表示サイズを調整できます．スマートフォンで横幅がはみ出す場合は，幅を固定値にしすぎないよう注意します．

Google Code Prettify を使う

ソースコードを記事に載せる場合は，そのまま貼るだけでは読みづらくなります．Google Code Prettify のようなシンタックス ハイライターを使うと，コードに色が付き，行番号も付けやすくなります．

Blogger で直接 Google Code Prettify の環境を整える方法もありますが，私の使い方は少し変則的です．別の WEB サイトで Google Code Prettify を使った HTML 表示を作り，表示されたソースコード部分を Blogger に貼り付けます．

1. Google Code Prettify を使える別の WEB サイトで，ソースコード表示用の HTML を作成します．
2. ブラウザで表示されたコード部分をコピーします．
3. Blogger の投稿エディタを作成ビューにして貼り付けます．
4. 必要に応じて HTML ビューに切り替え，margin，width，height を調整します．
5. プレビューで，行番号や色が崩れていないか確認します．

この方法は，別の WEB サイト側に Google Code Prettify の仕組みがあることを前提にしています．誰にでも向く方法ではありませんが，自分の WEB サイトでコード表示を作れる場合には便利です．

参考資料

更新履歴