ワードプレスの投稿の「埋め込み」をレスポンシブにする方法を紹介します。
投稿の「埋め込み」をレスポンシブにする方法
ワードプレスの投稿で「埋め込み」をしたモノを「CSS」でレスポンシブにする方法を紹介します。過去の記事をブログ投稿で埋め込みして、スマホ表示で見ると横幅がはみ出ていたりする時なんかに使えます。
下の埋め込みした過去記事は、「CSS」でレスポンシブにしているのでスマホで見ても横幅がはみ出さないようにしてあります。「埋め込み」をレスポンシブに対応させていないとレイアウトが崩れてしまうので、レスポンシブにしておきましょう。
ワードプレスの投稿の「埋め込み」をレスポンシブにする方法は、「CSS」に下のコードをコピペするだけでOKです！ワードプレスの管理画面のメニューから「外観」の「CSS編集」を選択して「追加CSS」にコードをペーストして保存すれば完了です。とても簡単な作業で「埋め込み」をレスポンシブにする事ができます。
.wp-embedded-content {
max-width: 100%;
}ワードプレスの投稿は「YouTube」や「Twitter」などのURLをペーストするだけで埋め込む事ができるので、横幅がはみ出た場合にはこの「CSS」のコードでレスポンシブにしてみて下さい。ワードプレスの投稿の「埋め込み」をレスポンシブにする方法は動画で分かりやすく紹介していますので、チュートリアル動画をご覧下さい。
Videographer / Web Designer
動画編集・映像制作（Final Cut Pro X,YouTube）Webデザイン・HP制作（WordPress,SEO,アフィリエイト）一眼レフカメラ・ドローン（Vlog撮影,一眼動画撮影）などの情報を「松岡高宏」がブログで発信します。
