ウェブサイトのサムネイル画像を表示するHTMLタグの説明

今のサイトやブログはふんだんに画像や動画を使っていると思いませんか！

文字だらけのサイトやブログはもう見る気にもなれなくなってませんか？

そこで、ウェブサイトのサムネイル画像を表示するタグの説明となります。

こちらのタグをあなたのサイトやブログに設置することでビジュアルで見やすい表示が可能となります。

会社では「見える化」という手法があります。

業務を視覚化することで業務効率を上げようとするものです。

ここ最近はとにかく写真や画像やら動画で思いきり「見える化」がネットでも浸透している気がします。

今のサイトやブログはふんだんに画像や動画を使っていると思いませんか！？

文字だらけのサイトやブログはもう見る気にもなれなくなってませんか？

サイトやブログのビジュアル化を加速するタグをご紹介します。

ウェブサイトのサムネイル画像を表示するHTMLタグの説明となります。

こちらのタグをあなたのサイトやブログに設置することでビジュアルで見やすい表示が可能となります。

■初めに　HeartRails Capture　の説明

初めに
HeartRails Capture | サムネイル画像／PDF ファイル作成サービス　　http://capture.heartrails.com/
というサイトの説明からします。
こちらの神サイトをご使用させていただいて、
ウェブサイトのサムネイル画像を表示するHTMLタグを使います。

上記サイトに行けば、説明が書いてありますので、
すぐにお分かりになると思います。

ウェブページや PDF ファイル、Office ファイルの URL を入力してボタンをクリックすると、そのページやファイルのサムネイル画像が作成されます。作成したサムネイル画像の URL やブログ等への貼り付け用タグも表示されますので、ご自由にご利用ください。

■ウェブサイトのサムネイル画像１ケ　200×200　のタグ

AAAAA

上のサムネイル画像のタグはこうなります。

<table style=”text-align: center;line-height: 150%;”>
<tr>
<td style=”padding:5px;”>
<a href=”https://ttb100.net/” title=”AAAAA” target=”_blank”>
<img src=”http://capture.heartrails.com/200×200/delay=3?https://ttb100.net/” alt=”AAAAA” title=”AAAAA” />
<br />AAAAA</a>
</td>
</tr>
</table>

コピペしてご活用ください。

■ウェブサイトのサムネイル画像２ケ　200×200　横に並べる　場合のタグ

AAAAAA

BBBBB

<table style=”text-align: center;line-height: 150%;”>
<tr>
<td style=”padding:5px;”>
<a href=”https://ttb100.net/” title=”AAAAA” target=”_blank”>
<img src=”http://capture.heartrails.com/200×200/delay=3?https://ttb100.net/” alt=”AAAAA” title=”AAAAA” />
<br />AAAAAA</a>
</td>
<td style=”padding:5px;”>
<a href=”https://ttb100.net/” title=”BBBBB” target=”_blank”>
<img src=”http://capture.heartrails.com/200×200/delay=3?https://ttb100.net/” alt=”BBBBB” title=”BBBBB” />
<br />BBBBB</a>
</td>
</tr>
</table>

■ウェブサイトのサムネイル画像３ケ　200×200　横に並べる　場合のタグ

AAAAAA

BBBBB

CCCCC

<table style=”text-align: center;line-height: 150%;”>
<tr>
<td style=”padding:5px;”>
<a href=”https://ttb100.net/” title=”AAAAA” target=”_blank”>
<img src=”http://capture.heartrails.com/200×200/delay=3?https://ttb100.net/” alt=”AAAAA” title=”AAAAA” />
<br />AAAAAA</a>
</td>
<td style=”padding:5px;”>
<a href=”https://ttb100.net/” title=”BBBBB” target=”_blank”>
<img src=”http://capture.heartrails.com/200×200/delay=3?https://ttb100.net/” alt=”BBBBB” title=”BBBBB” />
<br />BBBBB</a>
</td>
<td style=”padding:5px;”>
<a href=”https://ttb100.net/” title=”CCCCC” target=”_blank”>
<img src=”http://capture.heartrails.com/200×200/delay=3?https://ttb100.net/” alt=”CCCCC” title=”CCCCC” />
<br />CCCCC</a>
</td>
</tr>
</table>

作業に疲れ果てて朝を迎える若者

■ウェブサイトのサムネイル画像１ケ　200×200　縦に並べる　場合のタグ

AAAAA

<table style=”text-align: center;line-height: 150%;”>
<tr>
<td style=”padding:5px;”>
<a href=”https://ttb100.net/” title=”AAAAA” target=”_blank”>
<img src=”http://capture.heartrails.com/200×200/delay=3?https://ttb100.net/” alt=”AAAAA” title=”AAAAA” />
<br />AAAAA</a>
</td>
</tr>
</table>

■ウェブサイトのサムネイル画像２ケ　200×200　縦に並べる　場合のタグ

AAAAA

BBBBB

<table style=”text-align: center;line-height: 150%;”>
<tr>
<td style=”padding:5px;”>
<a href=”https://ttb100.net/” title=”AAAAA” target=”_blank”>
<img src=”http://capture.heartrails.com/200×200/delay=3?https://ttb100.net/” alt=”AAAAA” title=”AAAAA” />
<br />AAAAA</a>
</td>
</tr>
<tr>
<td style=”padding:5px;”>
<a href=”https://ttb100.net/” title=”BBBBB” target=”_blank”>
<img src=”http://capture.heartrails.com/200×200/delay=3?https://ttb100.net/” alt=”BBBBB” title=”BBBBB” />
<br />BBBBB</a>
</td>
</tr>
</table>

■ウェブサイトのサムネイル画像３ケ　200×200　縦に並べる　場合のタグ

AAAAA

BBBBB

CCCCC

<table style=”text-align: center;line-height: 150%;”>
<tr>
<td style=”padding:5px;”>
<a href=”https://ttb100.net/” title=”AAAAA” target=”_blank”>
<img src=”http://capture.heartrails.com/200×200/delay=3?https://ttb100.net/” alt=”AAAAA” title=”AAAAA” />
<br />AAAAA</a>
</td>
</tr>
<tr>
<td style=”padding:5px;”>
<a href=”https://ttb100.net/” title=”BBBBB” target=”_blank”>
<img src=”http://capture.heartrails.com/200×200/delay=3?https://ttb100.net/” alt=”BBBBB” title=”BBBBB” />
<br />BBBBB</a>
</td>
</tr>
<tr>
<td style=”padding:5px;”>
<a href=”https://ttb100.net/” title=”CCCCC” target=”_blank”>
<img src=”http://capture.heartrails.com/200×200/delay=3?https://ttb100.net/” alt=”CCCCC” title=”CCCCC” />
<br />CCCCC</a>
</td>
</tr>
</table>

パソコン画面をみつめながら何を思うのかの乙女

■使用方法

上の引用枠タグ中の
AAAAA　BBBBB　CCCCC　200×200　https://ttb100.net/
などを適宜修正してコピペでご使用ください。

■補足

本記事では、HTMLやコードをホームページに載せる時に使う変換ツールを使用させていただきました。

HTML特殊文字変換ツール　　http://tech-unlimited.com/escape.html

 tech-unlimited.com  19 shares 23 users 38 pockets

HTML特殊文字変換｜コードをホームページに載せる時に便利 | すぐに使える便利なWE...

http://tech-unlimited.com/escape.html

HTML特殊文字の変換ツール。HTMLやコードをホームページに載せる時にHTML的に特殊な意味を持つ特殊文字を正常に表示されるように変換するツールです。

上のHTMLタグは下記となります。

<table style=”text-align: center;line-height: 150%;”><tr><td style=”padding:5px;”><a href=”http://tech-unlimited.com/escape.html” title=”TECH-UNLIMiTEDさんのHTML特殊文字変換ツール” target=”_blank”><img src=”http://capture.heartrails.com/250×250/delay=3?http://tech-unlimited.com/escape.html” alt=”TECH-UNLIMiTEDさんのHTML特殊文字変換ツール” title=”TECH-UNLIMiTEDさんのHTML特殊文字変換ツール” /><br />TECH-UNLIMiTEDさんのHTML特殊文字変換ツール</a></td></tr></table>