WordPressで記事内に貼った他の記事がはみ出てしまった場合の対策方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

ワードプレスでは記事内に他の記事のURLを貼ると自動で認識される機能があります。本日はそんな便利機能についてカンタンに解説させていただきます。またはみ出た際の対策法にも触れていきます。

WordPressで記事内に貼った他の記事がはみ出てしまった場合の対策方法

まずはアドレスバーでURLをコピー

たとえば今作成している画面で「他の記事URLを直接貼り付ける」と下記のように自動的に記事が読み込まれます。まずは貼り付けたい記事のURLをアドレスバーでコピーして記事内にそのまま貼り付けます。

実際に投稿エディター内で貼り付けた例

貼り付けは右クリックで行えます。下記は例として現在の入力画面で貼り付けてみました。同じ画面なので少しわかりづらいですが、記事を投稿する画面(エディター)内ということがわかりますよね。

すると記事内でURLを自動認識してレイアウト調整がかかりました。投稿エディター(システム側)がワードプレスのURLだと認識するため何もしなくても下記のように表示されます。すごい機能ですよね。

スマホで記事がはみ出た場合の対策方法

スマートフォンで見ると下記のようにはみ出る場合があります。原因は「横幅の指定」がないからです。

そんな時は「style.css」に下記のCSSを追記すればOKです。

/* 記事読込み時のレイアウトはみ出し防止対策 */
iframe{
	max-width: 100%;
}

右クリックでページを更新するとさきほどはみ出ていた部分が綺麗に収まりましたね。横幅がフィットした分、少し縦に長く表示されています。以下をご覧ください。

貼り付けた記事を削除する方法

もし貼り付けた記事を消したい場合はカーソルを合わせて「×ボタン」を押せば削除。

記事をエディター内で貼る方法と、スマートフォンではみ出た際の対策方法は以上です。

まとめ

記事のなかで別の記事を紹介する際に「URLを貼り付ける」だけで自動表示される機能がとても便利です。ただ、導入テーマによっては貼り付けが想定されていないためCSSを追記する必要があります。もし運営しているサイトでレイアウトが崩れてしまうようであればCSSのカスタムをお試しくださいませ。

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録されているプラグインだけでは機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグイン無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する