【Seesaaブログで関連記事リンクをブログカード（風）で貼る】

当ブログでは　関連記事へのリンクにはテキストリンクを使っています。
実際に訪問者様がリンクを辿って関連記事を見ているかは分かりませんが・・・

他所のサイトとかブログとかで、
画像とタイトル、説明(？)が枠に囲まれたリンクが埋め込まれているのを
見ることがあります。
あれ、カッコ良いな・・・
リンク先の画像と比較して欲しい時とか、かなり有効そうだし。

使ってみたいけれど、
Seesaaブログで対応しているかも分からないし、
そもそもアレ　何というモノかも知らない・・・

Google先生とかに聞いて、
「ブログカード」というモノだと分かりました。
Seesaaブログには標準のブログカード生成機能が無いことも。

うーん
さらに
「Seesaaブログで過去記事をブログカードで貼る」とGoogle先生で検索したところ、
「AIによる概要」としての回答で
＞HTML/CSSのカスタマイズが不要で、
＞すぐに使える「画像付きテキストリンク（ブログカード風）」を
＞手動で作成・配置する手順です。
ということで、
「HTMLテンプレート」が提示されました。

早速、試してみると
おぉっ！　希望通りの見た目
AI、凄いな！
画像とタイトルとをクリックすることでリンク先に飛べます。

提示された「HTMLテンプレート」に対して、
別タブで開くようにコードを追加した例を挙げます。

HTMLコード

<div class="original-blogcard" style="border: 1px solid #ccc; padding: 15px; display: flex; gap: 15px; border-radius: 5px; max-width: 600px; background: #f9f9f9;">
  <!-- 左側の画像 -->
  <div class="card-thumb" style="flex-shrink: 0; width: 120px;">
    <a target="_blank" rel="noopener noreferrer" href="過去記事のURL" style="text-decoration: none;">
      <img src="画像のURL" alt="過去記事のタイトル" style="width: 100%; height: auto; object-fit: cover;">
    </a>
  </div>
  <!-- 右側のテキスト -->
  <div class="card-content">
    <p class="card-title" style="margin: 0 0 10px; font-weight: bold;">
      <a target="_blank" rel="noopener noreferrer" href="過去記事のURL" style="text-decoration: none; color: #333;">過去記事のタイトルをここに入力</a>
    </p>
    <p class="card-excerpt" style="margin: 0; font-size: 14px; color: #666;">
      過去記事の簡単な説明や導入文をここに入力します。
    </p>
  </div>
</div>

コードは注意してご使用ください

これだと表示画像サイズが横120pxで縦はautoで調整されるので、
縦長の画像だと「ブログカード風」の縦方向が長くなります。

画像サイズを「縦横比を維持して120px×120pxで中央トリミング」するコードも
AIに教えてもらったので　こちらも。

HTMLコード

<div class="original-blogcard" style="border: 1px solid #ccc; padding: 15px; display: flex; gap: 15px; border-radius: 5px; max-width: 600px; background: #f9f9f9;">
  <!-- 左側の画像（縦横比を維持して120px×120pxで中央トリミング） -->
  <div class="card-thumb" style="flex-shrink: 0; width: 120px; height: 120px;">
    <a target="_blank" rel="noopener noreferrer" href="過去記事のURL" style="text-decoration: none;">
      <img src="画像のURL" alt="過去記事のタイトル" style="width: 120px; height: 120px; object-fit: cover; object-position: center;">
    </a>
  </div>
  <!-- 右側のテキスト -->
  <div class="card-content">
    <p class="card-title" style="margin: 0 0 10px; font-weight: bold;">
      <a target="_blank" rel="noopener noreferrer" href="過去記事のURL" style="text-decoration: none; color: #333;">過去記事のタイトルをここに入力</a>
    </p>
    <p class="card-excerpt" style="margin: 0; font-size: 14px; color: #666;">
      過去記事の簡単な説明や導入文をここに入力します。
    </p>
  </div>
</div>

コードは注意してご使用ください

テキストのサイスや色などはお好みで。

URLを入力するだけで埋め込み用のHTMLコードを生成できる外部サービス
（ブログカード生成ツール）もあるそうですが、
手間はかかるものの画像や説明文を自由に出来る このHTMLコードを使うかな。
たぶん　これから多用します。


続きを読む

【X（旧Twitter） 当ブログのURLがスパムリンク認定されたようで投稿できなくなりました】

X（旧Twitter）にて、
2026年3月5日に投稿予約していたハズのポストが投稿されていませんでした。
（と言うか、削除されていた？）


投稿されていないことに気がついて
改めてポストを書いて手動で投稿しようとしたところ、
＞「ポストの内容が無効です。」
とのエラーで投稿も、ポストの「保存」もできません。

画像を消したり、本文を消したりしましたが変化なし。
どうやら当ブログのURLが引っかかっているようで、
URLリンクをクリックすると、
＞警告：このリンクは安全ではない可能性があります
とのこと。

まぁ、１日に１本の投稿だけれども、
毎日　定時での予約投稿だし、
どのポストにも同じURL貼っているし、
機械的に判断したら確かに怪しいかもしれませんが・・・

とりあえず、
「X ヘルプセンター」に解除のお願いはしてみました。
さて、どうなることか。

しばらくの間はX（旧Twitter）への投稿（ポスト）は無しです。


続きを読む

【goo blog 2025年11月18日 サービス終了】

2025年4月14日、goo blog　スタッフブログにて
＞goo blog サービス終了のお知らせ
＞goo blogは、2025年11月18日（火）をもちまして、
＞サービスの提供を終了させていただくことになりました。
と発表がありました。

「goo blog」は、
これまで以下のような経緯で運用していました。
・LOVELOGでの画像容量不足(初期設定5MB〜最大20MB)を賄うために、
　gooブログの画像フォルダを利用しようと立ち上げ
・他社ブログにgooブログの画像フォルダを利用しての
　画像表示が運用に支障をきたすため利用停止になったので、
　同画像フォルダの画像をLOVELOGに再アップ
・放置状態

現在も、放置中です。
某機械メーカー技術者パパの不定期更新（３号館）


サービス終了に伴う
おすすめの「引越し先」は、
「Amebaブログ」と「Hatena Blog」のようです。



しかし、当該ブログは放置中で記事も画像も残っていないので
ブログ引越しもせずに
消えていくことになります。
あと ひと月 ありますが、
これまで　ありがとうございました。


【関連記事】
・2005年06月　ｇｏｏ版ブログ
・2005年11月　画像の非表示について
・2012年01月　【某機械メーカー技術者パパの不定期更新（倉庫）】
・2014年01月　【『LOVELOG』サービス提供の終了について】