Discordコミュニティを作りました! 参加する

フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
スライダーのメインビジュアルに画像を重...
 
通知
すべてクリア

[解決済] スライダーのメインビジュアルに画像を重ねるように配置したいです。

7 投稿
4 ユーザー
0 Likes
813 表示
kenjireds08
(@kenjireds08)
投稿: 4
メンバー
Topic starter
 
CleanShot 2024 04 04 at 16.36.15

【やりたいこと】

添付画像のようにスライダーのメインビジュアルに画像を重ねるように配置したいです。

【やってみたこと】

CleanShot 2024 04 04 at 16.41.05
maru PC@2x

メインビジュアルの下にフルワイドで上部が丸くなっている画像を背景に設置

CSSで background-positionを変更することで上に移動することはできました。

.swell-block-fullWide.has-bg-img{
background-position: 49% 15% !important;
}

15%の部分の調整で移動します。

 

これをメインビジュアルの上に重なるように配置したいのですが、position: relativeとz-indexなどを設置してもメインビジュアルの下に隠れてしまいます。

 

うまくメインビジュアルの上に配置できる方法をご存じの方がいらっしゃいましたらご教授頂きたいです。

よろしくお願い致します。

確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*, WordPress更新後、SWELLは最新版にしましたか?, Googleなどでも検索してみました
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.10.0
利用中のPHPバージョン
8.1.22
OS
Mac
利用中のWordPressバージョン
6.5
利用中のサーバー会社
Xサーバー
ブラウザ
Chrome
利用中のプラグイン一覧

BBQ Firewall
Blocks Animation: CSS Animations for Gutenberg Blocks
Combine Social Photos | Still BE
SEO SIMPLE PACK
WP Multibyte Patch
XML Sitemap Generator for Google
XO Security

This topic was modified 8か月前 by kenjireds08
 
投稿済 : 04/04/2024 4:49 pm
skillsharejp
(@skillsharejp)
投稿: 1151
SWELL高速化顧問
 

有料でウェブ制作経験者に相談されるのが一番な気がします。(ガイドラインにも記載されてます。)

SWELLフォーラムはユーザーフォーラムのため、開発者以外の回答は全て任意です。当アカウントによる回答もボランティアのため、ヒントの提供に留まる場合があります。

ご依頼のご相談・お問い合わせ窓口
https://kanripress.ne.jp/contact/
WordPress保守管理・セキュリティ対策
https://kanripress.ne.jp/wordpress-maintenance/

 
投稿済 : 04/04/2024 4:55 pm
kenjireds08
(@kenjireds08)
投稿: 4
メンバー
Topic starter
 

@skillsharejp さん、アドバイスありがとうございます!

もう少し自分でも調べてみて、ダメそうなら相談してみます。

 
投稿済 : 04/04/2024 6:33 pm
His-
 His-
(@his)
投稿: 64
メンバー
 

@kenjireds08 

背景画像を動かすのではなくコンテンツを動かせばうまくいくと思いますよ。

お問い合わせ先▶︎https://blog-mi.com/contact/

 
投稿済 : 04/04/2024 9:29 pm
genepine
(@genepine)
投稿: 59
メンバー
 

画像ブロックをグループ化
グループ、画像に追加 CSS クラス、独自のものを設定

ごにょごにょ
グループ は position: relative
画像 は position: absolute;

スマホのときはどうするか要検討

 
投稿済 : 04/04/2024 11:49 pm
kenjireds08
(@kenjireds08)
投稿: 4
メンバー
Topic starter
 

@his さん

コンテンツを動かしたらうまくいきました!!

ありがとうございます(T_T)

 
投稿済 : 05/04/2024 7:44 am
kenjireds08
(@kenjireds08)
投稿: 4
メンバー
Topic starter
 

@genepine さん

アドバイスありがとうございます!

参考にさせていただきます!

 
投稿済 : 05/04/2024 7:45 am
共有: