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

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

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

STORYにてロゴ画像がretinaディスプレイで粗くなるので、retinaディスプレイでも綺麗に表示させる方法を教えてください。

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

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

2)ダッシュボード左メニュー[外観]→[基本設定]→[カスタムCSS]にて、下記箇所を追加します。
追加する内容:

.h_logo, .f_logo, .top-slider-logo { width:117px; height:auto; }
@media only screen and (max-width: 767px) {
.s_logo, .f_logo, .top-slider-logo { width:80px !important; height:auto; }
}

※widthの値についてはあくまでデモサイト用(234px × 49px)でございますので、適宜ご変更ください。

なお、.h_logoがPC用、.s_logoがスマホ用ロゴ画像に付されるクラスです。
それらに対し、元サイズとは別のサイズを設定しております。

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

タカ

スポーツが好きな30代男性です。 休みの日はフットサルやバスケットをしています。

関連記事

TCD LABO ご利用上の注意

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

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

お問合せ・ご要望

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