2018/05/071 Shares

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

■初めに HeartRails Capture の説明

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


http://capture.heartrails.com/

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

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

スポンサーリンク

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


AAAAA
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>

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

スポンサーリンク

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


AAAAA
AAAAAA

BBBBB
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>

スポンサーリンク

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


AAAAA
AAAAAA

BBBBB
BBBBB

CCCCC
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>

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

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


AAAAA
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>

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


AAAAA
AAAAA

BBBBB
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>

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


AAAAA
AAAAA

BBBBB
BBBBB

CCCCC
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>

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

■使用方法

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

■補足

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

HTML特殊文字変換ツール  http://tech-unlimited.com/escape.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>

この記事が気に入ったら
いいね ! しよう

Twitter で