コミック新刊の平積み表示に、タイトルのテキストを追加してみた

今までは、何も考えずに出力していたけど、文字列を表示するとレイアウトをちょっと考えないとダメだよな～。
でも、CSSとかあんまりやりたくないし～と調べていたら、HTML5から＜figcaption＞という画像の説明文用のタグが追加されていたので楽だった！
やはりプログラマは三大美徳に従って、楽するための努力を惜しんではいけないね(^_^)/

参考URL:
キャプション(題名)付きの画像を縦横に等間隔で並べるCSS

1, ただ、＜figcaption＞はブロック要素(勝手に改行される)ので、インライン要素にするために結局CSSを使う事に
2, あと、タイトル文字が長くても画像の幅に合わせて改行するにはCSSがやっぱり必要！

<style>
figure {
    display:inline-table;       /* タイトル文字が長くても画像の幅に合わせて改行 */
    margin: 0px 0px 0px 0px; /* 余白は０ */
    width:1px;
}
</style>

<style>

figure {

display:inline-table; /* タイトル文字が長くても画像の幅に合わせて改行 */

margin: 0px 0px 0px 0px; /* 余白は０ */

width:1px;

}

</style>

最初、タイトル文字列は上部に表示した方がいいかな？と思ったけど、複数行になると画像の位置がその分だけズレて、ガタガタな感じだったので素直に下にした。

<figure>
	<a href=""><img src=""></a>
	<figcaption>タイトル文字が長くても画像の幅に合わせて改行</figcaption>
</figure>

<figcaption>タイトル文字が長くても画像の幅に合わせて改行</figcaption>

</figure>

表紙だけ出力すればいいだろ！と思っていたけど、見てみると意外にイイ感じだった。

1, タイトルは書き文字が多いので、表紙によっては気づかない場合がある(テキスト検索もできるようになった）

2, 同じ(ような)表紙が２枚あったりする(片方が特装版だったりする)

3, 巻数も同様に書き文字だったりするので、タイトルテキストの方が分かりやすい。

巻数について調べてみたら、前巻や次巻を調べる方法って無いのね…。
ISBNやタイトルでamazon検索して、
「よく一緒に購入されている商品」「この商品を買った人はこんな商品も買っています」
から、何となく前巻・次巻っぽい奴を探す。

amazonでも巻数というステータスは無くて、表紙やタイトルテキストから判別するしかないけど、本によって結構違う(^_^;)
出版社や何々コミックスって文字列があったりなかったりとブレまくり。
そういや完結情報ってのも無いな…。

チェイサー 4 (ビッグコミックス)
ウロボロス―警察ヲ裁クハ我ニアリ―　23巻
彼岸島 48日後…(8)
でぶせん(9)<完>

テキストを追加しただけだが、結構目の動線を違いを感じるし、なんというか脳みその使っている部分も違う気がする…。
テキストの非表示機能があっても良いかも？

関連記事