ウェブサイトのサムネイル画像を表示するHTMLタグの説明
ウェブサイトのサムネイル画像を表示するHTMLタグの説明
今のサイトやブログはふんだんに画像や動画を使っていると思いませんか！
文字だらけのサイトやブログはもう見る気にもなれなくなってませんか？
そこで、ウェブサイトのサムネイル画像を表示するタグの説明となります。
こちらのタグをあなたのサイトやブログに設置することでビジュアルで見やすい表示が可能となります。
会社では「見える化」という手法があります。
業務を視覚化することで業務効率を上げようとするものです。
ここ最近はとにかく写真や画像やら動画で思いきり「見える化」がネットでも浸透している気がします。
今のサイトやブログはふんだんに画像や動画を使っていると思いませんか！？
文字だらけのサイトやブログはもう見る気にもなれなくなってませんか？
サイトやブログのビジュアル化を加速するタグをご紹介します。
ウェブサイトのサムネイル画像を表示するHTMLタグの説明となります。
こちらのタグをあなたのサイトやブログに設置することでビジュアルで見やすい表示が可能となります。
目次
■初めに HeartRails Capture の説明
初めに
HeartRails Capture | サムネイル画像／PDF ファイル作成サービス http://capture.heartrails.com/
というサイトの説明からします。
こちらの神サイトをご使用させていただいて、
ウェブサイトのサムネイル画像を表示するHTMLタグを使います。
上記サイトに行けば、説明が書いてありますので、
すぐにお分かりになると思います。
ウェブページや PDF ファイル、Office ファイルの URL を入力してボタンをクリックすると、そのページやファイルのサムネイル画像が作成されます。作成したサムネイル画像の URL やブログ等への貼り付け用タグも表示されますので、ご自由にご利用ください。
■ウェブサイトのサムネイル画像１ケ 200×200 のタグ
上のサムネイル画像のタグはこうなります。
<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 横に並べる 場合のタグ
<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 横に並べる 場合のタグ
<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 縦に並べる 場合のタグ
<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 縦に並べる 場合のタグ
<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 縦に並べる 場合のタグ
<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
上の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>
