フォーラムをリニューアルしました！
今後は、新フォーラムをご利用ください。
メインビジュアルの上に画像を入れて、位置調整とリンクを貼りたい。 < SWELLに関する質問
通知
すべてクリア
Topic starter
お世話になっております！
大西です＾＾
前に相談させて頂いた件ですが、
下記のサイトのように、
https://spiritualcoordinator.com/aspee/
メインビジュアル（背景画像）の上に
・画像を入れて
・その画像を左に寄せて
・その画像からリンクを貼りたいです。
また、スマホで閲覧の際は
スマホでの表示（PCと異なる表示）にしたいです。
上記参考サイトのメインビジュアルの仕様に
そのまましたいのですが、
どのようにしたらよろしいでしょうか？
教えていただけると嬉しいですm(__)m
よろしくお願いいたします。
投稿済 : 18/09/2019 9:12 am
まず、子テーマのfunctions.phpに以下のコードを挿入していただき、
add_action( 'swell_inner_main_visual', function() {
?>
<div class="catch-area_inner">
<a href="https://spiritualcoordinator.com/aspee/about/">
<img src="https://spiritualcoordinator.com/aspee/wp-content/uploads/2019/08/about1.png" alt="aspeeについて" class="pc_">
<img src="https://spiritualcoordinator.com/aspee/wp-content/uploads/2019/08/about1_sp.png" alt="aspeeについて" class="sp_">
</a>
</div>
<?php
} );
その後、子テーマのstyle.cssもしくはカスタマイザーの「追加CSS」にてCSSを調節してください。
例えば、現状のサイトと同じようにするには以下のようなCSSを追加すれば良いかと思います！（細かい部分は調整してください）
#main_visual{
position: relative;
overflow: visible !important;
}
.catch-area_inner{
position: absolute;
bottom: 40px;
left: 40px;
width: 256px;
z-index: 1;
}
.catch-area_inner img{
width: 100%;
}
@media screen and (max-width: 959px) {
#main_visual{
margin-bottom: 128px;
}
.catch-area_inner{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(50%);
width: 64%;
max-width: 256px;
}
}
This post was modified 5年前 by 了(開発者)
投稿済 : 18/09/2019 10:06 am
Topic starter
今TESTサイトで
・子テーマのfunctions.phpに記述
・子テーマの「追加CSS」に記述
を試してみたのですが、
反映されないです(TT)
http://takeshi0723.xsrv.jp/test/
上記2つ以外に何かしなければならないことはあるのでしょうか？
投稿済 : 18/09/2019 11:16 am
考えられるのはキャッシュでしょうか。
もしキャッシュ機能を使っている場合はHTMLが記憶されてしまっているので、一度オフにした状態でやってみてください！
投稿済 : 18/09/2019 1:37 pm
あ、SWELLのバージョンは最新版になってますか？？
投稿済 : 19/09/2019 3:45 am
Topic starter
投稿済 : 20/09/2019 6:10 pm
Topic starter
投稿済 : 21/09/2019 4:07 am
あ、よかったです！
投稿済 : 21/09/2019 4:09 am