【随時追記】Blogger設定・仕様覚え書き

BloggerはGoogle運営のブログサービスで無料、広告なし、そこそこ高機能とカタログスペックだけを見れば非常に優れたブログサービスに見えます。

しかし、Blogger特有の独自仕様が非常に多いため「何でこんな仕様なの？」「これどうやるの？」といったことが少なくありません。

以下、筆者が引っかかった部分の対処方法を羅列していきます。

ちなみに、ある程度HTMLやCSSを扱えないと対処の仕方が厳しい部分が多いので、解らない方は頑張るか諦めて別のブログサービスの検討をオススメします…

アップロードファイル関連

Bloggerにアップロードできるファイルは？

画像と動画ファイル以外はアップロードできません。

それ以外のPDFやテキストファイル、zip等の圧縮ファイルなどはGoogleドライブからリンクを引っ張るか、それ以外のWebサーバーなどに配置する必要があります。

Bloggerの保存容量上限っていくつ？

公式には15GBとなっています。ちなみにこの15GBは他のGoogleのサービス(フォト、ドライブ、Gmail等)と共用です。GoogleOneの有料プランに契約していればそれだけ容量は増えます。

但し、長辺が2048px以下の画像と15分以下の動画は容量カウントの対象外となっています。

動画に関してはYouTubeにアップしてそれを貼り付ける方法もあります。
(限定公開にしておけばYouTubeやGoogleの動画検索には引っかからなくなる)

ブログに画像や動画を追加する - Blogger ヘルプ
https://support.google.com/blogger/answer/41641

詳細な仕様(の解析結果)については以下のリンク先を参照

Bloggerの投稿画像の種類とサイズ／容量と画像URLについて
https://www.nagahitoyuki.com/2020/10/concerning-blogger-posted-image-type-size-volume-and-image-url.html

Bloggerにアップロードした画像の削除ってどこでやるの？

Bloggerにアップロードしたファイルは、Googleアルバムアーカイブに格納されているためそこから削除します。なお、ファイルの複数選択といった気の利いた機能は存在しません。

おそらく画像を削除して整理すること自体が想定されておらず、どうせ容量制限がないのだから同じ画像は記事作成の度に都度アップロードするといった感じの設計思想のような気がします。
長辺2048px上限はWeb管理者ならアップする画像の調整は行うはずといった想定なのかもしれません…

ちなみに完全に同一のファイル名の画像が複数存在可能です。

Google アルバム アーカイブ
https://get.google.com/albumarchive

なお、Bloggerの画像のフォルダ及びその配下のブログ名のフォルダを削除すると二度とそのブログではBloggerにアップロードできなくなるので、フォルダごとの削除は絶対にしてはいけません(経験談)

Google アルバム アーカイブの使用
https://support.google.com/picasa/answer/7008270?hl=ja

Google Bloggerの画像はどこにあるの？どうやって削除するの？-Kujipedia
https://8oclockis.blogspot.com/2020/09/google-blogger.html

Bloggerにアップロードした動画ってどこにあるの？

画像とは異なりGoogleアルバムアーカイブにはアップロードされていないようで、「設定」→「ブログの管理」→「ブログ上の動画」から確認できます。

なお、動画を貼り付けたり、動画URLを取得する手段が動画アップロード時にしか存在しないため、再挿入するには過去に動画を貼り付けた記事からHTMLコードを引っ張ってくるしかありません。

このため、間違って動画の埋め込み部分のコードを消してしまった場合は再度貼り付ける手段が存在しないため、再アップロードする羽目になります(一応ブログ上の管理画面からアップロードした動画のダウンロードは可能)。

使い回しを考慮するなら、YouTubeに限定公開でアップロードして使ったほうが取り回しは良さそうです。

投稿関連

HTMLビューのソースが改行されてなくて見難い…

メニューバーの「HTMLの書式を設定」である程度改行できます(改行のされ方が若干おかしい部分もありますが…)

なお、作成ビューで編集を行うとまたどんどん改行なしで付け足されていく謎仕様です。

投稿とページの違いって何？

ページはWordPressで言うところの「固定ページ」に相当します。
投稿一覧やフィードには出てこないので、自分でリンクを貼らない限り不可視なページになります。

通常は「このブログについて」的なページに利用してヘッダーやサイドバーにリンクを貼るかページガジェットを使用する感じになるでしょう。

やろうと思えばWebサイト的な作りにできなくもないと言えます。

ちなみにURL構造は「【ブログアドレス】.blogspot.com/p/【ページ名】.html」

ページのパーマリンクって指定できないの？

任意に指定する機能は存在しません。
デフォルトでは「blog-page.html」です。

但し、ページ・記事投稿(自動パーマリンクの場合)共に投稿するタイミングでタイトルに半角英数字が含まれるとパーマリンクに反映されるという謎仕様が存在するため、あらかじめ設定したい英数字のパーマリンクのタイトルで投稿→タイトル変更の手順を踏むとページでも任意のパーマリンクを設定することが可能です。

なお、この仕様のためページは一度作成するとパーマリンクの変更はできないため、再度ページを作成し直すことになります。

ちなみにパーマリンクに記号は「-」(ハイフン)と「.」(ドット)しか使えません。非対応の記号を入力すると自動的に無視され詰められます。

特定の投稿を一番上に表示したい

WordPressのようにトップに表示するといった気の利いた機能は存在しないようなので、投稿日時を最新か未来にするしかなさそうです。

但し、未来の日付で投稿しようとすると予約投稿になってしまうので、一度投稿してから未来の日付に修正する手順を踏む必要があります。

ページをホームに表示したい

以下のリンクを参照してください。

※現在は「検索設定」は存在せず「エラーとリダイレクト」から設定

いろいろメモ: Blogger トップページを固定ページにする
https://pon250.blogspot.com/2014/12/blogger.html

投稿のパーマリンクの年月を変えたい

カスタムパーマリンクをいじった時点の公開日に自動的に変更されます。

同一のパーマリンクで年月のディレクトリ部分を変更したい場合は、公開日を修正した後、一旦自動パーマリンクもしくは別のパーマリンクに変更して更新をかけ、カスタムパーマリンクを元に戻すという手順が必要になります(別のパーマリンクにする工程では一度ダッシュボードに戻ったほうが確実かもしれない)

カテゴリってないの？

ありません。
ラベルで代用して下さい。

ラベルを並べ替えたりできないの？

五十音順表示にして、以下のようにラベルの頭に数字を入れて並べ替えるくらいしかなさそうです。

100-ラベルA
101-ラベルAB
200-ラベルB
201-ラベルBC

もしくは[HTML / JavaScript] や[リンク リスト]ガジェットで無理やりリンクを貼って並べるか…

アイキャッチ画像を設定したい

Bloggerは投稿文の一番上に表示されている画像(もしくはYouTubeの埋め込み)が自動的にアイキャッチ画像に設定されます。

やや無理矢理感はありますが、一番上に非表示の画像を埋め込むことで任意のアイキャッチ画像を表示することができます。

HTMLビューから以下のimgタグを一番上に挿入すると良いかと思います。

 <img src="【画像URL】" style="display:none;"> 

ちなみにBloggerにアップロードした画像は一度ツールバーの「画像の挿入」から埋め込まないとURLが判りません。なので、凄まじく面倒ですが一度画像を挿入してimgタグからURLを抽出する工程が必要になります。

Twitterにアイキャッチ画像が表示されない

テーマのHTMLを編集する必要があります。
(※選択したテーマによってはできないかもしれません)

１．左メニューの「テーマ」を選択

２．「カスタマイズ」の「▼」を選択して「HTMLを編集」を選択

３．以下のmetaタグを画像の位置に挿入、忘れずに保存も行う

↓サムネイルが小さいもの
 <meta content='summary' name='twitter:card'/> 

↓サムネイルが大きいもの
 <meta content='summary_large_image' name='twitter:card'/> 

以下のTwitter公式ツールにBloggerの記事URLを入力してどのように表示されるか確認することができます(要ログイン)

Card Validator | Twitter Developers
https://cards-dev.twitter.com/validator

ちなみにTwitter上の表示画像を更新する場合も、このCard
ValidatorでURLを打ち込んで表示する必要があります。

なお、当然ながらテーマのHTMLをいじっている以上、ブログ全体の一括設定となるため記事ごとにサムネイルサイズの変更といったことはできません。

カードの利用開始 | Docs | Twitter Developer
https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started

【Web】Bloggerのテーマに必要最低限の変更でTwitter Cardを追加する -
映画と旅行とエンジニア
https://wakky.tech/blogger-simple-twitter-card/

レイアウト関連

ガジェットに最近の投稿がないのだけど…

フィード(RSSの投稿一覧を表示するガジェット)を利用して擬似的に再現するしかありません。

これを設定するには「フィードURL」をどこかから拾ってくる必要があります。
ブログを表示したページ最下部にある「登録:
投稿 (Atom)」のリンクがそれになります。

もしくはFeedlyのようなRSSリーダー、もしくは下記のWebツール等から抽出します。

RSSフィード取得・検出ツール - BeRSS.com
https://berss.com/feed/

また、投稿がフィードに反映されるまで若干時間がかかるので即時反映はされません。

記事やサイドバーの幅が狭い…

 左メニューの「テーマ」を選択し、次に「カスタマイズ」を選択

「幅を調整」という項目があるのでそこから調整できます(テーマによってはないかもしれません)

たまに保存しても反映されていないことがあるので、反映されていなかったら再度設定→保存を行います。

見出しの大きさがおかしくない？

大見出し<H1>は普通の大きさなのに見出し<H2>以降は極端にフォントの大きさが小さくなるテーマが結構存在します。

ざっとテーマを試した感じ、以下のテーマは常識的な見出しの大きさのような気がします。

• Dynamic Views Classic
• Simple系統
• Watermark系統

カスタムCSSで無理やりフォントサイズをいじる方法もありますが…

なお、見出し<H2>と小見出し<H3>を隣接させると行間が非常に狭くなることが多いですが、小見出し側の先頭に改行<BR>を入れるとまあまあ見れる感じになります(無理やりですが…)

モバイル画面にガジェットが表示されない

初期状態だと無効化されているので、HTML編集から有効化するタグを挿入する必要があります。

１．「テーマ」→「カスタマイズ」→「モバイルの設定」

２．モバイル表示の設定のモバイテーマを選択のプルダウンから「カスタム」を選択して保存

３．「カスタマイズ」の「▼」を選択して「HTMLを編集」を選択
右上側のツールバーのガジェットアイコン(一番左)を選択すると各ガジェットのコード部分にジャンプできます。

今回は「このブログを検索」の検索ガジェット(BlogSearch)を例に説明していきます。

４．「<b:widget」のタグ内に「mobile='yes'」を追加する

他のガジェットは設定したtitleとかから推測してそれぞれ設定していって下さい。

ブログトップページの一番下に検索ガジェットが追加されました(不格好なのはどうしようもないです)

Bloggerでガジェットをモバイル版に表示させる方法と検索結果にブログ記事タイトルを表示させる方法 - さるですが。の資産運用・雑記・小説ブログ
https://funky-monkeympd.blogspot.com/2019/10/blogger.html

設定関連

※GoogleアナリティクスやGoogleアドセンスには興味がないので各自でどうにかして下さい

コメントのNGワードってどこで設定するの？

そんなもんねーです

スパムの有無はBloggerが機械的に判断します。
一応、「読者のコメント投稿用キャプチャ」をONにしておけば機械的なスパムのほとんどは弾けるはずです。

それ以上の対応がしたい場合は全てのコメントを手動で選り分けるしかありません。
設定画面の「コメントの管理」を「常に」にすると全ての投稿されたコメントを保留状態にできます。

ちなみに「ときどき」にすると指定した期間が過ぎた記事に投稿されたコメントが保留状態になります。

コメントを管理する - Blogger ヘルプ
https://support.google.com/blogger/answer/187141

---

2022/3/28：投稿関連をいくつか追加
2022/3/15：見出しの大きさについて追記