WordPressのGutenbergにNotionで書いた記事を貼り付ける

未分類

前説

みなさん、Notion使ってますか? 私は半年前に課金したEvernoteを解約し、Notionに移行しました。だって、使い勝手良いんですもん。日本語版じゃないのが欠点ですが(2022年春にはweb、アプリともに日本語対応になってます。ただ、アプリとIMEとの相性が悪く変換候補が左上に出てるのが難点)、/入れれば選択欄が出てくるので問題なし。

で、私は週に一度はブログを書きます。え? それにしてはこのサイト記事が少ないって? そうです、会社のブログを書いているんです。だから個人ブログまで手が回りません。

で、前はEvernoteに下書きしてそれを、ブロックごとにコピペしていたのです。面倒くさい。でも、Notionはマークダウン形式で出力できて、WordPressのGutenbergはマークダウンの記入が出来ることに気づきました。

一気にアップロードできればもっと良いんですが、数手間でコピペできるので、今回はその紹介を。

Notion側

※NotionのページそのものはWebに公開することができるので(実際、求人サイトとか作ってるスタートアップ会社があります)、まあ読み流してください。

Gutenbergはタイトルは自動で入るわけではないので、マークする必要はないです。

で、記事をExportします。フォーマットが選べるのでMarkdown & CSVを選びます。

%E9%9B%91%E8%A8%98%E5%B8%B3%20d7ff370edd14466e9a7c6f72ed22b347/_2021-03-31_112148.png

%E9%9B%91%E8%A8%98%E5%B8%B3%20d7ff370edd14466e9a7c6f72ed22b347/_2021-03-31_112211.png

zipで出力されるので解凍します。

.mdファイルなので、適当なアプリに関連付けさせてください。私はVSCodeに関連付けてます。

この、.mdファイルを表示します。

Gutenberg側

アイコンがでないという指摘がありました。Jetpackというプラグインを入れると出てきます。お勧めのプラグインなので入れるのが吉。

タイトルだけ別に入れ、左上の「ブロックの追加」を押します。

%E9%9B%91%E8%A8%98%E5%B8%B3%20d7ff370edd14466e9a7c6f72ed22b347/_2021-03-31_112918.png

すると、緑のMarkdownというアイコンが出るので押してください。

%E9%9B%91%E8%A8%98%E5%B8%B3%20d7ff370edd14466e9a7c6f72ed22b347/_2021-03-31_113118.png

以下のエリアに.mdの内容をコピペして流し込んでください。

%E9%9B%91%E8%A8%98%E5%B8%B3%20d7ff370edd14466e9a7c6f72ed22b347/_2021-03-31_113321.png

プレビューみると変換されてますね

%E9%9B%91%E8%A8%98%E5%B8%B3%20d7ff370edd14466e9a7c6f72ed22b347/_2021-03-31_113523.png

画像がリンクになってるので、一気にアップロードできるわけじゃないです。画像は別にアップロードしなければいけません。 これはちょっと面倒くさい。画像呼び出すと、一番下部に表示されるので、画像上で右クリクックしてURLを取得して、該当の、

![%E9%9B%91%E8%A8%98%E5%B8%B3%20d7ff370edd14466e9a7c6f72ed22b347/_2021-03-31_113523.png](https://mike2mike.xyz/wp-content/uploads/2021/03/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2021-03-31-113523.png)

と言う風に()の中にURLを貼り付けます。そして、下部の画像は削除。

%E9%9B%91%E8%A8%98%E5%B8%B3%20d7ff370edd14466e9a7c6f72ed22b347/_2021-03-31_114241.png

終わりに

こんな感じです。すべて画像共々アップロードできればいいのですが、まあ、文字装飾をコピーできるだけもいいとしましょう。今まで、Gutenberg側でいちいちブロックごとに設定してたのですが、これだけでも楽になります。

コメント

タイトルとURLをコピーしました