画像を用いたindex
Posted by
@tuzura_ori
@tuzura_ori
こちらではインデックスの例を２つ、解説付きでご紹介。
尚、リンクタグ＜a＞を使用しなければ、画像アドレスはそのまま。
リンクタグを使用する場合は、httpsをimgに変更します。
又、テキストを回り込ませる為、縮小はpxで指定しています。
画像の縮小表示（サムネ）＋文章、サムネをクリックしてオリジナル画像のみを表示
Paraphiliaシリーズ
１２時の鐘が鳴り終わっても
シンデレラのガラスの靴は消えなかった。
其処にどんな意味があるか…
物語自体に興味はないので、深く考えた事はない。
が、この世でたった１人。
絵本なのか、映画だったか…
すでに忘れてしまったが
小鳥たちがシンデレラの元へドレスを届けるシーンは
今も鮮明に覚えている。
【タグ】
＜span style="padding : 10px 40px ; border:1px solid #999;"＞タイトル（いわゆる、見出し）＜/span＞
＜span style="float: right; margin: 5px auto; width:500px;"＞画像の説明
あいうえお
かきくけこ
さしすせそ＜/span＞＜div style="width:200px;height: 200px;"＞画像のURL＜/div＞
※見出しのタグを除き、↑を必要数繰り返します。
画像の縮小表示（サムネ）＋文章、画像を使用したページを呼び出す
Paraphiliaシリーズ
童話に限らず、『物語』にはお菓子や食べ物が色々登場する。
ヘンゼルとグレーテルのお菓子の家
ナルニア国物語のターキッシュ・デライト。
若草物語の塩漬けライム、足長おじさんのレモンゼリー
マフィアが愛したカンノーリ…
【パティシエ】⇒
「ねぇ、お兄ちゃん。
シンデレラに出て来る妖精は名付け親なんでしょ」
「そうだよ。
だから、フェアリー・ゴッドマザーって言うんだ」
【名付け親】⇒
【タグ】
＜span style="padding : 10px 40px ; border:1px solid #999;"＞タイトル（いわゆる、見出し）＜/span＞
＜span style="float: right; margin: 5px auto; width:500px;"＞画像の説明
あいうえお
かきくけこ
さしすせそ
＜a href="呼び出したいページのURL" target="_blank" title="別窓で開きます"＞ページへ⇒＜/a＞＜/span＞＜div style="width:200px;height: 200px;"＞画像のURL＜/div＞
※見出しのタグを除き、↑を必要数繰り返します。
投稿にいいねする