対馬 俊彦
フォーラムへの返信
-
投稿
-
石川さん、なるほど、そういうことでしたか… 了解いたしました。
ご質問者は「CSSで可能であれば…」とのことですが、他にもこのトピックを参考にされる方がいるかもしれないので、フィルターフックを使うやり方も書いてみます。
子テーマの functions.php などに以下の行を追加すれば、モバイル端末での閲覧時にヘッダーロゴ画像が差し替えられます。（たしか、タブレットでもヘッダーロゴ画像が差し替えられたと思う）
add_filter( 'lightning_head_logo_image_url', function( $options ){ if ( wp_is_mobile() ){ $options = 'スマホ用のヘッダーロゴ画像のURL'; } return $options; } );functions.php についての参考ページ ↓
横からすみません。
こんなかんじにしてみたら、いかがでしょうか。
@media (max-width: 480px) { .siteHeader_logo img { opacity: 0; } .siteHeader_logo { background-image: url(スマホ用のヘッダーロゴ画像のURL); background-size: contain; background-repeat: no-repeat; background-position: center; } }このやり方、ちょっと楽できます (^^♪
投稿ページに関しては別の設定があるのでしょうか？
以下のページにやり方が書かれています。
Lightning G3 Pro Unit 0.13.0 でアーカイブページにページヘッダーのサブテキストを設定できるようになりました
ページヘッダーサブテキストを入力すれば表示されます。
添付画像をご参照ください。
Katawara のスライドショーには表示順をランダムにする機能がない（と思います）ので、ご希望の機能を持っているプラグインを使うのがよいと思います。
私が知っているプラグインでその機能があるのは Meta Slider です。
探してみると、他にもあるかもしれません。
フォントがすごく小さいですね。
他のパソコンでダッシュボードにログインしてもこうなるのでしょうか？
もし、他のパソコンでこの現象が起きないのであれば、
お使いのブラウザのキャッシュを削除すれば解決するかもしれません。他のパソコンでもこうなるのであれば… すみません、ちょっと原因が思いつきません。
CSS の記述は正しいです。
いまお使いのロゴ画像のサイズが 280 x 60 ピクセルなので、それ以上大きく表示されないみたいです。
大きい画像にすればいいと思います。
ご質問者と同じバージョンの私の Evergreen サイトでも試しましたが、
アップロードしていただいた PNG 画像をヘッダーロゴ画像として表示できています。ご参考まで…
【追記】わっ、回答したタイミングが遅かった…笑
Lightning デザイン設定 > ヘッダーロゴ画像
ではなく、
Lightning ヘッダー設定 > 透過時 ヘッダーロゴ画像
で設定すればうまくいくと思います。
横からすみません。
レイアウト設定が 2カラム になっているようです。
フッター上部のウィジェットにナビゲーションメニューを設定してしまったように見えます。
有働さん、
私が提示した CSS を追加したまま、VK Blocks をアップデートすると文面と画像の間が大きくなります。
気になるようなら追加した CSS を削除してください。スマホで画像を中央揃えするのがお好みでしたら、以下の CSS に置き換えればオッケーです。
@media (max-width: 575.98px) { .vk_flow .vk_flow_frame_image { margin: 0 auto; } }Variety II にはページヘッダーが存在しないので、編集画面の設定項目は意味がありません。
とりあえず、以下の CSS でご希望の表示になると思いますが…
.page .mainSection header { display: none; }この部分には h1 タグがありますので、非表示にすると SEO 的に問題が生じるかもしれません。
【以下、追記です】
display: none;で h1 タグを非表示にして、別の場所に h1 タグを置いたときって、SEO 的にどうなのかな…？
すみません。その辺、私は詳しくないのでわかりません。ベクトルさんに調整してもらえるなら、HTML に h1 を出力しなくなった状態で、ご自分で h1 を追加する方がいいですね。
文字を回り込ませるやり方はわかりませんが、文字と画像を上下に配置するやり方でいかがですか？
以下の CSS を追加してみてください。
@media (max-width: 575.98px) { .vk_flow .vk_flow_frame { flex-direction: column; } .vk_flow .vk_flow_frame_image { margin: 10px auto 0; } }追加する場所については以下のページを参考にどうぞ。
ダッシュボードで、
設定 → VK Grid Column Card Block
にライセンスキーを入力したらメッセージが消えました。
【追記】VK Grid Column Card Block のバージョンは 0.3.0 です。
