- このトピックには6件の返信、5人の参加者があり、最後に
により2年、 8ヶ月前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
-
投稿
-
【お使いの Snow Monkey のバージョン】16.2.0
【お使いの Snow Monkey Blocks のバージョン】15.0.0
【お使いの Snow Monkey Editor のバージョン】7.0.1
【お使いのブラウザ】Google Chrome### 実現したいこと
ヘッダーに表示されるロゴをPCとスマホ/タブレットで変えたいです。
（スマホとタブレットは同じロゴ）
出来ればTOPページへのリンクは保ったままにしたいです。### 発生している問題
以下の試したことに記載したコードだとロゴが何も表示されなくなりました。
.c-site-branding img{ display: none; }この部分をなくすとロゴが2つ重なって表示されるため、URLが間違っているということはないと思われます。
### 試したこと
追加CSSに以下を記載しました。
@media (max-width: 1023px) { .c-site-branding{ background-image: url(スマホ時の画像のURL); background-repeat: no-repeat; } .c-site-branding img{ display: none; } }いいねをした人: 居ませんCSSのみでやるなら、カスタマイザーでアップしたロゴ画像は
display: none;で消して、スマートフォン／タブレット用のロゴを擬似要素で入れるのはどうでしょうか？@media ( max-width: 1023px ) { .c-site-branding__title a img { display: none; } .c-site-branding__title a::before { /* 適宜調整してください */ content: ""; display: block; width: 120px; height: 40px; background: url(https://example.com/wp-content/uploads/2022/03/logo_sp.png) no-repeat 0 0; background-size: contain; margin-right: auto; } }いいねをした人:
これ僕はあんまりそういうデザインのサイトをつくったことがないんですけど、需要として結構あるものなんですかね？ もし結構需要がありそうであれば、機能として追加するのもありかなと思いまして…。機能追加という形なら
picture使うと結構スマートな HTML で実装できるかなとか。いいねをした人:お世話になっております。
スマートに実装可能なのであれば希望いたします！
シンボルマークを大きく見せたい場合がございます。
具体的には、パソコンでは、シンボルマークを大きく。（デザイン的に、中央ロゴ）
スマホでは、シンボルマークを小さくしたい。
イメージは以下です。ご検討お願いいたします。
いいねをした人:
7件の投稿を表示中 - 1 - 7件目 (全7件中)
- このトピックに返信するにはログインが必要です。