ホームページにnoteを埋め込み活用する方法完全ガイド

2025 11/29

2025/11/29

はじめに

本書の目的

この章では、noteや投稿を自分のホームページに安全で見栄えよく埋め込むための全体像を示します。基本からWordPressでの実装、高度な自動更新、さらにGoogleマップや関連記事の埋め込みまで順を追って解説します。

誰向けか

HTMLやサイト運営の基本を知っている方を想定しています。初心者の方もわかるように、具体例と手順を丁寧に説明します。

前提条件

埋め込む記事の公開状態（公開・限定公開）を確認してください。
自分のサイトに編集権限があることを確認してください。

注意点

埋め込み先のデザインやスマホ表示に配慮してください。外部コンテンツの仕様変更で表示が崩れることがあるため、定期的に確認をおすすめします。

本書の読み方

次章で基本的な埋め込み方法を手順付きで紹介します。実際に試しながら読み進めると理解が深まります。

基本的な埋め込み方法

ホームページにnote記事を埋め込む最も簡単な方法は、noteが提供する埋め込みコードを使うことです。手順は次の通りです。

埋め込みたいnoteの記事ページを開く。
記事下部の「♡ + …」の「…」をクリックし、【サイトに貼る】タブを選ぶ。
表示されたHTMLコードをコピーして、自分のホームページのHTMLに貼り付ける（例えば、ヘッダや本文の編集画面のHTMLモードで挿入）。

noteの埋め込みはiframeを使います。YouTubeやSNS投稿と同じ感覚で扱えますので、基本はそのまま貼れば表示されます。

ポイント（レスポンシブ対応）
– そのままだと幅や高さが固定されている場合があります。スマホで見やすくするには、親要素に幅100%を指定してiframeを比率で調整する方法が便利です。例:

よくあるトラブルと対処
– 表示されない: コピーしたコードの一部が省略されていないか確認してください。
– セキュリティ（X-Frame-Options）で表示できない場合は、サーバー側やnoteの仕様に依存します。その場合は、リンクでの誘導を検討してください。

この基本方法は手軽で導入しやすく、まずはここから試すことをおすすめします。

WordPress（ワードプレス）への埋め込み方法

WordPressでnote記事を表示する主な方法を、初心者にも分かりやすく説明します。用途に合わせて選んでください。

方法1：ウィジェットに埋め込む（サイドバーやフッター）

note記事側で「埋め込みコード（iframeやscript）」をコピーします。
WordPressの管理画面で「外観」→「ウィジェット」または「外観」→「カスタマイズ」→「ウィジェット」を開きます。
サイドバーやフッターの領域に「カスタムHTML」または「テキスト」ウィジェットを追加します。
コピーした埋め込みコードを貼り付けて保存します。
ポイント：ブロックエディタを使う場合は「外観→ウィジェット」ではなく、ウィジェット編集画面で「カスタムHTML」ブロックを選びます。テーマによってはscriptの埋め込みが制限されることがあります。

方法2：メニューにnoteへのリンクを追加する（分かりやすい導線）

管理画面で「外観」→「メニュー」を開きます。
「カスタムリンク」を選び、note記事のURLを貼り付けます。リンク文字（例：「note記事」）を入力して「メニューに追加」をクリックします。
メニュー位置（ヘッダーやフッター）を設定して保存します。
補足：固定ページを作ってそこにnoteの埋め込みを置き、その固定ページをメニューに追加する方法もあります。新しいタブで開く設定にして外部ページと明示すると親切です。

トラブル対処の簡単なヒント

表示が崩れる場合は幅を100%にするか、カスタムCSSで調整します。
埋め込みが反映されないときはテーマやセキュリティプラグインの設定を確認してください。

高度な埋め込み方法：JavaScript（RSS-to-JSON）を使用した自動更新

概要

JavaScriptとRSS-to-JSONサービスを使うと、noteの新着記事を自動でホームページに反映できます。手順は簡単です。noteのRSSフィードURLを用意して、RSS2JSONのAPIでJSON化したデータを取得し、HTMLに表示します。

手順（要点）

RSSフィードURLを取得する
noteのプロフィールや記事一覧のURLの末尾に「/rss」を付けることで取得できます（例：https://note.com/ユーザー名/rss）。
RSS-to-JSONのエンドポイントを作る
無料サービスなら https://api.rss2json.com/v1/api.json?rss_url=RSS_URL を使います。APIキーがある場合は &api_key=YOUR_KEY を追加します。
HTMLを用意する
表示用のdivを用意します。例：
JavaScriptで取得して表示する
fetchでAPIからJSONを取り、items配列をループしてタイトル・リンク・日付などを作成します。自動更新は setInterval で数分ごとに再取得します。

サンプル（簡単な例）

<div id="note-list">読み込み中...</div>
<script>
const RSS = 'https://note.com/ユーザー名/rss';
const API = 'https://api.rss2json.com/v1/api.json?rss_url=' + encodeURIComponent(RSS);
async function load(){
  try{
    const res = await fetch(API);
    const data = await res.json();
    const el = document.getElementById('note-list');
    el.innerHTML = data.items.map(it=>`<p><a href="${it.link}" target="_blank">${it.title}</a> <small>${new Date(it.pubDate).toLocaleDateString()}</small></p>`).join('');
  }catch(e){document.getElementById('note-list').textContent='表示できません';}
}
load();
setInterval(load, 10*60*1000); // 10分ごと
</script>