読者です 読者をやめる 読者になる 読者になる

はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

リンク先のサムネイル画像をHTMLタグで表示しCSSで装飾を設定する方法

リンク先を画像なしの文章で紹介するよりも、サムネイル画像を一緒に表示した方が直感的に伝えやすい。シンプルなHTMLとCSSで可能。jQueryやJavaScriptは不要。

概要

次の「サムネイル付きリンク」のHTMLとCSSの構造や設定を解説する。このページではthumbnail-boxと呼称する。

持ち物の多さで海外旅行初心者だと分かり、中身を見れば不要品が詰まっている - はぴらき合理化幻想

↑サンプルのthumbnail-box

以前に、次のページでchrome拡張機能を紹介した。それに追加したコードの説明も兼ねている。

特長

  • サムネイルと記事タイトルを1つのaタグでリンク可能。サムネイルと記事タイトルで別々のaタグを使用しているコードが多いが、当ページで紹介するコードの方がシンプル。サムネイルと記事タイトルを表示したいだけならこれで十分。
  • クリックできるエリアが広い。サムネイルと記事タイトル以外の空白部分をクリックしてもリンク先に飛べる。

サムネイルを表示するHTMLの構造

簡略化したHTML

具体的なコードを載せる前に、タグ名だけで構造を説明する。imgがサムネイルで、spanがリンク先のタイトル、それらにリンクを設定するためにaで挟んでいる。至ってシンプル。

<a>
  <img>
  <span></span>
</a>

必要な属性を追加したHTML

必要であったり、あった方がいい属性を追加した。追加した部分はこんな背景色

<a href="" target="_blank">
  <img src="" alt="" width="" height="">
  <span></span>
</a>

属性値にリンク先URLやサムネイル画像URLを追加

一気に長くなったように見えるが、画像URLが長いだけ。大したことはやっていない。これで必要なパーツは揃った。後は配置を装飾するだけ。

<a href="http://hapilaki.hateblo.jp/entry/travel-beginner-baggage" target="_blank">
  <img src="http://cdn.image.st-hatena.com/image/square/a10c200fe4edfd449ae42a6f8ccfa4f9ef0b19bf/height=120;version=1;width=120/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhapilaki%2F20140310%2F20140310120454.jpg" alt="持ち物の多さで海外旅行初心者だと分かり、中身を見れば不要品が詰まっている" width="120" height="120">
  <span>持ち物の多さで海外旅行初心者だと分かり、中身を見れば不要品が詰まっている - はぴらき合理化幻想</span>
</a>

HTML内にインラインでCSSを埋め込む

スタイルシートでレイアウト調整。これで完全体。

  • 利点:デザインテーマを変更したり、スマホで見ても同じように表示される
  • 欠点:サムネイル表示の度に同じCSSを記述するのでコードが長くなる
<a style="overflow:hidden;display:inline-block;width:100%;" href="http://hapilaki.hateblo.jp/entry/travel-beginner-baggage" target="_blank">
  <img style="float:left;margin-right:.5em; src="http://cdn.image.st-hatena.com/image/square/a10c200fe4edfd449ae42a6f8ccfa4f9ef0b19bf/height=120;version=1;width=120/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhapilaki%2F20140310%2F20140310120454.jpg" alt="持ち物の多さで海外旅行初心者だと分かり、中身を見れば不要品が詰まっている" width="120" height="120">
  <span style="display:block;overflow:hidden;">持ち物の多さで海外旅行初心者だと分かり、中身を見れば不要品が詰まっている - はぴらき合理化幻想</span>
</a>

追記:

上記コード1行目のwidth:100%;は後から付け足した。アンカーテキストが短くてもクリックできるエリアを横幅いっぱいにするため。

追記ここまで。

外部スタイルシートを使う

上記HTML内にインラインでCSSを埋め込む方法以外を紹介。CSSに慣れている人向け。

HTMLタグにclassを追加

必要な属性を追加したHTMLclassを追加する。便宜上、属性値は省略する。

<a href="" target="_blank" class="thumbnail-box">
  <img src="" alt="" width="" height="" class="thumbnail-box-img">
  <span class="thumbnail-box-title"></span>
</a>

外部スタイルシートに各classの定義を追加

上記コードの各タグにclassを付加したので、それぞれのclassを外部スタイルシートに定義する。

/*
リンク先のサムネイル画像をHTMLタグで表示しCSSで装飾を設定する方法 - はぴらき合理化幻想
http://hapilaki.hateblo.jp/entry/thumbnail-box
*/
.thumbnail-box {
  display: block;
  margin-bottom: .5em;
  overflow: hidden;
  width: 100%;
}
.thumbnail-box-img {
  float: left;
  margin-right: .5em;
}
.thumbnail-box-title{
  display: block;
  overflow: hidden;
}

子孫セレクタでもよい

上記コードでは各タグにclassを割り振ってCSSを定義した。子孫セレクタの方が好きな方はそれでもいいと思う。こんなことを考える人は自力で子孫セレクタ用のCSSを書けると思うので、ここでは割愛する。

はてなブログでのCSS編集へのアクセス方法

次の記事で図解している。

まとめ

文字だけでリンクを設置するよりも、そのリンク先を端的に示せるサムネイル画像がある方が読者に親切かもしれない。

Amazon.co.jp: 現場でかならず使われている CSSデザインのメソッド

てすとてすと