<< バスクラのリードを３番に変えた | TOP | paizaのスキルチェックにハマり中 >>

2025年07月26日

他のブログ・ニュース記事を引用する

　これまで、他のブログやニュース記事を引用する時は、<blockquote> を手動で書くか、Twitter（現X）で引用されていればそれを使っていました。Twitter を使っていた理由は、サムネール画像を自動で取得してくれるためです。しかし、よく考えてみると、ただそれだけのために他のサービスを使うのはおかしな話です。要は元の記事の OGP 情報を取って来て、適当な形で整形すればいいわけだから、自前で書けるはずです。

　ということで、実装してみました。元の記事の meta タグを読んで、こんな感じの html コードを生成します。og:image, og:title, og:site_name, og:description の content 属性を読み出しています。 

<a class="ogCiteBox" href="https://d-alchemy.xyz/blog/article/271881724.html">
<blockquote class="ogCiteBox">
<div class="ogCiteImage"><img src="/blog/image/20250721-1.jpg" /></div>
<div class="ogCiteBody">
<p class="ogCiteName">Digitalians' Alchemy</p>
<p class="ogCiteTitle">バスクラのリードを３番に変えた</p>
<p class="ogCiteDescription">
　先日のバスクラのレッスンの時に、「もう少し厚いリードを使った方がよい」というアドバイスをいただいたので、2.5番から３番に変えました。今回もバンドーレンの青箱です。...
</p>
</div>
</blockquote>
</a>

　CSS はこのように書きました。@media screen 以下の部分はレスポンシブデザイン対応です。画像の設定にかなり手こずりました。狙い通りになってるかどうか、まだ自信がありません。 

blockquote.ogCiteBox {
  border:1px solid #bbb;
  margin-left: 0px;
  margin-right: 0px;
  background-color: #f8f8f8;
  overflow: hidden;
}

a.ogCiteBox {
  text-decoration: none;
  color: black;
}

blockquote.ogCiteBox div.ogCiteImage {
  float: left;
  margin-left: 5px;
  margin-right: 15px;
  margin-top: 15px;
  margin-bottom: 10px;
  max-width: 267px;
  max-height: 150px;
}

blockquote.ogCiteBox div.ogCiteImage img {
  max-width: 267px;
  max-height: 150px;
  margin: 0 auto;
}

blockquote.ogCiteBox div.ogCiteBody {
  margin-left: 12px;
}

blockquote.ogCiteBox div.ogCiteBodyNoImage {
}

blockquote.ogCiteBox p {
  font-family: sans-serif;
  font-size: 90%;
  margin-bottom: 0;
  margin-top: 0;
  margin-right: 1em;
  margin-left: 1em;
}
blockquote.ogCiteBox p.ogCiteName {
  margin-top: 10px;
  margin-bottom: 5px;
  color: #888;
}

blockquote.ogCiteBox p.ogCiteTitle {
  font-weight: bold;
}

blockquote.ogCiteBox p.ogCiteTime {
  font-style: italic;
  color: #888;
}

@media screen and (min-width: 0px) and (max-width: 767px) {
  blockquote.ogCiteBox {
  }
  blockquote.ogCiteBox div.ogCiteBody {
    margin-left: 0;
    border-left: none;
    border-top: thin solid #ccc;
    margin-top: 10px;
  }
  blockquote.ogCiteBox div.ogCiteImage {
    float: none;
    margin: 5px;
    max-width: calc(100vw - 76px);
    max-height: calc((100vw - 76px) * 0.56);
  }
  blockquote.ogCiteBox div.ogCiteImage img {
    max-width: calc(100vw - 76px);
    max-height: calc((100vw - 76px) * 0.56);
    margin: 0 auto;
  }
}

　こんな風に表示されます。いけてるやん。（お手元での表示がいけてない場合は、CSS のキャッシュが効いているのかもしれません。キャッシュクリアしてみてください）

Digitalians' Alchemy

バスクラのリードを３番に変えた

　先日のバスクラのレッスンの時に、「もう少し厚いリードを使った方がよい」というアドバイスをいただいたので、2.5番から３番に変えました。今回もバンドーレンの青箱です。...

　画像が横長で、description が長めの時は、文章が回り込みます（スマホでは回り込みません）。ここの使い勝手は微妙なところで、文末の数文字だけが画像の下に回り込んだりすると可読性が下がるかもしれません。でも、画像の下に空きスペースができるのもカッコ悪いし、このデザインで妥協しました。

マガジン9

第721回：あの「炎上」を通して、参政党が躍進しそうな予感に包まれた選挙前。の巻（雨宮処凛）

声優・林原めぐみさんのXでの炎上を見ながら、次の選挙では参政党が票を伸ばすかもしれないな……という思いが浮かんだ。知らない人は各自検索してほしいが、問題となったのは、『興味がない、わからない、知らない』というタイトルのブログ記事....

(2025年06月11日 14:55)

　画像サイズは、幅の上限を 267 px、高さの上限を 150 px としています。スマホでは、幅は画面横幅からマージン分を引いたもの、高さは幅の 0.56 倍を上限とします。CSSの設定に苦労しました。<div> 要素の中に <img> 要素を入れて、両方に max-width, max-height を設定したのですが、これでよかったのかな……

Digitalians' Alchemy

「日本人ファースト」に惹かれる人とどう共存していくのか

　6/12に雨宮処凛さんが書かれた「あの『炎上』を通して、参政党が躍進しそうな予感に包まれた選挙前」という記事。今回の参院選は、まさにその予感通りの展開となっています。...

　これまで、特に Twitter を引用する意図がなくても、わざわざ記事を引用するポストを探して貼り付けたりしていたのですが、今後はそういう必要もなくなりそうです。

タグ：ブログ プログラミング
Posted at 2025年07月26日 19:48:44
<< バスクラのリードを３番に変えた | TOP | paizaのスキルチェックにハマり中 >>
email.png