ブログカード風の内部リンクを作る方法｜WordPressでクリック率を上げるデザイン実装

この記事では、内部リンクを「ブログカード」風に表示するデザインを、コードだけで簡単に実装する方法を紹介します。リンクを目立たせたいときに便利な定番UIです。

1 実装のポイント

• functions.php に「URL をブログカード HTML に変換するショートコード」を追加
• カードの見た目は CSS で整える
• クラシックエディタに [blogcard url="〜"] を貼るだけでOK

2 functions.php にコードを追加

//-------------------------------------------
// ブログカード風の内部リンクデザイン
//-------------------------------------------
// ブログカードショートコード
function blogcard_shortcode($atts) {
    $atts = shortcode_atts(array(
        'url' => '',
    ), $atts);

    $url = esc_url($atts['url']);
    if (!$url) return '';

    // ページタイトルを取得
    $response = wp_remote_get($url);
    if (is_wp_error($response)) return '';

    $html = wp_remote_retrieve_body($response);
    preg_match('/<title>(.*?)<\/title>/is', $html, $title_match);
    $title = isset($title_match[1]) ? esc_html($title_match[1]) : $url;

    return '<a href="' . $url . '" class="blogcard">
                <div class="blogcard-inner">
                    <div class="blogcard-text">' . $title . '</div>
                    <div class="blogcard-url">' . $url . '</div>
                </div>
            </a>';
}
add_shortcode('blogcard', 'blogcard_shortcode');

ウィジェット、記事内で表示する場合：

[blogcard url="https://example.com"]
  

3 汎用CSS

/* -------------------------------------------
 * ブログカード風の内部リンクデザイン
 * ----------------------------------------- */

.blogcard { /** ブログカード全体 **/
  display:block; /** ブロック化 **/
  text-decoration:none; /** 下線削除 **/
  border:1px solid #ddd; /** 枠線 **/
  border-radius:10px; /** 角丸 **/
  padding:15px; /** 余白 **/
  background:#fff; /** 背景色 **/
  box-shadow:0 2px 4px rgba(0,0,0,0.08); /** 影 **/
  transition:0.3s ease; /** ホバーアニメ **/
}
.blogcard:hover { /** ホバー時 **/
  transform:translateY(-4px); /** 少し浮く **/
  box-shadow:0 6px 14px rgba(0,0,0,0.15); /** 影強め **/
}
.blogcard-inner { /** 内側ボックス **/
  display:flex; /** 横並び **/
  flex-direction:column; /** 縦積み **/
}
.blogcard-text { /** タイトル **/
  font-weight:bold; /** 太字 **/
  font-size:1.1em; /** 大きめ **/
  margin-bottom:5px; /** 下余白 **/
  color:#333; /** 文字色 **/
}
.blogcard-url { /** URL部分 **/
  font-size:0.85em; /** 小さめ **/
  color:#0073aa; /** 青 **/
  overflow:hidden; /** はみ出し隠す **/
  white-space:nowrap; /** 折り返しなし **/
  text-overflow:ellipsis; /** 省略表示 **/
}

4 完成イメージ

5 代用プラグイン

• Internal Link Juicer
• Pz-LinkCard（高機能で人気）
• Rich Table of Contents（カード機能つき）

6 まとめ

ブログカードは、内部リンクのクリック率を大きく上げる定番UIです。
コードだけで実装でき、プラグインよりも軽量に運用できます。
ぜひ自分のブログに合わせてCSSもカスタマイズしてみてください。