apice-technologymemorandum

WORDPRESS (ワードプレス)リンクカードの使い方 ブログ初心者向け

WORDPRESS (ワードプレス)リンクカードの使い方 ブログ初心者向け



HTMLでの「リンクカード」とは、ウェブページにリンクを貼り付ける際に、視覚的にわかりやすく装飾されたリンク要素のことです。通常、タイトル、サムネイル画像、概要テキストが含まれるカード形式で表示されます。以下はリンクカードの主な特徴と実装方法について説明します。

リンクカードの特徴


視覚的に目立つ
サムネイル画像や枠線があることで、通常のテキストリンクよりもクリック率が高くなる傾向があります。

情報を簡潔に伝える
ユーザーがリンク先の内容を簡単に理解できるよう、概要テキストが含まれています。

レスポンシブ対応
多くの場合、モバイルやデスクトップなどの異なるデバイスで適切に表示されるよう設計されています。

リンクカードのHTML実装例
以下のコードは、基本的なリンクカードをHTMLとCSSで作成する例です:

html
コードをコピーする



リンクカードの利用例
ブログ記事のリンク
記事一覧ページで、各記事のリンクをカード形式で表示する。

製品紹介
ECサイトや製品カタログページで、製品情報へのリンクをカード形式で表示。

関連ページへの誘導
サイト内で他のページやカテゴリにユーザーを誘導するために利用。

リンクカードを活用する理由
ユーザーにリンク先の内容を視覚的に示し、興味を引きやすくする。
サイトのデザインを統一感のあるものにし、よりプロフェッショナルな印象を与える。
SEOやUX(ユーザー体験)の観点から、クリック率を向上させる効果が期待できる。



ワードプレスを使ってのリンクカードの使い方


WordPressでリンクカードを使うには、以下の手順を参考にしてください。WordPressテーマやプラグインによって方法が異なるため、必要に応じて環境に合った手順を選んでください。

方法1: Gutenberg(ブロックエディター)のリンクカード機能を利用
リンクカードを挿入する

投稿または固定ページを編集します。
新しいブロックを追加するために「+」アイコンをクリック。
「埋め込み」または「リンク埋め込み」ブロックを選択。
外部リンクまたは内部リンク(WordPress内の記事URL)を入力すると、自動的にリンクカードが生成されます。
デザインの調整

テーマによってリンクカードのデザインが異なります。
リンクカードがサポートされていない場合は、別の方法(プラグインなど)を試してください。

Wordpress のサイトでの説明 


埋め込み機能を使います。
Wordpress 埋め込み機能

概要は以下に
埋め込み
この記事で
埋め込み可能なサイトのリスト
外部リソース
変更履歴を埋め込む
WordPress 5.0 以降、WordPress ブロック エディターには、サードパーティのサービスからのビデオ、画像、ツイート、オーディオ、その他のコンテンツを埋め込むことで WordPress サイトに簡単に追加できる機能があります。この例としては、投稿やページに YouTube ビデオを埋め込むことが挙げられます。

コンテンツを埋め込む場合、そのコンテンツを WordPress サイトにアップロードする必要はありません。投稿またはページ内からコンテンツへのリンクを作成します。

汎用の埋め込みブロックを使用すると、YouTube、Vimeo、TED などのコンテンツを埋め込みたいサードパーティ サイトの URL を投稿やページに貼り付けることができます。
埋め込みURL で入力欄に 埋め込みたいページのURLを入れて、埋め込みをしてリンクカードは完成します。

Web制作カテゴリーに戻る

1