カテゴリー
エッジプラス1テンプレートの質問

【サンプルサイト】酵素ドリンク・サプリメント人気&口コミランキングのテーブルコードと同じ表示にしたい

お世話になります、
テンプレートをE004利用させていただいております。

サンプルサイトの酵素ドリンク・サプリメント人気&口コミランキングの

酵素ランキング

上記ページのコードをまねて、私も固定ページにてランキングサイトを制作したのですが、
どうしても同じ様な表示が実現できないため、ご質問をさせていただきます。

※PCでの表示は、同じ様に見えるのですが、スマートフォンでは、
テーブルの大きさ、フォントサイズが異なります。

もう少しのところまできていると思うのですが、どこを改変すればいいのか
ご教授いただけないでしょうか。

 

【ランキングのテーブルコード】

<div id=”table” class=”fluid rank_table”>

<div id=”res_table”>
<div id=”one”><span class=”rank_TXT_color_1″></span>サポート</div>
<div id=”two”><span class=”rank_TXT_color_1″></span></div>
<div id=”one”><span class=”rank_TXT_color_1″></span>費用対効果</div>
<div id=”two”><span class=”rank_TXT_color_1″></span></div>
<div id=”one”><span class=”rank_TXT_color_1″></span>対応エリア</div>
<div id=”two”><span class=”rank_TXT_color_1″></span></div>
<div id=”one”><span class=”rank_TXT_color_1″></span>口コミ評価</div>
<div id=”two”><span class=”rank_TXT_color_1″></span></div>
</div>

</div>

【追加カスタムCSS】

.rank_txt1 {
padding:2% 0 2.5% 0;
font-size:90%;
line-height:150%;
}
.rank_table {
margin-top:-1%;
border-bottom:solid 1px #B8B8B8;
}
div#res_table {
overflow: hidden;
height: auto;
width: 100%;
}
div#res_table div {
float: left;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
div#res_table div#one {}
div#res_table div#two {}

#one {
width:35%;
float:left;
border:solid 1px #B8B8B8;
clear: both;
background-color: #E7E7E7;
}
#two {
width:59.4%;
float:left;
border:solid 1px #B8B8B8;
border-left:none;
}
#three {
width:59.4%;
float:left;
border:solid 1px #B8B8B8;
border-left:none;
}
#one,#two,#three {padding:1%; font-size:90%}

お忙しい中お手数をおかけ致しますが、どうぞよろしくお願い致します。

「【サンプルサイト】酵素ドリンク・サプリメント人気&口コミランキングのテーブルコードと同じ表示にしたい」への1件の返信

返信が遅くなってしまって大変申し訳ありませんでした。

レスポンシブのテーマやテンプレートでは、スマホサイズ。タブレットサイズ、パソコンサイズのcssが存在します。
メディアクエリという方法で設定がされています。
スマホサイズのところでもcssを設定しないとすべて同じサイズになってしまいます。
逆にスマホサイズだけを設定してパソコンサイズを設定しないと、パソコン表示の時でもスマホサイズが適用されてしまいます。
それぞれのサイズを設定したいのであれば、それぞれのcssを追加してください。
ずべて同じサイズでいいならスマホサイズのところでサイズを指定すればOKです。

メディアクエリがわからないようでしたら、以前紹介した、
無料プラグインでE004の個別ページにもランキングBOXが設置できる

↑の方法で設置すると良いかもしれません。

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

コメントを残す