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

ブログ用リンクカード作成ツールの紹介

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

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

カードの背景色、文字サイズ、余白、角丸、影、枠線などは、プレビューを見ながら調整できます。関連記事の紹介、まとめページへの誘導、カテゴリーナビゲーション、公式ページや参考ページへのリンクなど、複数のリンクを同じデザインで並べたい場面に向いています。

生成されたHTMLとCSSはコピーして使えるため、HTMLとCSSを貼り付けられるブログ環境であれば、記事本文や固定ページ内のリンク整理に利用できます。

表示例

生成したHTMLとCSSを本文内に貼り付けた表示例です。カードを複数並べる場合、PCなど横幅に余裕がある画面では複数列で表示され、スマホなど狭い画面では1列表示になります。設置場所の横幅や画像サイズによって、実際の見た目は変わります。

使い方の流れ

1. サイトURL、画像URL、日付、カテゴリ、タイトル、説明文などの必要項目を入力します。
2. 背景色、余白、角丸、影、文字サイズ、枠線などを調整し、プレビューで見た目を確認します。
3. 専用CSSをコピーし、ページ内またはブログ側のCSS入力欄に1回だけ貼り付けます。
4. 複数のカードを並べる場合は、開始コードをカード群の前に貼り付け、作成したカードHTMLを表示したい数だけ続けて貼り付けます。
5. 最後に終了コードを貼り付けて、カード全体を閉じます。

入力内容の扱いについて

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

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

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

仕様補足

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

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

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

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

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

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

入力内容：入力した内容はブラウザ内で処理され、ミコトホドのサーバーへ送信・保存されません。画像URLを入力した場合は、プレビュー表示のためにブラウザが画像URLの提供元へ画像を読み込みます。

リンクカード画像にホバー効果を追加する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;
}

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