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

TCDテーマのスマホ表示時にスマホ用のヘッダーロゴ画像を表示する

Q.スマホ閲覧時にヘッダーロゴを表示させたい

PC閲覧のときにはテーマオプションで設定したヘッダーロゴが表示されるのですが、スマホ閲覧時にはサイトタイトルのみの表示になってしまいます。スマホでもヘッダーロゴ画像を表示できるようにはならないでしょうか?

A.下記の手順でカスタマイズしてください。

現在TCDのテーマではプラグインなどに対応するために、スマホでのロゴ表示はテキストとなる仕様です。ですが、カスタマイズすることでヘッダーロゴ画像をスマホでも表示させることができます。

ヘッダーロゴの画像をスマホでも表示させる方法

カスタマイズ前の表示は以下の画像のようになっていると思います。
以下に変更の手順をキャプチャ画像を織り交ぜながら説明していきます。
smartphone-headerlogo1
編集するファイル:style_sp.css(以下全て)
※CUBEY(TCD023)の場合はresponsive.css(以下全て)
編集する箇所:
①display:none;を消してサイズを指定する

/* logo */
#logo { margin:5px 0 0 15px; line-height:120%; float:left; font-size:18px; font-weight:normal; width:40%; overflow:hidden; }
#logo_text a, #logo a { color:#333; text-decoration:none; display:block; }
#logo_text a:hover, #logo a:hover { text-decoration:underline; }
#logo img { display:none; }
#logo a:before { content:attr(data-label); }

/* logo */
#logo { margin:5px 0 0 15px; line-height:120%; float:left; font-size:18px; font-weight:normal; width:40%; overflow:hidden; }
#logo_text a, #logo a { color:#333; text-decoration:none; display:block; }
#logo_text a:hover, #logo a:hover { text-decoration:underline; }
#logo img { max-width:100%; height:auto; }
#logo a:before { content:attr(data-label); }

display:none;を消した時の表示
smartphone-headerlogo2

サイズ指定後の表示
smartphone-headerlogo3

②ヘッダーロゴが表示される領域を広げる

/* logo */
#logo { margin:5px 0 0 15px; line-height:120%; float:left; font-size:18px; font-weight:normal; width:40%; overflow:hidden; }
#logo_text a, #logo a { color:#333; text-decoration:none; display:block; }
#logo_text a:hover, #logo a:hover { text-decoration:underline; }
#logo img { max-width:100%; height:auto; }
#logo a:before { content:attr(data-label); }

/* logo */
#logo { margin:5px 0 0 15px; line-height:120%; float:left; font-size:18px; font-weight:normal; width:100%; overflow:hidden; }
#logo_text a, #logo a { color:#333; text-decoration:none; display:block; }
#logo_text a:hover, #logo a:hover { text-decoration:underline; }
#logo img { max-width:100%; height:auto; }
#logo a:before { content:attr(data-label); }

※2行目のwidth:40%をwidth:100%に変更

100%に変更後の表示
smartphone-headerlogo4

③テキストで表示されているサイトタイトルを削除する

/* logo */
#logo { margin:5px 0 0 15px; line-height:120%; float:left; font-size:18px; font-weight:normal; width:100%; overflow:hidden; }
#logo_text a, #logo a { color:#333; text-decoration:none; display:block; }
#logo_text a:hover, #logo a:hover { text-decoration:underline; }
#logo img { max-width:100%; height:auto; }
#logo a:before { content:attr(data-label); }

/* logo */
#logo { margin:5px 0 0 15px; line-height:120%; float:left; font-size:18px; font-weight:normal; width:100%; overflow:hidden; }
#logo_text a, #logo a { color:#333; text-decoration:none; display:block; }
#logo_text a:hover, #logo a:hover { text-decoration:underline; }
#logo img { max-width:100%; height:auto; }

※6行目の#logo a:before { content:attr(data-label); }を削除

サイトタイトル削除後の表示(marginの値は15px 0 0 15px;)
smartphone-headerlogo7
ヘッダーロゴ画像の位置(余白)の調整は以下のmarginの値(左から上余白、右余白、下余白、左余白)をご変更ください。

#logo { margin:5px 0 0 15px; line-height:120%; float:left; font-size:18px; font-weight:normal; width:100%; overflow:hidden; }
The following two tabs change content below.

tcd

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

関連記事

TCD LABO ご利用上の注意

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

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

お問合せ・ご要望

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