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

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

こんにちは、WPホームページ研究所の運営サポートチーム(@WP_LABO)です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報だけでなくお好みの機能をいただければ専属スタッフが心を込めて真摯に対応させていただきます。お気軽にお問い合わせください。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください

💻ウェブサイト運営でお困りの方へ

⇒ WordPressの設定ミスを即日で解決  安心の定額サポート