ブログについて

WordPressでnote埋め込み時の空白をなくす解決法

WordPressとnoteで日々情報を発信しているめりーです。

この記事では、

WordPressブログにnoteのリンク(iframe)を埋め込むと空白が出来てしまった!

とお困りの方に向けて、非常に簡単な解決策をお伝えします。

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

まずは、noteの記事をWordPress記事内に埋め込む方法をおさらい!

step
1
note記事の埋め込みコードをコピーする

埋め込みたいnoteの記事ページを開き、コンテンツの一番下の「・・・」をクリックします。

出てきた「サイトに貼る」をクリックすると、

埋め込み用のコードが表示されるのでコピーします。

step
2
コードをWordPress投稿編集画面にペーストする

WordPressの投稿編集画面(テキストモード)を開き、記事を埋め込みたい箇所にコードを貼り付けると、簡単にブログ内にnoteを埋め込むことが出来ます!

って、あれ?なんだか謎の空白が・・・

こういう仕様だと言われれば受け入れるしかないけれど、それでもなんだか気になる!せめて下の余白だけでも解決したい!

そこで、ここからはこの空白をサクッと解決する方法をご紹介します。

埋め込み時の空白をなくす解決策

ネットで調べた情報によると、noteの埋め込みコードは「iframe」を使用していて、問題を解決するには追加CSSで対処するしかなさそう…

でも残念ながら、その通りに実行しても空白がなくならないんです。

そんな時、コードのある箇所に目を向けました。

width(幅)height(高さ)です!

この部分を

width(幅):494→800
height(高さ):400→250

に変更すると、

おお!!空白がなくなりました。

※お使いのテーマによって、ちょうど良い幅や高さは異なるので、ご自身で確認しながら数値を調整してください。

そもそもの原因を究明することは出来ていませんが、今のところ何の問題もなさそうなので、とりあえず解決。

また不具合が生じたり、原因を解決出来たりした場合には、ご報告します。

まとめ

下手にCSSをいじるよりも、まずはコードの要素をいじってみよう!

というわけで、今回の記事は以上です。

最後までご覧いただきありがとうございました。

-ブログについて

© 2023 めりー先生の音楽準備室