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

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

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

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

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

カスタマイズ前の表示は以下の画像のようになっていると思います。
以下に変更の手順をキャプチャ画像を織り交ぜながら説明していきます。

編集するファイル：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;を消した時の表示

サイズ指定後の表示

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

/* 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%に変更後の表示

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

/* 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;)

ヘッダーロゴ画像の位置(余白)の調整は以下のmarginの値(左から上余白、右余白、下余白、左余白)をご変更ください。

#logo { margin:5px 0 0 15px; line-height:120%; float:left; font-size:18px; font-weight:normal; width:100%; overflow:hidden; }

※アップデートにてスマホロゴ設定項目を順次追加しております。

下記の項目がある場合は、カスタマイズすることなく表示が可能です。
TCDテーマオプション→ロゴ設定の箇所を一度、ご確認をお願いします。