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


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

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

いまごろ。ようやく。

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

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

この4つの中でも、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>

tableがなくなってすっきりしました。

一番悩んだのが縦横中央揃えの部分なのですが、
テーブルをやめてjQueryで実現しました。

こちらのページを参考にさせていただきました♪

jQueryでボックスの中の画像の縦位置を中央に揃える

今まで通り
縦横中央揃えやhover時の効果、loading時のくるくるなど
きちんと再現しています。

PHOTO STOCKER 改善後

満足満足☆

そして今日、ついにPHOTO STOCKERのはてブ数が200を超えました!!!><

実は密かに目標にしていたのですごくうれしいです;;
ソースもきれいになったし、4つともこれからも更新がんばります☆


こちらの記事もおすすめです

このブログで人気の記事です

コメント(Facebookのコメント機能を利用しています)

»

«


↓その他運営中のサイトのご紹介

Fireworksマニア Webサイトからカラーを抽出!分析!Web Site Color Picker PHOTO STOCKER -高解像度の無料写真素材- 壁紙カレンダー -デスクトップを飾る、サイズ豊富なデスクトップ壁紙- シンプルパターン研究所 -PhotoshopやFireworksで便利に使えるテクスチャ素材-
スタイルシート見出しメーカー -好きな色で作れる、あなた用のCSS見出し- ビビッドカラーズ -キュートなホームページ素材配布サイト- Android用の壁紙無料ダウンロードサイト Webデザイナー山口有由希のポートフォリオサイト