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

ロゴ画像をretinaディスプレイ対応にする(カスタムCSS使用)

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

ヘッダーロゴ、フッターロゴの画質がretinaディスプレイで粗くなるので、retinaディスプレイでも高解像度で表示する方法を教えてください。

A.カスタムCSSに下記コードを追加することでretinaディスプレイ対応が可能です

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

2)ダッシュボード左メニュー[外観]→[テーマオプション]→[基本設定]タブ内にあるカスタムCSSに、下記のようなコードを追加します。

.h_logo, .f_logo { width:●●●px; height:●●px; }

※「width:●●●px」、「height:●●px」の●●●に任意の値を入力してロゴ画像の表示サイズを設定します。
3)位置調整は、[テーマオプション]→[ロゴの設定]の「ステップ3:位置の調整」で行えます。

関連記事

TCD LABO ご利用上の注意

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

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

お問合せ・ご要望

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