サイン　バイノー！　おっしーです。

今回はWordressにどうやってレスポンシブデザインを組み込むか？に焦点を絞ってみました。

まず「レスポンシブデザイン」について。

弊社のデザイナーの記事を読んでいただくと、すごくわかりやすいと思います。

必読！5分でわかる流行のレスポンシブWebデザインまとめ
必読！5分でわかる流行のレスポンシブWebデザインまとめ その2！！
必読！5分でわかる流行のレスポンシブWebデザインまとめ 制作編

で、今回は画像のサイズに対応するにはどうするか？と言う事ですね。

WordPressでは便利な関数『the_post_thumbnail』がございます。

ドキュメントを確認して頂けると…

「トリミング」処理なので画像が切り抜かれてます。

/* functionで定義する */
add_image_size( 'category-thumb', 300, 300 ); //300 pixels wide (and unlimited height)

/* アイキャッチ画像表示 */
the_post_thumbnail( 'category-thumb' ); ?>

吐き出されるタグは

<img width="300" height="300" src="XXXX/wp-content/uploads/年/月/XXX幅-高さ.jpg">

となります。

お？

つまり

幅　×　高さ

が設定されています。

レスポンシブの意味がないので、パーセント指定で正しく回転されても問題がないようにします。

「％」指定の前にサムネイル画像のサイズが決まっているのがよくないですね。

そこで今回は『wp_get_attachment_image_src』を使用します。

// 該当の画像idを取得する
$_attachment_id = get_post_thumbnail_id( $_attachment_id );

/*
* 返ってくる引き数は配列
* [0]・・・イメージファイルのURL
* [1]・・・幅
* [2]・・・高さの
*/
$_attachment = wp_get_attachment_image_src( $_attachment_id, "サイズ指定したくない場合はnone" );

// で、幅だけ指定の画像をよしなにドウゾ
echo '<img src="'.$_attachment[0].'" width="指定したい幅" />';

幅指定だけにしちゃえば万事解決じゃん、ってことですね！やったね！

色んなコーディングをもっと理解できるようになるために此日々精進也。

コォー、カッカッカッ！