質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

3029閲覧

sliderProでimgに入りこんだmarginを消したい

gangarujoma

総合スコア14

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/08/24 16:14

編集2018/08/25 08:12

sliderProでimgに入りこんだmarginを消したい

wordpressでwebサイトを制作しています。
sliderProを使用してトップページメイン画像をフェードで動くスライダーを実装したいのですが、
imgタグ内にstyleでmarginが勝手に入り込んでしまい、どうにも困っています。
こちらを消すにはどのようにしたらよろしいのでしょうか。

もしくは、sliderPro同様にレスポンシブ対応で、retina対応やスマホ用など画像サイズの分岐ができ、
fadeが使えて、横幅100%でスライダーが実装できるものがもしあればお教えいただけるとありがたいです。

お手数をおかけしますが、お分かりになられる方いらっしゃいましたら
どうぞよろしくお願いいたします。

該当のソースコード

html

1<link rel="stylesheet" href="http://www.yamanoco.com/wp-content/themes/minar-child/css/slider-pro.min.css"/> 2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 3<script src="http://www.yamanoco.com/wp-content/themes/minar-child/js/jquery.sliderPro.min.js"></script> 4<script> 5 $( document ).ready(function( $ ) { 6 $( '#slider3' ).sliderPro({ 7 width: '100%',//横幅 8 arrows: false,//左右の矢印を出す 9 buttons: true,//ナビゲーションボタンを出す 10 aspectRatio: 1.5,//スライドのアスペクト比 11 forceSize: 'fullWidth',//ウィンドウ内全画面表示 12 slideDistance:0,//スライド同士の距離 13 responsive:true, 14 aspectRatio:3, 15 fade:true, 16 }); 17}); 18 19</script>

php

1<?php if(is_page( '112' )): ?> 2<div id="slider3" class="slider-pro"> 3 <div class="sp-slides"> 4 <div class="sp-slide"> 5 <img class="sp-image" src="/images/main/main01.jpg" /> 6 </div> 7 <div class="sp-slide"> 8 <img class="sp-image" src="/images/main/main02.jpg" /> 9 </div> 10 <div class="sp-slide"> 11 <img class="sp-image" src="/images/main/main03.jpg" /> 12</div> 13 <!--/ sp-slides--></div> 14<!--/ full--></div> 15 16<?php else: ?> 17<?php endif; ?>

試したこと

1)
imgタグにあらかじめstyle="margin:0;"を入れてみましたが、
同じmarginに上書きされてしまい、消すことはできませんでした。
2)
*{
margin: 0;
padding: 0;
}
を入れてみましたが、marginに変更はありませんでした。
3)
ウィンドウ幅を変更するとなぜか横幅100%に表示されるようでした。

補足情報(FW/ツールのバージョンなど)

該当URLです。
http://www.yamanoco.com/

追記)
◼️確認したOS
・iMac 10.13.3
chrome(68.0.3440.106最新版)
Safari(11.0.3)
・iPhone SE
Safari(11.0)
・IE11(バージョン不明)
◼️Wordpressテンプレート
minar
http://wp.regaltheme.com/minar/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bwz61366

2018/08/24 23:23

確認してみた限り、marginかかってないけど、どのブラウザでmarginかかってんの?現象が再現する環境もうちょっと詳細によろしく
gangarujoma

2018/08/24 23:42

ご確認いただきありがとうございます。確認はchrome、Safari、スマホSafari、IE11でも同様の現象を確認しました。気まぐれにmarginが入り込むようで、再読み込みしていただくとmarginがでるかもしれません。昨日は毎度marginが入り込んでましたが、一昨日は再読み込みする度にmarginが入ったり入らず横幅100%で表示されたりとマチマチでした。
m.ts10806

2018/08/25 00:42

WordPressをタグに追加しておいてください。jQueryプラグイン以外にもCMS本体からの影響、テーマからの影響など多角的な対応が必要となり現在のタグにある言語知識だけでは難しい可能性があります(私はPHPほかフロントエンドの技術は多少ありますが、WordPressはほぼ分からないので)
gangarujoma

2018/08/25 00:54 編集

アドバイスありがとうございます!早速追加させてもらいました。 ついでに初心者マークも追加させてもらいました・・。
liveasnotes

2018/08/25 08:35

一応,Windows上のFirefox Quanum 61.0.2 (64-bit)では問題なかったので,報告しておきます(kei344さんの指摘していたように,リサイズ時に一瞬固まりますが,処理はきちんと最後まで実行されているようです)
gangarujoma

2018/08/25 08:44

そうでしたか。お忙しい中ご確認とご報告をいただきありがとうございます。
guest

回答2

0

ベストアンサー

ウィンドウサイズを変更したら「問題がない表示」になったので、
たぶんフェードで表示するための処理があるせいでsliderProが幅を正しく認識できず、リサイズイベントで表示をリセットしたタイミングで「問題がない表示」になったのではないかと思います。

投稿2018/08/25 08:03

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gangarujoma

2018/08/25 08:34

お忙しい中、ご確認ありがとうございます! いまフェードで表示する処理を削除してみたところ「問題がない表示」になりますね・・。こことぶつかっているのですね・・!うーん
kei344

2018/08/25 08:36

bodyをフェードするのではなく、全画面にフェード用の要素をかぶせてそれをフェードアウトで消せばよいのでは?
gangarujoma

2018/08/25 08:41

全画面というとbodyではなくcontainerとか別の全画面を覆っているclass名でフェードインさせるということでしょうか? かぶせてフェードアウトで消せばよいというのは・・どういったことでしょうか。 ・・すみません!
gangarujoma

2018/08/25 08:49

あらかじめ白を入れておいてフェードアウトで消すということですね? ありがとうございます!参考にさせていただいて、いま試してみます。
gangarujoma

2018/08/25 09:07

やってみます!と意気込んでみたものの、分からなくなってしまい、元々のbodyをフェードさせる記述をsliderProの記述より前に持ってきてみたところ、「問題がない表示」で動くようで、せっかくお教えいただいたのにすみません。こちらで進んでてみようかと思います。
gangarujoma

2018/08/25 09:10

フェードとぶつかっていることが原因ということがkei344さんのおかげでわかりましたので、ベストアンサーにさせていただきます。 お忙しい中お時間を割いてくださり大変助かりました! ありがとうございます!
guest

0

状況にも寄りますが、head部の順番を入れ替えてみると良いかもです。
<meta charset="UTF-8">を一番上
・JSよりCSSの読込を先
・URLプロトコルのスキームを省略しない
等々


「入りこんだmargin」のイメージが理解出来ていないかもですが以下の事でしょうか?

「通常」がこちらで
↓↓↓
イメージ説明

「入りこんだmargin」がこちらですか?
↓↓↓
イメージ説明

投稿2018/08/25 07:25

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gangarujoma

2018/08/25 07:44

お忙しいところご確認ありがとうございます。 入りこんでしまったmarginに関して上記の認識で間違いありません。 おっしゃっていただいた内容早速これから試してみます。
yoshinavi

2018/08/25 07:52

私はたまたま症状が出ましたが、環境によっては上記の症状は出ない可能性もありますので、確認したOSやブラウザのバージョン、デバイスの種類、WPのテンプレート名等も併せて提示されると、情報は少ないより多い方が、より良い回答を得れるかと思います。
gangarujoma

2018/08/25 07:56

承知致しました。普段使用しているiMacと持っているiPhone、windowsのPCでは出たので、てっきり誰もがみたときに出てくる現象かと思っておりました。アドバイスありがとうございます。 早速記載致します。
gangarujoma

2018/08/25 08:27

>状況にも寄りますが、head部の順番を入れ替えてみると良いかもです。 head内の順番を入れ替えてみました。 <?php wp_head(); ?> の中に入ってしまっているものの修正方法がいまいちわからず、その他のいじれる部分だけになってしまったのですが、修正してみました。 順番も大事なのですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問