どうも、タヌスケです。
今回はBlog(Wordpress)の記事内にNoteのリンクを埋め込む方法について紹介します。
NoteとBlogを効率よく見てもらうためにリンクが貼れると便利ですよね?
ところお互いのURLを記事に貼り付けるだけではできませんでした。
この記事では綺麗に表示される方法をご紹介します。
BlogはWordpressで紹介しておりますので、それ以外のBlogサービスをご利用の方は各々の環境でアレンジしていただければと思います。
Note→Blog
まずはNoteの記事にBlogのリンクを貼り付ける方法です。
1.貼り付けたい場所にリンク先のURLをペースト。
![](https://sinzakki.com/wp-content/uploads/2021/03/E3886BE0-BD6A-4713-A2BE-0BEBCA33C88C-1500x505.jpeg)
以上です。
![](https://sinzakki.com/wp-content/uploads/2021/03/4DA3FF61-4566-4B81-A114-CABF677E18FD.jpeg)
めちゃくちゃ簡単です。説明不要でした。
Blog→Note
今度はBlogにNoteへのリンクを埋め込む方法です。
こちらは少し作業が必要です。
1.リンクのコードを発行する
ブラウザ版のNoteを参照ください。(アプリ版ではダメでした)
記事の最後に表示されるプロフィールの上。
♡+… の … を押すと サイトに貼る と出ます。
![](https://sinzakki.com/wp-content/uploads/2021/03/E4B2D241-7FB0-428B-83FE-86E78756463D.jpeg)
2.コードをコピー
記事をサイトに貼るためのコードが表示されます。コピーします。
![](https://sinzakki.com/wp-content/uploads/2021/03/F0CDBB4E-91E5-4E33-8F72-4ECC5A46E2AD.jpeg)
3.Blogに張り付ける
今度はBlog側での操作です。
貼り付けしたい場所で先ほどコピーしたコードを貼り付けます。
WordPressの場合は【カスタムHTML】のブロックを挿入します。
コードを貼り付けします。
![](https://sinzakki.com/wp-content/uploads/2021/03/D043902D-D127-43CF-AE1C-38E8666B2244-1500x591.jpeg)
作業としては以上です。
反映されているかどうかを確認しましょう。
記事のプレビューを見ると綺麗に表示されました。もちろんリンクも機能しています。
Note記事のURLではリンクできません。
ここでは、Note記事へのURLを探すときにありがちな間違いを紹介します。(実際に私がやってしまった)
画像はiPad版のNoteアプリの画像ですが、リンク用のURLをコピーするために右上のメニューボタン(四角形に上矢印の図形)を押しがちです。
【URLをコピー】したものを【埋め込みURL】のブロックに貼り付けます。
![](https://sinzakki.com/wp-content/uploads/2021/03/ADA6ABFD-9E32-44AF-B87E-C7373CE71BDC-1500x667.jpeg)
しかし、URLがそのまま掲載されてしまいました。
![](https://sinzakki.com/wp-content/uploads/2021/03/5A3455CF-E7AE-40E5-9A9B-41687E017FF7.jpeg)
理由はわかりませんが、URLではなくリンクコードを貼り付ける必要があります。
またコードはNoteのアプリ版では発行されません。ブラウザ版でチャレンジしてみてください。
まとめ
今回は、Note記事をBlogで紹介する場合の手順を紹介しました。
作業自体は簡単ですが、初見ではわかりにくいですよね。
今回紹介した内容のおさらいです。
この方法を使って、NoteとBlogの両立に励みましょう!