【テーマ編集】スマホ表示時にヘッダーロゴ画像を表示する
サイトのロゴ表示をスマホ閲覧時にはテキストにする仕様のWordPressテーマをカスタマイズする一例です。
編集するテーマ：Reviewer TCD026
編集するファイル：style_sp.css
ｻｲﾄのかなめ
テーマ作者の狙った機能を損なう恐れってあるのかな？
ｻｰﾊﾞｰｶﾞｰﾙ
それは…あるかもね。タイトル変更プラグインとか。
ｻｲﾄのかなめ
このサイトはこのカスタム適用済みだけどね。
ｻｰﾊﾞｰｶﾞｰﾙ
自己責任でね。
ロゴ画像を表示する
|
1 2 3 4 5 6 |
/* logo */ #logo { margin:0 auto; display: block; line-height:32px; font-size:18px; font-weight:normal; overflow:hidden; width: 95%; white-space: nowrap; text-overflow: ellipsis; } #logo_text a, #logo a { text-decoration:none; color: #fff; } #logo_text a:hover, #logo a:hover { text-decoration:underline; } #logo img { display:none; } #logo a:before { content:attr(data-label); } |
display:none; を消して、
サイズ max-width:100%; height:auto; を指定する。
⇓
|
1 2 3 4 5 6 |
/* logo */ #logo { margin:0 auto; display: block; line-height:32px; font-size:18px; font-weight:normal; overflow:hidden; width: 95%; white-space: nowrap; text-overflow: ellipsis; } #logo_text a, #logo a { text-decoration:none; color: #fff; } #logo_text a:hover, #logo a:hover { text-decoration:underline; } #logo img { max-width:100%; height:auto; } #logo a:before { content:attr(data-label); } |
テキスト表示のサイトタイトルを削除する
|
1 2 3 4 5 6 |
/* logo */ #logo { margin:0 auto; display: block; line-height:32px; font-size:18px; font-weight:normal; overflow:hidden; width: 95%; white-space: nowrap; text-overflow: ellipsis; } #logo_text a, #logo a { text-decoration:none; color: #fff; } #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 a:before { content:attr(data-label); } を削除する。
⇓
|
1 2 3 4 5 |
/* logo */ #logo { margin:0 auto; display: block; line-height:32px; font-size:18px; font-weight:normal; overflow:hidden; width: 95%; white-space: nowrap; text-overflow: ellipsis; } #logo_text a, #logo a { text-decoration:none; color: #fff; } #logo_text a:hover, #logo a:hover { text-decoration:underline; } #logo img { max-width:100%; height:auto; } |
