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

TCDテーマCOREのスマホサイトにロゴを表示させる方法

Q.スマホサイトにもロゴを表示させたい

TCDテーマ「CORE」を使用している際、スマホサイトで閲覧するとロゴの部分がテキスト(サイトタイトル)になっていると思います。
パソコン閲覧時と同様に、サイトロゴを表示させたいことがあると思います。

下記の方法でカスタマイズをおこなっていただくとスマホにもパソコンと同様のロゴを表示させることができます。

※カスタマイズをされる場合は必ずバックアップしてからおこなってください。

1.カスタマイズするCSSを表示させる

管理画面から【外観】にマウスをあてていただき、【テーマの編集】ボタンをクリックしていただきます。

次に画面をスクロールしていただくと右下に【responsive.css】がありますのでクリックして下さい。

2.下記コードを編集します。

<変更前>

/* ロゴ */
@media screen and (max-width: 625px) {
 #logo_image { margin:21px 0 0 15px !important; z-index:9999; float:left; }
 .pc #logo_image h1 img { display:none !important; }
}

#logo_text { margin:21px 0 0 15px; z-index:9999; float:left; }
#logo_text h1 { font-size:18px; font-weight:normal; }
#logo_text a, #logo_image h1 a { color:#333; text-decoration:none; display:block; }
#logo_text a:hover, #logo_image h1 a:hover { text-decoration:underline; }
#logo_image { margin:21px 0 0 15px; z-index:9999; float:left; }
#logo_image h1 { top:0px !important; left:0px !important; font-weight:normal; margin:0; padding:0; line-height:100%; font-size:18px; }
* #logo_image h1 img { display:none !important; }

#logo a:before { content:attr(data-label); }

<変更箇所>
①下から2行目のコードを変更します。

#logo_image h1 img { display:none !important; }   

↓↓↓

#logo_image h1 img { max-width:100%; height:auto; }   

②下記一番下の行を削除します。

#logo a:before { content:attr(data-label); }

<変更後>

/* ロゴ */
@media screen and (max-width: 625px) {
 #logo_image { margin:21px 0 0 15px !important; z-index:9999; float:left; }
 .pc #logo_image h1 img { display:none !important; }
}

#logo_text { margin:21px 0 0 15px; z-index:9999; float:left; }
#logo_text h1 { font-size:18px; font-weight:normal; }
#logo_text a, #logo_image h1 a { color:#333; text-decoration:none; display:block; }
#logo_text a:hover, #logo_image h1 a:hover { text-decoration:underline; }
#logo_image { margin:21px 0 0 15px; z-index:9999; float:left; }
#logo_image h1 { top:0px !important; left:0px !important; font-weight:normal; margin:0; padding:0; line-height:100%; font-size:18px; }
* #logo_image h1 img { max-width:100%; height:auto; }

3.ロゴサイズを調整する

上記の設定をして頂くと、パソコン用のロゴサイズで表示されるため、スマホサイトでは閲覧すると大きく表示されます。

一番下のコードを下記のよう数値変更していただくと、ロゴが小さくなり綺麗に表示されるようになります。

#logo_image h1 img { max-width:100%; height:auto; }   

↓↓↓

#logo_image h1 img { max-width:50%; height:auto; } 

 

Opinion, Anのテーマで同様の設定を行う場合はこちら

The following two tabs change content below.

関連記事

TCD LABO ご利用上の注意

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

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

お問合せ・ご要望

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