VIVID COLORS + BLOG -福岡で働くWebデザイナーのブログ-

すてきなWebサイトをひたすらつくりつづけたい。

WEBデザイナー YUKI YAMAGUCHI WEBデザインポートフォリオサイトへ

Fireworksマニア

2010/ 07/ 07

Tweet

この記事は約 7 分で読めます。

個人サイト4つをValidなHTML化しました

タイトルの通りなのですが、

いまごろ。ようやく。

の4つのサイトをValidなHTML化しました！

気になってはいたものの…ずっと放置していました…。

この４つの中でも、PHOTO STOCKER のコードは特にひどくて
縦横中央揃えやhover時の効果、loading時のくるくるなど
いろいろ実現したいがために
aタグにtableタグを入れ込むという苦肉過ぎる作を講じていました。。。

これまでのコードはこちら。

※wpのテーマのコードまるっと貼りました。
見にくかったらごめんなさい＞＜

この部分をざっくりと解説しますと、
写真のカテゴリーの中からランダムに12件取得
fanctions.phpに書いているオリジナル関数（get_the_post_image_src）を使って、それぞれのエントリーに関連付けされている画像ファイルの1枚目のサムネイルのURLを取得、それを表示しています。

WPがらみのこのへんは、需要がありそうだったら別エントリーで書いてみようかと思います。

<div class=”photoList photoListRandom clearFix”>
<?php query_posts(‘cat=5&orderby=rand&posts_per_page=12′); ?>
<?php while (have_posts()) : the_post(); ?><div class=”photoItem”>
<div class=”photoImg”>
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”>
<span class=”photoThumbnail”>
<img src=”<?php echo get_option(‘home’); ?>/wp-content/themes/photobox2/images/imgLink.gif” class=”listImgLink” />
<table>
<tr><td><img src=”<?php print get_the_post_image_src(get_the_ID(),”thumbnail”); ?>” class=”listImg” alt=”<?php the_title(); ?>の無料写真” /></td></tr>
</table>
</span>
</a>
</div>
</div>
<?php endwhile; ?>
</div>

aタグの中にtableタグが入っちゃってますね…
これはひどい＞＜

改修した新しいコードがこちら↓

<div class=”photoList photoListRandom clearFix”>
<?php query_posts(‘cat=5&orderby=rand&posts_per_page=18′); ?>
<?php while (have_posts()) : the_post(); ?>
<div class=”photoItem”>
<div class=”photoImg”>
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php printf(__(‘Permanent Link to %s’, ‘kubrick’), the_title_attribute(‘echo=0′)); ?>”>
<span class=”photoThumbnail”>
<img src=”<?php echo get_option(‘home’); ?>/wp-content/themes/photobox2/images/imgLink.gif” class=”listImgLink” alt=”" />
<img src=”<?php print get_the_post_image_src(get_the_ID(),”thumbnail”); ?>” class=”listImg” alt=”<?php the_title(); ?>の無料写真” /></td></tr>
</span>
</a>
</div>
</div>
<?php endwhile; ?>
</div>