Facebook
RSS Feed
Apr 15, 2014

ロゴ画像をRetinaディスプレイに対応させる簡単な方法

iPhoneや最近のMacのいいやつだとRetina(高解像度)ディスプレイなので、
普通に作成したロゴ画像だとぼやけて見える、なんてことがありますよね。
あんまり気にならない人はそのままでいいと思うんですけど、
レスポンシブテーマで画像をRetina対応させたい!と言う方に、
簡単なカスタマイズ方法を紹介します。

画像のRetinaディスプレイ対策いろいろ

Retinaディスプレイへ画像を対応させる考え方や方法は、

・2倍サイズの画像を縮小させる
・JavaScriptライブラリを使う
・Media Queriesで判定して振り分ける
・表示速度重視であえてRetina対策しない

などなど、いろいろな考え方があります。

まだ各ブラウザでRetinaの扱い方というか仕様が定まってない過渡期なので、
これ!という決定的な対策はありません。
(Minimal WPのレスポンシブテーマも自動でRetina対応になるようにはしていません)

なので、ここで紹介するのは、初心者の人でもすぐにできる、
一番簡単にとりあえずロゴ画像だけ綺麗に見えるようにする場合のカスタマイズ方法です。

ロゴ画像をRetinaディスプレイに対応させる一番簡単な方法

結論から言いますと、ズバリ、

「倍のサイズでロゴ画像を作成して、無理矢理50%に縮小して表示させる」

です。

ステップ1:まずは倍のサイズで画像を作る!

例えば、仕上がりサイズを「横幅284ピクセル、高さ66ピクセル」で作りたいとします。

logo

そしたら、単純に倍のサイズ「横幅568ピクセル、高さ132ピクセル」でロゴを作成します。

そして出来上がったロゴ画像をアップロードして、管理画面からロゴに指定します。

ステップ2:表示サイズを無理矢理50%にする!

header.php(あればheader-single.phpも)を開いて、
htmlコードのロゴ画像のリンク部分に直接仕上がりサイズを指定します。

例)

<img src=”ややこしいコード(省略)” alt=”(省略)” style=”width:284px; height:66px;” />

『style=”width:284px; height:66px;”』ってのを付け加えただけですね。
ややこしい画像URLのコード部分はphpで書かれてますが、
よーく見ると全体は普通のHTMLと一緒です。

<Retinaに対応したロゴ画像の完成>

これでRetinaディスプレイで見てもぼやけないロゴ画像が出来ました。
お試しあれ〜。

レスポンシブテーマで画像をRetina対応させる方法は、
用途と目的に応じてどういう対応をしたらいいか(または対応させないか)は異なるので、
「Retina対応 画像」とかでGoogle検索して、自分のサイトに使いやすい方法を見つけてください。

カスタマイズの無料サポートは行ってませんので、分からない所はGoogleで調べてくださいね!特にHTML/CSSの記述方法やブラウザの仕様等は時代とともに変わるので最新情報を各自見直してください。あと作業する時はバックアップを忘れずに!
Posted in WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト