ブログの悩みを解決した時に「noteは優秀」とあらためて気づく【note記事の貼り方】

まりこ🐈‍⬛寄り道ヨーロッパ旅

2025年6月20日 09:40

自分のブログ内でnote記事がきれいなブログカード形式で表示されない…

WordPressを使って書いているブログでの悩みはこれでした👆

解決策は、
noteの記事を貼る時は「ブログカード」ではなく「カスタムHTML」を使うことです。

難しいことではありません。
でも、「他の記事を貼るときはブログカード」と思い込んでいたので、気づくのに1年かかってました💦

🟦ブログカードとは？

「ブログカード」とはリンクの設置のしかたの1つです。

🖊️URL文字列だけのテキストリンク
https://note.com/ma_r1_ko
リンク先の内容が分かりにくいです。

🖊️タイトルなどを書いてそこにリンクを貼る
まりこのnoteアカウント
リンク先の内容がすこし分かりやすくなりました。

🖊️ブログカード形式のリンク

記事見出しの画像、タイトル、本文が見えるのでリンク先の内容がある程度分かります。
読者さんに興味を持ってもらいやすいと思います。

🟦noteで記事を書く場合はカンタン！

本文作成画面でURLを貼るだけ。

きれいなブログカード形式で表示されます。

上の例のように、note内の記事(内部リンク)を貼るのもOK

下の例のように、note外の記事(外部リンク)を貼るのもOK

noteを始めたときは、
シンプル過ぎて物足りないかも？
と心配していましたが。

本当によく使う機能はそろっています。

🟦WordPressの場合はすこし面倒

次のような方法があるようです。

ブログカード機能があるテーマを使う
プラグインを使う
自分で作る

私はプログラミング的なことは全然分かりません。
「ブログカード機能つきのテーマ」一択！
（威張るとこじゃない）

利用しているのは、ワードプレスの無料テーマ「Cocoon(コクーン)」。
以下、コクーンのブログカードを使う場合の説明です。

🟦内部リンクの場合

自分のブログの記事を自分のブログ内の他の記事に貼りつけるのは問題なし。ブログカード形式でいつも成功します。

🟦外部リンクの場合

自分のブログ外、たとえば『4トラベル』の旅行記などは表示されます。

不安定なのはnoteの各記事。
ブログカード形式できれいに表示されたり、されなかったりします。

【成功した時】

【失敗した時】

URLがそのまま枠内に表示されます。
画像もブラウザ画面のスクショのようなものになります。

🟦気づかなかったのは思いこみのせい

「記事を貼る＝ブログカード」と思い込んでいたので、はじめてnoteの記事を貼って表示が変になったときから、「ブログカードの不具合」を直す方法ばかり調べていました。

Cocoonのフォーラムで似た質問を見つけたのでその通りやってみました。
うまくいったように見えましたが、しばらく経って見てみるとまた表示が崩れていたり。

これで何時間も無駄にしました。
あきらめてしばらく放置していたのですが、
週末に近所を歩いていた時にふと
「ブログカードにこだわる必要ないかも」
と思いつきました。
しばらく放置したことで頭が切り替わったのかも。

思いこみってダメですね。
そのまま突き進んでも私の知識量では解決できなかったでしょうし。

🟦「URLを貼る方法」で調べてみると

URLをそのまま貼る
ブログカードを使う
カスタムHTMLを使う

この辺りが使えそうで、一つずつ試してみました。

1.URLをそのまま貼る

WordPressの編集画面で本文のスペースにnote記事のURLをコピペすると下の画像のようになります。

note記事のURLをそのまま貼りつけると
「コンテンツを埋め込めませんでした」が気になる…

埋め込めませんでした　？
「このやり方ではダメということ？」と思いそうになりますが、
そのまま「リンクへ変換」を押すとテキストリンクになります。

編集画面ではこのようなテキストリンクになりますが、
プレビューで見るとブログカードと同じになります。

このやり方は、ブログを書き始めた最初にやってみた気がします。
プレビューではブログカードになっていることに気づかず、このやり方はうまくいかないと思い、それ以来2の方法ばかり使っていたのだと思います。

この方法で貼った場合はシンプルな枠線だけのブログカードです。

2．ブログカードを使う

私がいままで使っていた方法です。

ブログカードを使うと「参考記事」というような装飾を枠線に追加することもできます。（下のスクショの赤丸部分)

装飾が不要な時は、ブログカードをよびださなくても
URLを貼りつければよかったのですね。
今になって気づきました。

３．カスタムHTMLを使う

作業1：ブラウザ版で貼りたいnote記事を開きます。

note記事のURLではなく記事の一番下を見ます。
右端の赤丸で囲った「・」が3つ並ぶアイコンをクリックします。
ここにある「サイトに貼る」を使います。

アプリで見た場合は3点リーダーはありませんのでブラウザで開きます。

ブラウザ版でログインしているときは、自分のアカウントのホーム画面に並ぶ自分の記事のタイトルの下にも3点リーダーはあります。
ここなら記事を開いて下までスクロールする手間は省けます。

アプリで見た時は、ホーム画面にも記事下にも「サイトを貼る」はありません。

iOS版も同じかな？
こういう時、どちらも試すためにスマホが2台欲しい！！

「記事をサイトに貼る」という画面にあるコードをコピーします。

作業2：ワードプレスの本文編集画面へいきます。
「カスタムHTML」をよびだして、コピーしたコードを貼りつけます。

プレビューを見るとキレイに表示されました！

🟦カスタムHTMLを使った時の問題点

ブログカードの記事とカスタムHTMLの記事を並べると
左が揃いません！

ちなみにスマホで見た場合は画面が狭いので揃います。

見出し画像が左と右になってしまいますが、Cocoonのブログカードの設定で変更できるので画像をnoteの形式に合わせて右に揃えることは可能。
Cocoonって無料テーマだけど機能豊富です。

統一感を壊さないように、2つを並べないよう工夫することで対応することにしようと思います。

最初に「気づくのに1年かかりました」と書きましたが、すみません、盛りました。
(ブログを始めて1年経ってやっと知ったことではありますが…)

最近までnoteとWordPressは分けていたのでnoteの記事を貼ってみたことがなくて、その悩み自体がなかったのです。

下の「ブログ1年振り返り記事」を書いた頃からnoteとブログをもっとシームレスに使っていこうと、リンクを貼るようになりました。
(なので2ヵ月ほどの悩みですね💦)

しばらくはnoteとWordPressの併用で行くつもりでした。
でも、WordPressにnote記事をもってこようとするとうまくいかない・・・。
『note一本にしなさい』というお告げ！？
とあきらめかけたこともありましたが、なんとかなりそうです。

WordPressは旅ブログ(スイス個人旅行)に特化。
noteでは併用してみての実体験、感想など、旅だけでなくブログ運営に関する思いなども書いていきたいなと思います。

WordPressやってる人ともつながりたいです。

🟦noteならうまくいく！けど…

くりかえしになりますが、noteであればURLを貼りつけるだけ。
このとおり、内部リンクも外部リンクもきれいに揃います。

このブログカードの件だけとってみても
noteってとても良いです！優秀！
シンプル　イズ　ベスト

余計な機能はないので迷うことなく書くことだけに集中できます。

じゃあnoteに引越一択では？

そうなのですが…

余計なアレコレも楽しみたい私です。

なにかしたいことがあるとき、使いたい機能があるとき、
みなさんはどうしてますか？
とことん調べますか？あきらめますか？
他の方法を考えますか？

あと、noteで使いたいけど使えない機能が1つあるんですよね。
「noteにこの機能があればなぁ」というのもまた別の記事にしたいです。

記事にしてみました。
「表作成」機能がほしいのです！