ワードプレスの外部リンクファイル読み込みについて

Question

いつもお世話になっております。
ワードプレスで作成した診断チャートをテスト反映しようコードを組んだのですが、
上手く動作やCSSが効いてないのか、レイアウトが崩れてしまいました。
本来なら2列ずつで選択肢が表示され、選べるようにしているのですが、なぜか
1列で表示され、クリックしても選択されません…。
Dreamweaverでローカルで作成したときは問題なく機能したので、
ワードプレスでうまく反映できない原因がいまいち分かりません。
元々ワードプレス上で組まれているソースコードと相性が良くないのでしょうか？
ご教示していただけたら幸いです。

テストURL
http://tokeiten.co.jp/Test/charttest/

Accepted Answer

ECマスターズの伊藤です。

> ただ、2列にしたとき、質問3だけ背景色内の枠からはみ出しており、
> とくにheightは指定していないので原因が分かりません…。

float の特性上
clear:bothを入れないと、高さが取得できないため
はみ出したようになってしまいます。



の３箇所に




のように追加していただき、
ご確認をお願いいたします。


> 診断結果のボタンを押しても未選択扱いになり、診断結果が表示されません。
> 未選択になるのは、うまくjsが動いていないということなのでしょうか？

アラートが表示されていますので
jsは問題なく動いています。


記述頂いているjsでページ内のliの数を
問題数として認識するように
設定されていますが

ページ内に、問題部分以外にもliが使用されているため
問題数が３以上あると認識されていることが
原因となっています。

classを指定するなど
問題の箇所を特定できるように
修正をお願いいたします。

Answer

ECマスターズの伊藤です。

> Dreamweaverでローカルで作成したときは問題なく機能したので、
> ワードプレスでうまく反映できない原因がいまいち分かりません。
> 元々ワードプレス上で組まれているソースコードと相性が良くないのでしょうか？

ソースを拝見したところ
画像を２列にするCSSの記述が
見当たりませんでした。

ワードプレスでご登録の際に
リンクし忘れ、アップし忘れのCSSがないか
ご確認いただけますでしょうか。

また１つ目の画像をまとめている
タグの開始タグもございませんでしたので
こちらも合わせてご確認くださいませ。


                        Q1. アクションは

  
  
    
  　【←このPタグの開始がありません】

Answer

返信ありがとうございます。

アドバイスいただいたところを確認してみたのですが、とくに抜けているものはなく、
画像を2列にしてるCSS部分は一部だけ反映されているようです(背景カラーなど)
を使って直接コードをいれても2列になりません…。
そもそもの2列に指定しているコードの書き方が良くないのでしょうか？

listタグ部分↓
#chart ul.choice {
    background: #f1f1f1;
    padding: 20px;
    margin: 0 auto;
    box-sizing: border-box;
}
#chart ul.choice li {
    margin-bottom: 10px;
}
#chart ul.choice li:last-child {
    margin-bottom: 0;
}
#chart ul.choice li span {
    display: inline-block;
    width: 350px;

Answer

ECマスターズの伊藤です。

#chart 
.choice

をご指定頂いていますが
id、classとも、ページ内に存在しておりませんでいた。

＝＝＝
【←本来となどがないといけない】
　【←本来と指定されていないといけない】

略


略


＝＝＝＝


また、頂いているCSSですと
2列に並ぶように設定されていないので

#chart ul.choice li に

width:50%;
float: left;

を追加するなど、
横並びになるように、設定をお願いいたします。

Answer

liタグの方に横並びになるよう設定してみましたが、
を質問ごとで囲っていたため、画像は2列にならず、質問が2列になってしまいました。
画像の方でを指定してみましたが、思いっきりレイアウトが崩れてしまい、そもそもの
コードがあまりよくないように思えてきました。

ローカルだと、で幅を指定せず、label imgで幅を指定しましたら横並びになっていましたので、
とタグがうまくかみ合っていないのでしょうか。

Answer

ECマスターズの伊藤です。

> を質問ごとで囲っていたため、画像は2列にならず、質問が2列になってしまいました。

失礼いたしました、たしかにliに指定すると
質問ごと横並びになってしまいました。

今のコードのままご利用されたいのであれば
不要なタグがおおくありますので
(があるのに開始のがないなど)
一度タグを見直していただき

labelに
width:50%;
float:left;

を入れていただくと
横並びになると思います。


もし、こちらがむずかしいようであれば
tableタグをご利用頂いたほうが
かんたんに設置していただけると思います。

デザインレシピ
複数の画像を横に並べる方法
https://club.ec-masters.net/index.php?design_page3

Answer

なんとか選択画像を2列に表示できました！
ありがとうございます。
ただ、2列にしたとき、質問3だけ背景色内の枠からはみ出しており、
とくにheightは指定していないので原因が分かりません…。

画像もちゃんとクリックをすれば、オレンジの枠で選択されているのがわかるのですが、
診断結果のボタンを押しても未選択扱いになり、診断結果が表示されません。
未選択になるのは、うまくjsが動いていないということなのでしょうか？

Answer

無事に反映できました！
ありがとうございました！