ブログ用リンクカード作成ツール｜生成コードをコピペで使える

ブログ用リンクカード作成ツールについて

ブログ用リンクカード作成ツールは、関連記事やおすすめページを画像付きカードとして表示するためのHTML・CSS生成ツールです。

ブログ本文の中で関連記事、まとめページ、参考ページ、公式サイトなどを紹介するとき、テキストリンクだけではリンク先の内容が伝わりにくいことがあります。このツールでは、画像、日付、カテゴリ、タイトル、説明文を組み合わせたリンクカードを作成し、リンク先の内容を視覚的に伝えやすくできます。

カードの背景色、文字サイズ、余白、角丸、影、枠線などは、プレビューを見ながら調整できます。生成されたHTMLとCSSはコピーして使えるため、HTMLとCSSを貼り付けられるブログ環境であれば、記事本文や固定ページ内のリンク整理に利用できます。

表示例

生成したHTMLとCSSを本文内に貼り付けると、以下のようなリンクカードを表示できます。カードを複数並べる場合、PCなど横幅に余裕がある画面では複数列で表示され、スマホなど狭い画面では1列表示になります。

使い方の流れ

1. サイトURL、画像URL、日付、カテゴリ、タイトル、説明文などの必要項目を入力します。
2. 背景色、余白、角丸、影、文字サイズ、枠線などを調整し、プレビューで見た目を確認します。
3. 専用CSSをコピーし、ページ内またはブログ側のCSS入力欄に1回だけ貼り付けます。
4. カードHTMLをコピーし、リンクカードを表示したい場所に貼り付けます。
5. 複数のカードを2列配置したい場合は、開始コードと終了コードの間にカードHTMLを挟みます。

入力できる内容

生成されるコードについて

このツールでは、リンクカードを表示するための「専用CSS」と「カードHTML」を生成します。

専用CSS：リンクカードの見た目を整えるためのCSSです。同じページ内で複数のカードを並べる場合でも、基本的には1回だけ貼り付ければ使えます。

カードHTML：リンクカード本体のHTMLです。カードを表示したい場所に貼り付けます。リンク先やタイトル、説明文を変えたい場合は、入力内容を変更してカードHTMLを作り直してください。

開始コード・終了コード：複数のカードを2列配置したいときに使います。開始コードをカード群の前に置き、最後に終了コードを置くことで、複数のリンクカードをまとめて配置できます。

このツールが役立つ場面

• 関連記事を見やすく紹介したいとき
  記事本文の中で、関連する記事や次に読んでほしいページをカード形式で案内できます。
• まとめページやカテゴリーナビゲーションを作りたいとき
  複数のページを同じデザインのカードで並べ、一覧ページのように整理できます。
• 参考ページや公式ページへのリンクを目立たせたいとき
  テキストリンクだけでは分かりにくいリンク先を、画像や説明文付きで案内できます。
• プラグインを増やさずにリンクカードを作りたいとき
  HTMLとCSSを貼り付けられる環境であれば、必要なページだけにリンクカードを設置できます。

入力内容の扱いについて

このツールに入力した内容は、ブラウザ内でHTML・CSSを生成するために使用されます。入力したサイトURL、画像URL、タイトル、説明文などを、ミコトホドのサーバーへ送信・保存する処理は入れていません。

ただし、画像URLを入力してプレビューに画像を表示する場合、ブラウザがその画像URLの提供元へ画像を読み込みに行きます。外部サイトの画像URLを使用する場合は、利用先のルールや表示可否を確認してください。

仕様補足

カードの並び方：2列配置コードを使う場合、カード1枚の最小幅は300pxです。横幅に余裕がある場合は複数列で並び、狭い画面では自動的に1列になります。

共通CSS：生成されるCSSは、同じページ内のカードで共通して使う前提です。カードごとに背景色や影などを変えたい場合は、別クラスを用意するか、生成後のCSSを個別に調整してください。

画像：画像URLを入力した場合のみ、カード内に画像が表示されます。画像の見え方は、画像サイズや「画像表示」の設定によって変わります。

表示：ブログサービスやテーマ側のCSS、記事本文の横幅、貼り付ける場所によって、プレビューと実際の表示が完全に一致しない場合があります。

リンク先URL：入力したサイトURLは、生成されるカードHTMLのリンク先として使用されます。公開前に、URLの入力ミスや不要な文字が入っていないか確認してください。

新しいタブで開く設定：「リンクを新しいタブで開く」を有効にすると、生成されるリンクに target="_blank" rel="noopener" が追加されます。

リンクカード画像にホバー効果を追加するCSS

下記のCSSを追加すると、サムネイル画像にマウスを乗せたとき、画像が少し拡大するホバー効果を付けられます。必要な場合だけ追加してください。

/* リンクアニメーション */
.mkt-tile-card .mkt-img {
  transition: transform 0.4s ease !important;
}

/* PC（横幅768px以上）の時だけズームさせる */
@media (min-width: 768px) {
  .mkt-tile-card:hover .mkt-img {
    transform: scale(1.1) !important;
  }
}

/* 画像が枠からはみ出さないようにする */
.mkt-img-inner {
  overflow: hidden;
}

利用時の注意点

生成されたHTML・CSSは、貼り付け先のブログテーマや編集画面の仕様によって表示が変わる場合があります。公開前に、PCとスマホの両方で表示を確認してください。

外部サイトの画像URLを使う場合は、その画像を外部から読み込んで表示する形になります。画像の利用条件や直リンクの可否は、画像提供元のルールを確認してください。

広告リンクやアフィリエイトリンクをカード化する場合は、PR表記やリンク属性など、利用しているサービスやサイト運営方針に合わせて確認してください。

ログイン不要、登録不要、無料で使えます。入力内容はブラウザ内で処理され、ミコトホドのサーバーへ送信・保存されません。