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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

  

スポンサードリンク

  

今のサイトやブログはふんだんに画像や動画を使っていると思いませんか!  文字だらけのサイトやブログはもう見る気にもなれなくなってませんか?  そこで、ウェブサイトのサムネイル画像を表示するタグの説明となります。  こちらのタグをあなたのサイトやブログに設置することでビジュアルで見やすい表示が可能となります。

会社では「見える化」という手法があります。
業務を視覚化することで業務効率を上げようとするものです。

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

今のサイトやブログはふんだんに画像や動画を使っていると思いませんか!?
文字だらけのサイトやブログはもう見る気にもなれなくなってませんか?

サイトやブログのビジュアル化を加速するタグをご紹介します。
ウェブサイトのサムネイル画像を表示する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

TECH-UNLIMiTEDさんのHTML特殊文字変換ツール
TECH-UNLIMiTEDさんの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>




  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

  

スポンサードリンク

  

自由な人生を手にいれる教科書

濱田大輔さん(だいぽん)の「自由な人生を手に入れる教科書」 Amazonランキングで「1位」を獲得しました。 今なら期間限定、無料で入手できます。
さらに「12,800円」相当の「追加プレゼント」と「追加の電子書籍」までいただけます。
あなたの人生に大いなる気付きと刺激を与えてくれる独立のための自己啓発本といってもいい「自由な人生を手に入れる教科書」Amazonで1位の電子書籍(アフィリエイトで自動収益)を期間限定で無料配布中(追加プレゼント付き)この機会を逃さないようにお願いします。


自由な人生を手にいれる教科書

SNSでもご購読できます。

コメントを残す