URLからタイトル・説明・画像を取得できるブログカードジェネレーターの設置方法-P-LIFE.NET

この記事では、自分専用の ブログカードジェネレーター（URLからタイトル・説明・画像を取得できるツール） を、Bloggerに設置する方法を紹介します。

🔧 できること

任意のURLを入力すると、タイトル・説明・画像・公開日を取得
HTMLとして出力 → Bloggerに貼るだけでブログカード表示！
スマホでは説明文を非表示にするレスポンシブ対応

⚠️ 注意点：他人のサイトの情報は取得できません

このジェネレーターは 自分のサイト内のURLだけ 情報を取得できます。

なぜかというと、JavaScriptから他のサイトのHTMLを直接取得するには「クロスオリジン制限（CORS）」というセキュリティ上の制限があるからです。

💡 対応方法

自分のブログ内のURL → OK（取得可）
他人のブログやニュースサイト → ❌（取得不可）

ジェネレーターを設置したサイトの情報しか取得できないため、私のブログに設置するのではなく、みなさんのサイトにご自身で設置していただけるようにしました。

✅ 1. HTMLファイルを作成する

以下のコードをコピーボックスからコピーして、HTMLファイルとして保存します（例：blogcard.html）。



  <style>
    body {
      font-family: sans-serif;
      background: #f9f9f9;
      padding: 1em;
      box-sizing: border-box;
    }
    input, textarea {
      width: 100%;
      padding: 0.5em;
      margin: 0.5em 0;
      font-size: 1em;
      box-sizing: border-box;
    }
    button {
      padding: 0.5em 1em;
      margin: 0.5em 0;
      cursor: pointer;
    }
    #preview {
      margin-top: 1em;
    }
    .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;
      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-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;
      }
    }
    .card-meta {
      font-size: 0.75em;
      color: #666;
      display: flex;
      flex-wrap: wrap;
      gap: 1em;
      line-height: 1.4;
    }
    .card-date {
      white-space: nowrap;
    }
  </style>


  <h2>ブログカードジェネレーター</h2>
  <p>URLを入力すると、タイトル・説明・画像を自動取得します。編集もOK！</p>

  <label>URL</label>
  <input id="url" placeholder="https://example.com" type="text" />

  <button onclick="fetchMeta()">情報取得</button>

  <label>タイトル</label>
  <input id="title" type="text" />

  <label>説明</label>
  <textarea id="snippet" rows="3"></textarea>

  <label>画像URL</label>
  <input id="image" type="text" />

  <label>公開日</label>
  <input id="date" placeholder="例: 2024-01-01" type="text" />

  <div id="preview"></div>

  <h3>生成されたHTML</h3>
  <textarea id="output" rows="10"></textarea>
  <button onclick="copyHTML()">コピー</button>

  <script>
    function fetchMeta() {
      const url = document.getElementById('url').value;
      if (!url) return;

      fetch("https://api.allorigins.win/raw?url=" + encodeURIComponent(url))
        .then(res => res.text())
        .then(html => {
          const parser = new DOMParser();
          const doc = parser.parseFromString(html, "text/html");
          const title = doc.querySelector('meta[property="og:title"]')?.content || doc.title || "";
          const desc = doc.querySelector('meta[property="og:description"]')?.content || doc.querySelector('meta[name="description"]')?.content || "";
          const img = doc.querySelector('meta[property="og:image"]')?.content || "https://placehold.jp/120x90.png";

          document.getElementById('title').value = title;
          document.getElementById('snippet').value = desc;
          document.getElementById('image').value = img;

          renderCard();
        })
        .catch(() => alert("このURLの情報を取得できませんでした。"));
    }

    function renderCard() {
      const url = document.getElementById('url').value;
      const title = document.getElementById('title').value;
      const snippet = document.getElementById('snippet').value;
      const image = document.getElementById('image').value;
      const date = document.getElementById('date').value;

      const html = `
<div class="hatena-simple-card">
  <a href="${url}">
    <div class="card-thumb">
      <img src="${image}" alt="サムネイル">
    </div>
    <div class="card-content">
      <div class="card-meta">
        <span class="card-date">📅 公開日: ${date}</span>
      </div>
      <p class="card-title">${title}</p>
      <p class="card-snippet">${snippet}</p>
    </div>
  </a>
</div>`;

      document.getElementById('preview').innerHTML = html;
      document.getElementById('output').value = html;
    }

    ['title', 'snippet', 'image', 'date'].forEach(id =>
      document.getElementById(id).addEventListener('input', renderCard)
    );

    function copyHTML() {
      const output = document.getElementById("output");
      output.select();
      document.execCommand("copy");
      alert("HTMLをコピーしました！");
    }
  </script>

✅ 2. ご自身のサイトに設置

コピーしたHTMLファイルをご自身のブログ（投稿または固定ページ）にHTMLビューで貼り付ける。

これでジェネレーターを使えるようになります。

📝 以下の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;
  }
}

💬 まとめ

このブログカードジェネレーターは、自分のブログ記事を手軽にカード化したい人にピッタリなツールです！
コードはカスタマイズOKなので、デザインを調整したい方は自由に編集してくださいね。

URLからタイトル・説明・画像を取得できるブログカードジェネレーターの設置方法