そのタグを挿入した意図は何ですか？（コードレビュー）

Bloggerのタグ生成にイライラしている人

Bloggerでブログ記事を作成する際に、地獄みたいなhtmlタグの掃除をする羽目になったので、それを回避する方法をメモする。

まずBloggerの特徴として「ビジュアルエディタで文章の作成、装飾を行うと訳のわからないhtmlタグを生成しまくる」という、なんというか稼働初期のサービスか？と言いたくなるようなものが出来上がる。

具体的にはこんなタグ。

<div>
    <span>
      <br />
    </span>
</div>

眩暈がする。改行だけのためにdivとspanで囲むとか聞いたことないぞ。

いったん生成されてしまうhtmlタグに目を瞑っても、ビジュアルエディタで記事を作成した際に見当違いのタグが設定されてしまうとビジュアルエディタからは見分けがつかないので、それを直すためにhtmlエディタの方を見に行かなければならない。

何をどう解釈したら<h3>タグ内に文章を全部ぶち込もう！となるんですかね…？？？（経験談）

今まではそういう事が発生したら「諦めて記事を削除して、もう一度文章を持ってきて…」と直していたのだが、記事内へ既に画像を貼り付けていた場合、その画像を表示するタグを探してコピペしておかないと画像を再アップロードすることになって面倒くさい。

そしてBloggerのhtmlビューは整形という言葉を知らないので、改行がされないまま生のhtmlタグが並んでいる。

前回更新したブログ記事をHTMLビューで見た画面

上の画像は前回更新したブログ記事をHTMLビューで見た画面だ。検索で探せるとはいえ、何というか、やる気を失わせるのにはちょうど良いくらいの、めちゃくちゃなタグが大量に並んでいる。これじゃいかんな、と思い「Bloggerには htmlで投稿する」ように切り替えることにした。

今回はその方法の記録。

結論：markdown→htmlに変換→Bloggerにぶち込む

obsidianで下書き作り～WindowsPCに下書きメモを移動

ブログの更新のための下書きツールとしてobsidianというメモアプリを使っている。通常の平文でもメモが書けるが、markdownという形式でhtmlのような装飾ができる。

自分がよく触るデバイスはiPhoneだけど、ブログの更新はWindowsPCを使っている。最初はiPhoneのメモアプリに文章を書いて、文をiCloud経由でWindowsに移動させて推敲していたけどiCloudへのログインがやたらとめんどくさいのがネックだった。

毎回ね…パスキーを使うのが面倒で…いやセキュリティで必要なのは分かるんだけどね…使ってるの私なんだよね…そこをどうしてわかってくれないのだ（当たり前）

それで調べていくとobsidianならWindowsと文章データの移動が簡単になるのが分かった。

やり方としては

  1. WindowsのOneDriveにobsidianの保管庫を作る
  2. iPhone側のobsidianにremotely-saveというユーザープラグインを入れる
  3. OneDriveと連携させる

これでiPhoneでポチポチ打ち込んだメモがOneDriveに保存されるので、WindowsPCからメモの閲覧が容易にできる。

要するにクラウドサービスを使って異なるデバイス間のやり取りをしているという話。自分はOffice365のサブスクに入っているからOneDriveを選んだけど、remotely-saveは主要なクラウドサービスに対応しているので好きなものを選べば良いと思う。

ただ、obsidianはmarkdownに特化した記法が可能だけれど、iPhoneからだと少しやりづらいので下書きの段階では最低限のmarkdownの設定のみ行う。

VScodeを使ってmarkdownでメモを編集

次に作成したメモをVScodeというエディターソフトにコピーする。VScodeはいろいろなプログラミング言語に対応しているソフトだけど、markdownで書かれたファイル（.md）の編集にも対応している。

ここでコピーしたメモをmarkdown形式で記述ができる.mdで保存した後、markdownを使って整形していく。obsidian側でやらないのはWindows側のobsidianはあくまでも受け取り側というポジションにさせたいのと、iPhoneで操作する時の煩雑さを減らすため。

これは自分の処理能力というか、慣れの問題なんだけど、PCの方が慣れていることもあって文章の推敲がやりやすい。

markdownを使うのは生のhtmlを使うより記載が楽だから…という理由で使っているので、いきなりhtmlタグ打ち込んでもいいと思います。後は文章の構造だけAIに伝えてhtmlタグを作ってもらうというやり方でもいいと思う。とりあえずhtmlタグが欲しいので。

markdownをhtmlタグに変換して修正修正！

ある程度整形したらVScodeの拡張機能である「Markdown Preview Enhanced」を使ってhtmlタグに変換を行う。

変換する前の初期設定として、Markdown Preview Enhancedの設定ファイル内にある「parser.js」に<h2>〜<h3> に不要なidを設定しないようスクリプトを追加しておく。じゃないとhタグで囲んだものと同じ名前のidが設定されます。 ころすぞ。

…idが自動付与されるのは「idを使ってリンクさせる目次を作りやすくするため」だそうだけど、日本語だとアンカーリンクになった時にURLエンコードが働いて文字がコードに変換されて長い文字になりがちだから設定するなら英語にしたいんだよなぁ…。

Markdown Preview Enhancedの設定ファイルの表示方法はVScodeのコマンドパレットを開いて「Markdown Preview Enhanced: Open Config Script」と入力すればよい。この中の「.crossnote\parser.js」を修正する。

「parser.js」に設定したスクリプトは以下のものを使用した。

  onDidParseMarkdown: async function (html) {
      // すべての を削除
      return html.replace(/\s+id="[^"]*"/g, "");
      },

コマンドパレットに「Markdown Preview Enhanced: Open Locked Preview to the Side」と打ち込むとmarkdown形式のmdファイルがhtmlだとどのように見えるかプレビューしてくれるので、それを見ながらmarkdown形式で文章を作る。

Markdown Preview Enhancedのプレビュー画面からエクスポートする手順を説明

その後はプレビュー画面右下のハンバーガーマーク（三みたいな記号）から「エクスポート→html(オフライン)」を選択する。上の画像のようにエクスポートを行えばよい。

そうするとmdファイルを配置したフォルダにhtml形式のファイルが書き出されるので、今度はhtmlの編集を行う。書き出されたファイルから不要なタグ(Markdown Preview Enhancedが設定したcssの設定やscriptタグなど)を削除したり、新しくタグを追加したり…。

自分は書き直している間に文章を追加したくなったり削除したくなったりと、書きながら考えるタイプなのであまり凝ったタグ設定にしないようにすることにした。凝った表示がしたいならはBlogger側のテンプレート内にあるCSSをいじれば良いと割り切っている。

ちなみにVScode使ってhtmlの整形をしたいなら拡張プラグインを入れていい感じにしてください。私は「Prettier」という整形ツールを入れている。

これで画像以外のhtmlは完成したので、次は画像用のタグを用意する。

余談

ちなみに「Markdown Preview Enhanced」は2026年に脆弱性が見つかっていて、悪意のあるmdファイルを開いた場合、mdファイル内に仕込まれたスクリプトが実行されてPCが乗っ取られるというのがある。

JVN iPedia 脆弱性対策情報データベースが報告している脆弱性のレポート：JVNDB-2026-005042

けど、外部のmdファイルなんか拾って開かないから一旦無視している。一応気になる人は他の拡張機能やサービスを使うと良いと思う。とりあえずmarkdownからhtmlに変換さえできればよいので。

画像のタグはBloggerに作らせる

画像についてはBloggerに画像をアップロードする都合上、Bloggerが吐き出すタグを利用した方が良い。

よって「画像のタグを生成させるためだけの下書き記事」を作っておき、そこに画像をアップロードして吐き出されたタグをコピペし、VScodeのhtmlファイルに持っていく。

プレビューを繰り返してhtmlを完成させたら投稿完了！

後は記事の投稿画面を開いてhtmlビューに切り替えた後、作成したhtmlのbodyタグの中身を貼り付けてプレビューを行う。プレビューに合わせてhtmlの方を修正して再度プレビュー…を繰り返す。この時、ビジュアルビューに絶対に切り替えてはいけない。切り替えた瞬間アホみたいなタグが自動挿入されるので…。

ちょっとこの方法で困るのは、音声による確認ができない点。今までは文章の推敲時にビジュアルビューでブラウザを使った読み上げ機能を使い誤字脱字を探していた。だけど、Bloggerの記事プレビュー画面だとブラウザを使った音声読み上げが行われないので、どこかのタイミングで音声読み上げによるプレビューを挟みたいなぁと考えている。

…html作ってるんだから、それをブラウザで開いて読ませればいいと思った。 こういうのに気がつけるから推敲は大事なんですね〜。

あとは使っているテンプレートに合わせてCSSが適用されるように記事全体を囲むdivタグを挿入してテンプレートに記載されているcssの設定をすればOK…だと思う。

ただ、今使っているテンプレートはpタグのmarginがリセットされるような記載になっていた。既存の記事のスタイルが崩れるのが嫌なので、CSSをテンプレートに追加してそれが読み込まれるように記事全体を囲むdivタグに設定することに。

以上でBloggerの記事作成は終了となる。お疲れさまでした。…面倒なら他のブログサービスを使えばいいじゃん…というのはさておき…。

まぁ逆に何でこのサービスが生き延びてるのか知りたいレベルです

ちょっとだけBloggerの擁護をすると、あまり…いやかなりエディタの動きが洗練されていないのは、ある意味しょうがない点があると思う。

Bloggerは天下のGoogleが運営しているサービスだけど今は 「とりあえず生かしておくか…」 程度の管理状況となっている。

Googleは検索サービスだけでなくandroidの開発やYouTube、クラウドサービス、SEO用のツールなどを提供している。最近だとGeminiというAIも出していて、いずれも課金して稼ぐようなマネタイズとなっていたと思う。それに検索時の広告収入もある。

他のブログサービスみたいに、より洗練されたエディタを実装するよりも他のサービスでたくさん稼げる…そしてBloggerでblogを始めようとする人も恐らく少ないのだと思う。多分今からやるならWordPressで作ったり、有名どころのブログサービスに登録したりするんじゃないかな…。

ただGoogleのサービスというだけあってメインに使い続けている人もそれなりに居るわけで、そういう人たちはこうした事象にも対応できるような知識を身に着けてサバイブしてきた人たちだろうから、サービス終了するより生かさず殺さずの状態で放置しているのだと思う。

Googleからしたら 「この大SNS時代でBlogを始める方がロートルなんだよな！」 という感じなんだろうか。

どう…なんですかね？SNSよりたくさん文が書けるし、画像も載せやすいし、自分の書いた情報しかないからTLを見て流れてくる情報に頭がクラクラすることもない(これは私の脳の処理能力が悪いせいだけど…)から、Blogというスタイルは結構好きだ。なのでGoogleにはこのサービスを続けて欲しいけども…。

後、Bloggerには自分から貼り付けない限り広告が一切ない。課金せずに広告が出ないブログサービスで有名なのはBloggerくらいじゃない？海外産を探せばもう少しあるかもしれないけど…。僕は最近のweb広告の表示方法に品がなさすぎて、それを死ぬほど嫌っていて、そんなものを他の人に味合わせたくないという気持ちがあるからBloggerを選んだわけだけど、どうなんでしょうね…みんな広告ブロック入れてんのかな…。

あとがき

そんな感じの更新方法の説明でした。とりあえずきったないタグが嫌ならBloggerのビジュアルビューは信用するな！ということです。

正直面倒だけど、markdown記法の練習とhtmlの構造練習にもなるからまぁいいかな…とは思っています。多少はね、いい方に考えないとダメになるので…。うん…。あと作成した記事をGitで管理できるので（画像はBloggerに保存させているから長文を打ち込んでも大した容量にならないのが良い）もし他のサービスに移動したくなった時に移動しやすいのは楽じゃないかしら～と。Gitくん…久しぶりだね！

というかこういうのってAIの方が得意そうだけどなぁ〜どうなんですかね？文章の生成はこっちがするからタグ付けはよろしく！って、できそうです。つーかできるっぽい。その辺はやっぱAIが強いですね～。

ただ、AIに投げたら確かにいい感じのhtmlに変えてくれそうですが、 書いた文章を学習データとして渡すことと同義になる ので…そういうのが気になる人はこの記事に書いた方法のように「ローカルで変換する」、あるいは文章構造だけAIに渡してタグを作ってもらい中身を後で入れる…といったやり方がいいかもしれません。

AI…俺の代わりに毎月30万円くらい稼いでくれ…（みんながそれをすると出資する側が居なくなるので資本主義国家の崩壊です）

そんな感じ。個人的に久々にVScodeを弄れて楽しかったのは事実なので…まぁ慣れていきたいですね…。