はじめに
「noteの記事を自分のホームページにも表示したいけれど、どうやって埋め込めばいいの？」
「noteを更新するたびに、ホームページ側も自動で最新記事に切り替えられる？」と迷っていませんか。
会社や店舗のホームページを運営しながらnoteでも情報を発信していると、同じ内容をホームページへ毎回手作業で追加するのは手間がかかりますよね。
この記事では、noteの1記事をホームページに表示する方法から、RSSを利用して記事一覧を自動更新する方法まで解説します。
noteをホームページに埋め込む方法は2つ
noteをホームページに埋め込む方法は、表示したい記事の数と更新方法によって2つに分かれます。
まずは、1記事だけ表示する方法と新着記事を自動表示する方法をそれぞれ確認していきましょう。
1記事だけ表示するなら「サイトに貼る」を使う
noteの特定の記事だけをホームページに表示したい場合は、記事画面の「サイトに貼る」を使います。
表示用の埋め込みコードを取得して掲載したい場所に貼り付け、ページを公開したあとに正しく表示されているか確認しましょう。
新着記事を自動表示するならRSSを使う
noteの新着記事をホームページへ自動表示したい場合は、RSSを利用します。
noteのRSSフィードURLをホームページ側で読み込むように設定しておけば、新しい記事を公開したときに新着情報として反映できます。
noteの1記事をホームページに埋め込む手順
noteの特定の記事をホームページに表示する場合は、記事ごとに用意されている埋め込みコードを利用します。
まずnoteの記事画面から「サイトに貼る」を選び、表示された埋め込みコードを取得します。次にホームページの表示したい位置へコードを貼り付け、保存または公開します。
最後に実際のページを開き、記事のタイトルや画像などが正しく表示されているか確認しましょう。
noteで「サイトに貼る」から埋め込みコードを取得する
ホームページに表示したいnoteの記事を開き、共有メニューから「サイトに貼る」を選択します。
記事を表示するための埋め込みコードが表示されたら、省略せずにそのままコピーしましょう。
取得したコードをホームページに貼り付ける
コピーした埋め込みコードを、ホームページ内の表示したい位置に貼り付けます。
WordPressの場合は、投稿や固定ページの編集画面にある「カスタムHTML」ブロックへ貼り付け、ページを保存または公開します。
埋め込み後の表示を確認する
ページを公開したら実際のホームページを開き、noteの記事が正しく表示されているか確認します。
タイトルや画像が表示され、レイアウトに問題がなければ埋め込みは完了です。
noteの更新情報をRSSでホームページに表示する方法
noteで新しい記事を公開するたびにホームページ側も更新したい場合は、RSSフィードを利用します。
ここでは、RSSフィードURLの取得方法とホームページで読み込む手順を順に確認していきましょう。
noteのRSSフィードURLを取得する
noteのRSSフィードURLは、クリエイターページのURL末尾に「/rss」を付けて取得します。
作成したURLをブラウザで開き、記事タイトルや公開日時などが表示されれば確認は完了です。
ホームページ側でRSSを読み込んで表示する
取得したRSSフィードURLを、ホームページ側のRSS読み込み機能に設定します。
WordPressではRSSに対応したブロックやウィジェットへURLを入力し、公開後にnoteの新着記事が正しく表示されているか確認しましょう。
WordPressでRSSを設定する方法や、表示件数などを詳しく確認したい方は、こちらも参考にしてください。
▶WordPressでRSSフィードを表示する方法は？設定手順をわかりやすく解説
noteをホームページに埋め込めないときの確認ポイント
noteの埋め込みコードを設定しても記事が表示されない場合は、まずコードを貼り付けた場所を確認します。
ここでは、コードの貼り付け場所とスマホでの表示幅について順に確認していきましょう。
埋め込みコードを貼り付ける場所を確認する
noteの埋め込みコードが表示されない場合は、コードを貼り付けた場所を確認します。
WordPressでは通常の文章入力欄ではなく、「カスタムHTML」ブロックなどHTMLコードを入力できる場所に貼り付けましょう。
カスタムHTMLブロックの使い方が分からない場合は、コードの貼り付け方から確認しておくと安心です。
▶WordPressのカスタムHTMLブロックとは？使い方とコードの貼り付け方法を解説
スマホで表示が崩れる場合は表示幅を確認する
パソコンでは問題なくても、スマホで横にはみ出す場合は埋め込み部分の横幅を確認します。
実際にスマホでページを開き、記事タイトルや画像が画面内に収まっているか確認しておくと安心です。
まとめ
noteをホームページに表示するときは、掲載したい内容に合わせて方法を選びましょう。
特定の記事だけを載せるなら「サイトに貼る」の埋め込みコード、新着記事を自動で反映したいならRSSを使う方法が便利です。
うまく表示されないときは、コードを貼り付けた場所やスマホでの表示も確認してみてください。
目的に合った方法を選べば、noteの記事をホームページでも見てもらいやすくなります。
