現在ホームページリニューアルに伴い、閲覧しづらい状態になっております。何卒ご了承ください。

Retinaディスプレイでもロゴ画像がぼやけないように、クッキリと表示させる方法

一生懸命作ったブログのロゴ画像。残念ながらそのままアップしても、MacのRetinaディスプレイではぼやけてしまいます。

TCDさんのテーマ『MAG』を例に、クッキリと綺麗に表示する方法を説明します。

[s_ad]

ロゴ画像をアップロードしよう

① 2倍サイズのロゴ画像を用意

ロゴ画像は、表示させたい大きさの2倍のサイズのものを用意してください。

このブログの場合、下の画像のように 340 x 40 で表示させたいので、680 x 80 でロゴ画像を作成しました。

ロゴ画像のサイズを確認

② 画像のアップロード

WordPressの 管理画面外観TCDテーマオプションロゴの設定 の『ステップ1』で、ロゴ画像をアップロードします。

バックアップを取ろう

次に、2倍の大きさのロゴをギュッと圧縮するコードを追記するのですが…その前に、必ずバックアップを取っておきましょう。

FTPソフトを使って、サーバーからダウンロードしても良いですし、該当するファイル(今回は『header-logo.php』)だけ、コピーしておくのも良いでしょう。

 

FileZillaを使用して、バックアップする方法はこちらをご参照ください。
[clink url=”http://integritydesign.jp/filezilla/”]

header-logo.php に追記しよう

WordPressの 管理画面外観テーマの編集 をクリックし、 編集するテーマ を選択します。

ズラッと並んだテーマファイルの中から『functions』をクリックすると、『header-logo.php』が見つかります。

 

クリックすると拡大します。
header-logo.phpの該当箇所

上の画像の赤い矢印で指したところ( ” と / の間)に、下記のコードを追記します。

width=”340″ height=”40″

widthの前は、必ず半角スペースを空けてください。

数字の部分は、表示させたいサイズを入力します。widthは幅、heightは高さです。

 

追記後は、下の画像のようになります。
widthの前、”40″の後ろの黒いアンダーラインは、半角スペースです。

クリックすると拡大します。
header-logo.phpの追記箇所

 

ソースコードも載せておきます。

【追記前】

echo '<h1 id="logo"><a href=" ' . $url . '/" title="' . $title . '" data-label="' . $title . '"><img src="' . $logo['url'] . '?' . time() . '" alt="' . $title . '" title="' . $title . '" /></a></h1>' . "\n";


【追記後】

echo '<h1 id="logo"><a href=" ' . $url . '/" title="' . $title . '" data-label="' . $title . '"><img src="' . $logo['url'] . '?' . time() . '" alt="' . $title . '" title="' . $title . '" width="340" height="40" /></a></h1>' . "\n";

上記をコピペされる場合、width(幅)とheight(高さ)は、適宜変更してください。

最後に

実は、私も難しそうだなと思って放置していたのですが、やってみたら簡単でした。

ぜひ、あなたもチャレンジしてみてください。

 

よかったらシェアしてね!
目次
閉じる