ホーム / Bloggerにブログ風ブログカードを埋め込む方法【コピペでOK】 /

Bloggerにブログ風ブログカードを埋め込む方法【コピペでOK】

ブログ風ブログカードを作成する方法

固定ページのリンクを繋げてブログの記事一覧っぽく見せるための「ブログ風ブログカード」を作りました。

今回は、ブログ風ブログカードをBloggerに埋め込む方法をご紹介します。

以下のようなブログカードを作成することができます。

　　　　　　　　　　↓

サムネイル
📅 公開日: 2025-04-16

Bloggerにブログ風ブログカードを埋め込む方法【コピペでOK】


これをつなげるとブログ記事一覧風の見た目になります。

手順１：カード表示用のHTMLを用意する

以下のようなコードを使います。記事の中に直接貼り付けるだけでOKです。


<div class="hatena-simple-card">
  <a href="https://example.com/sample-article">
    <div class="card-thumb">
      <img src="https://via.placeholder.com/90" alt="サムネイル">
    </div>
    <div class="card-content">
      <div class="card-meta">📅 公開日: 2024-01-01</div>
      <p class="card-title">サンプル記事のタイトル</p>
      <p class="card-snippet">ここに記事の簡単な説明が入ります。スマホでは自動的に省略表示されます。</p>
    </div>
  </a>
</div>

URL、画像、説明文、日付などを変更して自分用に使ってください。

自分でコード書くのが面倒な方のために

入力するだけでHTMLを自動生成できるツールを作ってみました！

▼こちらから使えます：
【ブログ風ブログカードジェネレーター】

URL・タイトル・説明・画像・公開日を入力するだけ

  • コピーボタンでHTMLを簡単に取得
  • そのまま記事に貼り付けて使えます！

手順２：CSSをブログに追加する

次に、上のHTMLがきれいに表示されるように、CSSをブログに追加します。

  1. Blogger管理画面へ
  2. 「テーマ」 → 「カスタマイズ」 → 「HTMLを編集」
  3. </head> の直前に以下のCSSを貼り付けます：

.hatena-simple-card {
  border: none;
  margin: 1em 0;
  background: #fff;
  font-family: sans-serif;
  max-width: 100%;
}

.hatena-simple-card a {
  display: flex;
  text-decoration: none;
  color: inherit;
  align-items: center !important; /* ✅ 画像を縦中央に揃える */
  flex-direction: row;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 1em;
}

.card-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-thumb img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  flex-shrink: 0;
}

.card-content {
  padding: 0.6em 0.9em;
  flex: 1;
}

.card-meta {
  font-size: 0.75em;
  color: #666;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  line-height: 1.4;
}

.card-date {
  white-space: nowrap;
}

.card-title {
  font-size: 0.9em;
  font-weight: bold;
  margin: 0.3em 0 0.3em 0;
  line-height: 1.4;
}

.card-snippet {
  font-size: 0.8em;
  color: #444;
  margin: 0;
  line-height: 1.4;
}

/* ✅ スマホ・タブレットで説明非表示 */
@media screen and (max-width: 767px) {
  .card-snippet {
    display: none !important;
  }
}

手順3：実際にカードを使ってみよう！

Bloggerの投稿画面で「HTML表示」に切り替えて、カード用HTMLを貼り付ければ完了！
スマホでもPCでも見栄えの良い紹介カードになります。

まとめ

ブログカードを使うと、記事内で他の投稿をスタイリッシュに紹介できます。
CSSとHTMLを一度設定しておけば、あとはコピペで量産も可能！

よければ、あなたのブログでもぜひ活用してみてくださいね！

QooQ