2014-04-15

レスポンシブWordPressテンプレートのロゴ画像をRetinaディスプレイに対応させる簡単な方法

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

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

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

・2倍サイズの画像を縮小させる
・JavaScriptライブラリを使う
・Media Queriesで判定してPC用とモバイル用を別々にする
・表示速度重視であえてRetina対策しない

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

これ!という決定的な対策はありません。
Minimal WPのテーマも自動でRetina対応になるようにはしていません。

なので、今回は初心者の人でも簡単にすぐにできる、

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

というカスタマイズ方法を紹介します。

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

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

logo

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

そして出来上がったロゴ画像をアップロードして、管理画面からロゴに指定します。
このままだと2倍サイズの大きいロゴが表示されるので、
次のステップで半分サイズにします。

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

ダッシュボード>外観>テーマ編集から「header.php」を開いて、
htmlコードのロゴ画像の部分に直接仕上がりサイズを指定します。

例)

『style=”width:250px; height:50px;”』ってのを付け加えただけですね。
これで2倍サイズで作ってアップロードしたロゴを、
サイト上では仕上がりサイズ(1/2サイズ)で表示されるように指定できました。

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

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

おまけ:SVG形式でロゴを作成するのもあり

画像ファイルの形式はJPG、GIF、PNGが一般的ですが、
ベクターデータのSVGというのもあります。

今のところWordPressのメディア機能がデフォルトではアップロード制限してるのですが(セキュリティー的な問題のようです)、
ロゴをSVGで作成してFTPでサーバーにアップロードして、
普通のロゴと同様にimgタグで表示させれば、ボヤけないロゴが表示できます。

実はこれが一番簡単で綺麗なんですけどね〜。
気になる方は、「SVG ロゴ WordPress」みたいな感じで検索して見てください。

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

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

ホームページからの集客できてますか?

ワードプレステーマ「Minimal WP」
シンプルデザインのMinimal WPテンプレートを使えば、おしゃれなホームページやブログが誰でも自分で作れます。面倒な設定が不要なミニマル設計なのでWEB初心者でも簡単。集客やファン獲得に効果抜群です!
おすすめWordPressテーマ10選
by
Minimal WPオススメのレンタルサーバー
WordPressがワンクリックで簡単にインストールできる機能が付いている下記レンタルサーバーがオススメです。【保存版】初心者向けにドメイン・サーバーの取得からWordPressのインストールまでの手順をイチから完全解説しました。→WordPressサイトの始め方・完全手順

シンプルでおしゃれなワードプレステーマ「Minimal WP」