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

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

ソース例

<style type="text/css">
  .imgLeft { float : left ; } /*画像の回り込みの設定*/
  .clrLeft { clear : both ; } /*文字の回り込みの解除*/
</style>
<div class="clrLeft">
  <p class="imgLeft">
    <img src="https://image.thum.io/get/width/300/crop/200/http://qwerty.work" alt="QWERTY.WORK" />
    QWERTY.WORK
  </p>
</div>

表示例

↓↓上記でこうなる↓↓

/画像の回り込みの設定/ .imgLeft { float : left ; } /文字の回り込みの解除/ .clrLeft { clear : both ; }

QWERTY.WORK

MozshotはBlinkyに変わっていた

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

https://blinky.nemui.org/ https://blinky.nemui.org/

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

https://blinky.nemui.org/usage https://blinky.nemui.org/usage