<
BLogとNote握手

WordPressにNoteの記事を埋め込む方法を解説

BLogとNote握手

どうも、タヌスケです。

今回はBlog(Wordpress)の記事内にNoteのリンクを埋め込む方法について紹介します。

NoteとBlogを効率よく見てもらうためにリンクが貼れると便利ですよね?

ところお互いのURLを記事に貼り付けるだけではできませんでした。

この記事では綺麗に表示される方法をご紹介します。

BlogはWordpressで紹介しておりますので、それ以外のBlogサービスをご利用の方は各々の環境でアレンジしていただければと思います。

広告

Note→Blog

まずはNoteの記事にBlogのリンクを貼り付ける方法です。

1.貼り付けたい場所にリンク先のURLをペースト。

以上です。

めちゃくちゃ簡単です。説明不要でした。

Noteにブログ記事のリンクしたい場合は、直接URLを貼り付けるだけ
広告

Blog→Note

今度はBlogにNoteへのリンクを埋め込む方法です。

こちらは少し作業が必要です。

1.リンクのコードを発行する

ブラウザ版のNoteを参照ください。(アプリ版ではダメでした)

記事の最後に表示されるプロフィールの上。

♡+… の … を押すと サイトに貼る と出ます。

広告

2.コードをコピー

記事をサイトに貼るためのコードが表示されます。コピーします。

3.Blogに張り付ける

今度はBlog側での操作です。

貼り付けしたい場所で先ほどコピーしたコードを貼り付けます。

WordPressの場合は【カスタムHTML】のブロックを挿入します。

コードを貼り付けします。

作業としては以上です。

反映されているかどうかを確認しましょう。

記事のプレビューを見ると綺麗に表示されました。もちろんリンクも機能しています。

ブログにNote記事を掲載する場合は、ブラウザ版のNoteからのコードが必要

Note記事のURLではリンクできません。

ここでは、Note記事へのURLを探すときにありがちな間違いを紹介します。(実際に私がやってしまった)

画像はiPad版のNoteアプリの画像ですが、リンク用のURLをコピーするために右上のメニューボタン(四角形に上矢印の図形)を押しがちです。

【URLをコピー】したものを【埋め込みURL】のブロックに貼り付けます。

しかし、URLがそのまま掲載されてしまいました。

理由はわかりませんが、URLではなくリンクコードを貼り付ける必要があります。

またコードはNoteのアプリ版では発行されません。ブラウザ版でチャレンジしてみてください。

まとめ

今回は、Note記事をBlogで紹介する場合の手順を紹介しました。

作業自体は簡単ですが、初見ではわかりにくいですよね。

今回紹介した内容のおさらいです。

Noteにブログ記事のリンクしたい場合は、直接URLを貼り付けるだけ
ブログにNote記事を掲載する場合は、ブラウザ版のNoteからのコードが必要

この方法を使って、NoteとBlogの両立に励みましょう!

>About Sin-Zakki

About Sin-Zakki

本ブログは文字通り雑記ブログです。
個人的な趣味を気の向くまま記事にしております。
あくまで個人的意見ですので、話半分にお願いします。