Home > スポンサー広告 > レスポンシブ・イメージ的に今使えそうな部分と、WordPressでの扱い方

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/159-83e0a66d
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > レスポンシブ・イメージ的に今使えそうな部分と、WordPressでの扱い方

Home > wordpress > レスポンシブ・イメージ的に今使えそうな部分と、WordPressでの扱い方

レスポンシブ・イメージ的に今使えそうな部分と、WordPressでの扱い方

  • vanillate
  • 2015-06-10 Wed 11:12:13
  • wordpress
responsive.jpg

レスポンシブ・イメージ。
ざっくり言うと、「retinaなど高解像度なディスプレイも増えてきたし
そろそろPCビューでも@2xと@1xと両方の画像を処理しましょうかね。」
・・という処理と、

レスポンシブレイアウトの際にさらに
「どうやって高解像度画像とノーマル画像を扱っていくの?」
っていう課題みたいなところのことかなと思っています。

そんなレスポンシブ・イメージ的なコーディングのしかたと
ついでのWordPressで「今」どうやって扱うといいかなぁという考察です。

retina.jsはなんとなく重いイメージ

「retina.js」は、「/images」 などのフォルダに「a.jpg」 と 「a@2x.jpg」 を放り込めば自動でretinaな場合にのみ@2xに変えてくれる便利なjsです。

→わたしが使ったタイミングがだいぶ前なので、今はよくわからないのですが
なんとなく重い、あと、なんか変換されてるのか不安になるので、設定が簡単なので捨てがたいのですが、使いたい度でいうと低め。

結局htmlでは、imgタグに「srcset」を追加するのがいい気がしました

imgタグ内にノーマル画像と、retina画像を紐付ける方法です。

<img src="images/a.jpg" alt="" srcset="images/a@2x.jpg 2x"/>


わかりやすいように@2xつけてますが、要はretina用のサイズの画像であればOK。

pictureタグは、アートディレクション(各幅のときに画像の縦横比を変える)の時につかうと良いそうで。
単純に画像を縮めたい場合はsrcsetでOKっぽいみたいです。→参考サイト

CSS背景の場合は@mediaで分けて書く

背景画像のサイズだけきちんと指定してあげれば、あとは道なりに解釈してくれます。
要はどこの数値を基準にして@2x画像を計算するかっていうのが大事っぽいです。


.image_class{
background-image: url("images/a.png");
background-size: 100px 100px;
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
(min-resolution: 2dppx){
.image_class{
background-image: url("images/a@2x.png");
}
}


本気でレスポンシブするときに、画像はどれだけ必要になる?

レスポンシブ・イメージ系の流れに沿ったブレークポイントで考えると
1つの画像に、400w、800w、1200wの3つに対して違う画像を用意すればよいってことになります。

PCサイトでRetina対応したいときは、2x設定でいいので同じ内容の画像を2枚ですね。

各ブレークポイントに対していろいろいじりたいときは、さらに複雑になっていくんじゃないですかね。

WordPressでアイキャッチ画像に自動で適用したいとき

複雑なのは置いておいて、PCサイトで @1x と @2x を自動で作りたいときは

■functions.php


if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 280, 396, true ); // 初期設定の投稿サムネイル値
}

if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'news-thumb', 82, 82, true ); //小さな四角(サイドメニューなど用)
add_image_size( 'news-thumb-x2', 164, 164, true ); //小さな四角(サイドメニューなど用)retina用
add_image_size( 'post-thumbnails-x2', 560, 792, true ); //縦長(一覧用)retina2倍
}


こんな感じで、必要な分だけ切り取ってもらえるように設定して
任意のループ内で


/* 定義 */

$image_id = get_post_thumbnail_id();
$news_normal_imgs_url = wp_get_attachment_image_src($image_id,'news-thumb', true);


/* 呼び出し */
echo $news_normal_imgs_url[0];


こんな感じで呼び出して、imgタグの src と srcset にわけて入れていけばいけそうです。
切り取る画像の縦横比がいろいろ変わる場合は、正方形の大きめ画像をアップロードしてもらうようにすればよさげですね。

*いまのところ、記事内の画像に関しては、圧縮をかけた画像を1/2にするだけにするか、srcsetを書き込んでもらう、くらいでいいんじゃないでしょうか。

コツは、retina画像と、ノーマル画像のサイズを用意して、画像URLを取得して、タグ内に振り分けるということです。


大きな画像を扱うときは、画像の圧縮も忘れずに。速さに関しては、今以上にネット回線が速くならないとどうしようもないですね。
まだいろいろバラバラに散らばってますが、じきに技術的にもまとまってくるのではないかとおもいます。

ご参考にどうぞ。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/159-83e0a66d
Listed below are links to weblogs that reference
レスポンシブ・イメージ的に今使えそうな部分と、WordPressでの扱い方 from バニデザノート

Home > wordpress > レスポンシブ・イメージ的に今使えそうな部分と、WordPressでの扱い方

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。