Sample Site
100×100
*2014-02-09 22:59

※ここに管理者コメントが表示されます。

(以下テンプレートの説明)

▼表紙画面
 サムネイルに画像画面へのリンクをつけています。
 アルバム用の追加CSSをつけることで、サムネイルの画像の周りに灰色の枠がつき、フォーカス(マウスオン)時に水色の枠が表示されます。どれを選択しているのか分かりやすくしました。
 リンク下線は表示されません。サムネイルは横50px、縦50pxで固定なので元画像の大きさが違う画像をアップしても統一性は出ていると思います。サムネイル内での縦横比は保たれないので、どちらかが長いと片方に伸びた感じに見えます。

※補足とお願い※
 ドコモフィーチャーフォンにて確認時、画像フォーカス時の枠線色は適用されませんでした。
 一応黒の枠線は出ていたので閲覧には問題ないだろうとしましたが、auやソフトバンクで見づらい(どれが選択中か分からない)などありましたら修正しますのでお知らせ頂けますと幸いです。

▼画像画面
 アルバム用の追加CSSをつけることで、自動で画像サイズを調整するようになります。
 PC:元画像の横サイズが640px(PC枠-余白)を超えた場合、画面内に収まるように調整されます。
 スマートフォン:元画像の横サイズが画面サイズを超えた場合、画面内に収まるように調整されます。
 フィーチャーフォン:一応全端末向けのCSS設定で、元画像の横サイズが画面サイズを超えた場合に、画面内に収まるように調整されるように設定していますが、『max-width』プロパティへの対応状況が分からないのでもしかしたら調整されないかもしれません…。
 ↑の理由から、元サイズの画像を閲覧できるよう『元サイズで見る』のリンクをつけています。

 コメントは直接画像下に書くのではなくコメントページへのリンクをつなげる方法です。
 ちなみにコメントのある機能の、コメント表示や投稿部分のレイアウトは全て同じです。
prev / next
(Back-HOME)
人気急上昇中のBL小説
BL小説 BLove
- ナノ -