WordPress ブログカードをレスポンシブ対応にする方法

WordPress ブログカードをレスポンシブ対応にする方法

ワードプレスで投稿記事の埋め込み「ブログカード」をレスポンシブ対応にする方法を紹介します。

投稿記事の埋め込み「ブログカード」をレスポンシブにする方法

ワードプレスの投稿で埋め込みをした「ブログカード」を、CSSでレスポンシブにする方法を紹介します。ブログ投稿で記事を埋め込みして、スマホ表示で見た時にブログカードの横幅がはみ出ていたりする時なんか試してみて下さい。

下の埋め込みした記事「ブログカード」は、CSSでレスポンシブにしているのでスマホで見ても横幅がはみ出さないようになっています。埋め込みをしたブログカードが、レスポンシブに対応させていないとレイアウトが崩れてしまうので、レスポンシブにしておきましょう。

ワードプレスの投稿で埋め込みをしたブログカードをレスポンシブにする方法は、「CSS」に下のコードをコピペするだけでOKです!ワードプレスの管理画面のメニューから「外観」の「CSS編集」を選択して「追加CSS」にコードをペーストして保存すれば完了です。とても簡単な作業でレスポンシブにする事ができます。

.wp-embedded-content {
max-width: 100%;
}

内部リンクは「ブログカード」と「テキストリンク」どっちが良いか

ワードプレスの投稿記事は、投稿の編集画面で記事の「URL」をペーストするだけで簡単に埋め込む事ができます。ページビューを増やしたい方は、ブログに訪れたユーザーをサイト内で回遊してもらう為にも「ブログカード」の設置を積極的にしておきましょう。

ちなみに、SEOの事を考えた場合は「テキストリンク」を使った内部リンクを増やす方が良いみたいです。テキストリンクの方がクリック率が高いと言われていますが、視覚的にサムネイルのインパクトが強いのであればブログカードでも良いと思います。

          

関連記事


Written by

Videographer / Web Designer 動画編集・映像制作(Final Cut Pro X,YouTube)Webデザイン・HP制作(WordPress,SEO,アフィリエイト)一眼レフカメラ・ドローン(Vlog撮影,一眼動画撮影)などの情報を「松岡高宏」がブログで発信します。

ほしい物リスト