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

Sat, 04 Jul 2009 22:31:24 +0900

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

指定した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

Blinky on qwerty.work

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

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

ソース例

表示例

MozshotはBlinkyに変わっていた