MozshotとCSSでサムネイル画像の横に文字列を回り込みさせる方法

サムネイルの周りに文字を回り込ませたい

指定したURLのサムネイルを簡単に表示できる「Mozshot」とCSSを組み合わせて、サイトのサムネイル画像の周りに文字を回り込ませて配置する方法をメモ。リンク集のページなどに便利です。

ソース例

<style type="text/css">
  .imgLeft { float : left ; } /*画像の回り込みの設定*/
  .clrLeft { clear : both ; } /*文字の回り込みの解除*/
</style>
<div class="clrLeft">
  <p class="imgLeft">
    <img src="http://mozshot.nemui.org/shot/large?http://qwerty.work" alt="QWERTY.WORK" />
    QWERTY.WORK
  </p>
</div>

表示例

↓↓上記でこうなる↓↓

QWERTY.WORK

MozshotはBlinkyに変わっていた

2022/3/22現在、久々にMozshotの公式サイトにアクセスしてみると、Blinkyという後継サービスに変わっていました。

Link

Blinky

https://blinky.nemui.org/

使用方法はほぼ同じです。