AIの下書きをブログに貼るとき、はてなブログとWordPressで気をつけること

公開 ・ AIの基礎

AI に記事の下書きを書かせて、そのままブログに貼る。この工程で毎回つまずくのが、編集モードによって同じテキストの解釈が変わるという点です。同じ Markdown を貼っても、貼り先のモードによって、きれいな記事になることもあれば記号だらけになることもあります。

はてなブログと WordPress それぞれについて、どのモードに何を貼るべきかを整理します。

はてなブログの場合

はてなブログには編集モードが3つあり、記事ごとに固定されます(書き始めたあとの変更は推奨されません。既存の記事を別モードで開くと本文が壊れることがあります)。

Markdownモードなら、そのまま貼れる

設定 →「編集モード」で Markdown モードを選んでいれば、AI の出力をそのまま貼り付けるだけで、見出し・太字・箇条書き・表がすべて意図どおりに変換されます。AI で下書きするなら、このモードを選んでおくのがいちばん楽です。

注意点は2つあります。

見出しレベル:はてなブログでは記事タイトルが <h1> を占めます。本文の最上位は ##(h2)にするのが正しく、# を使うと h1 が2つある構造になります。AI に「見出しは ## から始めてください」と指示しておくか、貼る前に一段下げます。

目次[:contents] と書いた位置に目次が入ります。これは Markdown ではなくはてな独自の記法なので、AI に出力させるのではなく自分で足します。

見たままモードには、装飾済みのものを貼る

見たままモードは WYSIWYG エディタです。ここに Markdown をそのまま貼ると、##** も文字として表示されます。

このモードを使っている場合は、HTML に変換してから「HTML編集」タブに貼るのが確実です。このサイトの Markdown変換ツール の「HTML」タブで変換したものを、見たままモードの「HTML編集」に貼り付ければ、装飾が反映された状態になります。

はてな記法モードには、はてな記法に変換して貼る

はてな記法モードは、Markdown とは別の独自記法です。見出しは *、太字は ''' で囲み、表は |*見出し| という書式になります。Markdown をそのまま貼っても解釈されません。

同じ変換ツールの「はてな記法」タブで変換できます。見出しは Markdown の ## がはてなの *(大見出し)に対応するよう調整してあります。

WordPressの場合

WordPress は現在ブロックエディタ(Gutenberg)が標準です。こちらは、はてなブログとは事情が違います。

ブロックエディタは、実はMarkdownを部分的に解釈する

意外と知られていませんが、ブロックエディタは入力時のショートカットとして一部の Markdown を解釈します。空の段落ブロックで ## と打つと見出しブロックに変わり、- と打つとリストブロックになります。

ただしこれはキーボードで入力したときの挙動で、貼り付けたときは働きません。長文を貼ると、記号を含んだ段落ブロックが1つできるだけです。

貼り付けるならHTMLに変換する

確実なのは HTML に変換して貼る方法です。

  1. Markdown 変換ツールの「HTML」タブで変換します
  2. ブロックエディタの右上メニュー →「コードエディター」に切り替えます
  3. そこに HTML を貼り付けます
  4. ビジュアルエディターに戻します

コードエディターから戻すと、WordPress が HTML を解釈してブロックに分解してくれます。<h2> は見出しブロック、<table> はテーブルブロック、<ul> はリストブロックになります。

この方法だと、表がテーブルブロックとして入るのが大きな利点です。あとからセルの追加や列幅の調整ができます。

Classicエディタを使っている場合

Classic エディタなら「テキスト」タブに HTML を貼れば同じことができます。ビジュアルタブに Markdown を直接貼るのは避けてください。

両者に共通する3つの落とし穴

1. 見出しレベルがずれる

はてなブログも WordPress も、記事タイトルが <h1> です。本文の見出しは <h2> から始めるのが構造として正しく、検索エンジンにも読み取りやすくなります。

AI は指示しないと #(h1)から書き始めることがあります。プロンプトに次の1行を入れておくと防げます。

見出しは h2(##)から始めてください。h1 は使わないでください。

2. 表が横にはみ出す

Markdown の表をそのまま HTML にすると、列が多い場合にスマートフォンで横にはみ出します。記事全体が横スクロールする状態になり、読みにくいだけでなく Core Web Vitals の評価にも影響します。

対策は、表を overflow-x: auto を指定した要素で囲むことです。テーマによっては自動で処理してくれますが、そうでない場合は自分で囲む必要があります。列が4つを超えたら確認する、と決めておくとよいでしょう。

3. 全角スペースが残る

日本語で指示したとき、AI はインデントや位置合わせに全角スペースを使うことがあります。ブラウザ上では半角との区別がつきにくいのですが、記事として公開すると不自然な空きになります。

Markdown 変換ツールには全角スペースを半角に置き換えるオプションがあり、既定で有効にしてあります。コードブロックの中身は意味が変わる可能性があるため、あえて処理していません。

貼ったあとの最終確認

公開前に、次の3点だけ確認してください。

プレビューをスマートフォン幅で見る:表と長いコードブロックのはみ出しは、ここでしか気づけません。

見出しの階層に飛びがないかh2 の次に h4 が来ていないか。AI の出力ではよく起きます。

AI が書いた事実関係:数値、固有名詞、日付は、貼る前に必ず確認します。記事として公開する以上、内容の責任は書いた側にあります。ツールが直せるのは形式だけです。

この記事で使ったツール