noteの記事を、簡単にWordPressに埋め込む方法

  •   
    noteのロゴ白

    こんにちは。自作したオリジナルテーマでWordPressを運営している、えひめのMiho(@ehimemiho)です!

    先日、「アメブロの記事を、簡単にWordPressに埋め込む方法」という記事を書きました。続いて今日は、noteの記事をWordPressに埋め込む方法について書きます。

    というのも、「ブログが書けないときに読んで良かった2つのnote」を書いたときにnoteの埋め込み方が分からず、困った経験があるからです。

    「だれもが創作をはじめ、続けられるようにすること」をミッションに掲げるnoteでは、毎日たくさんのコンテンツが公開されており、私も読んで「♡いいね」したり、コメントしたりしています。

    今日の記事が、noteをWordPressで簡単に美しく表示させたい方の参考になればうれしいです。

    noteを埋め込んだ時の見え方

    今回紹介する方法でnoteを埋め込むと、次ようなリンクカードとして表示されます。(「ブログが書けないときに読んで良かった2つのnote」で紹介した篠田真貴子さんのnote)

    埋め込んだカードはレスポンシブなので、パソコンやスマホサイズで各端末の幅に合わせて表示されます。アイキャッチやタイトルのほか、冒頭の本文が一部抜粋で載って見やすいですね♪

    埋め込む方法

    ①noteにログインした状態で、埋め込みたいnoteを表示させる

    WordPress埋め込むためにはnoteのアカウントを作ってユーザーになっていることが必要です。「読む専門で、noteはまだ書いてない…」状態でも大丈夫、貼り付け手順に進みましょう。

    noteコンテンツ

    ②note記事下に表示されている「・・・」をクリック

    「・・・」をクリックすると「サイトに貼る」が見えます。

    ③表示されるタグを全てコピーします。

    note埋め込みコード

    ③WordPressの表示したい所に、コピーしたタグをペーストする

    注意!「カスタムHTML」のブロックにしてコードを貼り付ける

    カスタムHTML
    ↑ペーストしたところ。
    プレビューに切り替えるとカードが表示される。

    通常のテキストと同じ「段落」に直接貼り付け場合は、レスポンシブではない小さめのリンクカードが表示されます(図の下、小さいカード)。

    このカードはレスポンシブではないようで、スマホサイズで幅がはみ出してしまいました。

    なので必ず「カスタムHTML」のブロックにコードを貼り付けましょう

    終わりに

    今日はWordPressにnoteを埋め込む方法を紹介しました。

    アメブロを埋め込む時と同じ、<iframe>タグを使用していますね。

    noteを引用して記事を書くならnoteで書けばいいじゃん、と思うかもしれませんが、今のところアウトプットは当ブログに集中させているため、この方法をとりました。

    WordPress初心者さんなど、どなたかの参考になればうれしいです。

    ではでは、また読みにきてくださいね!