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

Question

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

となどがないといけない】

略
略

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

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

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

カテゴリーから探す