WordPressテーマTCDのカスタマイズを研究するサイト

ロゴ画像をretinaディスプレイ対応にする

Q.ロゴ画像をretinaディスプレイ対応にしたい。

ロゴ画像がretinaディスプレイで粗くなるので、retinaディスプレイでも綺麗に表示させる方法を教えてください。
※リサイズではなく「見栄え」を縮小して解像度を上げたい。

A.以下の手順でretinaディスプレイ対応が可能です

1)ダッシュボード左メニュー[テーマオプション]→[ロゴの設定]にて、
表示させたいサイズの2倍のサイズのロゴ画像をアップロードします。(リサイズは不要)

2)ダッシュボード左メニュー[外観]→[テーマの編集]にて、下記箇所を編集します。
編集するファイル:header-logo.php
編集する箇所:

echo '<h1 id="logo_image" style="top:' . $position_top . 'px; left:' . $option['logoleft'] . 'px;"><a href=" ' . $url . '/" title="' . $title . '" data-label="' . $title . '"><img src="' . $logo['url'] . '?' . time() . '" alt="' . $title . '" title="' . $title . '" /></a></h1>' . "\n";

     ↓

echo '<h1 id="logo_image" style="top:' . $position_top . 'px; left:' . $option['logoleft'] . 'px;"><a href=" ' . $url . '/" title="' . $title . '" data-label="' . $title . '"><img src="' . $logo['url'] . '?' . time() . '" alt="' . $title . '" title="' . $title . '" width="ここに任意の横幅(※数値のみ)" height="ここに任意の縦幅(※数値のみ)" /></a></h1>' . "\n";

※「任意の横幅」「任意の縦幅」の箇所でロゴ画像の表示サイズを設定します。「px」等の単位は不要です。

3)位置調整は、[テーマオプション]→[ロゴの設定]の「ステップ3:位置の調整」で行えます。

※AMORE、LAW、AGENTの場合は対応方法が異なりますのでこちらの記事をご参照ください。

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。