■レスポンシブ対応 画像の表示
スマホサイズでは横並びの3枚の画像は縦に並んで表示されます。
横一列にまとめたい場合は
①横一列に並んだ1枚の画像を使う
②横一列で表示したい画像に下記要素を加えてる
※②はWYSIWYGのツール > ソースコードから修正します。
<ul class="img-area">
<li>画像のパス</li>
<ul>
入力例
<ul class="img-area">
<li><a href="URL" target="_blank"><img src="画像パス" alt="" width="120" height="180" /></a></li>
<li><a href="URL" target="_blank"><img src="画像パス" alt="" width="120" height="180" /></a></li>
<li><a href="URL target="_blank"><img src="画像パス" alt="" width="120" height="180" /></a></li>
</ul>
■レスポンシブ対応 画像の表示2
横幅の大きい画像を登録する場合は、その画像を以下のタグで囲っていただくと、スマホサイズで表示時に最適化されます。
<div class="orderBox">
<img src="画像パス">
</div>
■レスポンシブ対応 ソーシャルボタン FaceBook
管理画面の登録項目：ソーシャルボタンの
FaceBookのボタンレイアウトを
「standard」から「button_count」に
変更してください。
※「standard」のテキスト要素幅が
スマホ画面幅に対応しておりません。
■レスポンシブ対応 表テーブル
段ズレを防ぐため、
tableタグのclass「divided」を
「tbl-s」に変更してください。
<table class="divided">
→<table class="tbl-s">
表示の際、端の文字が切れてしまうことがあるため、
tableタグのclass「unstyled」を
「tbl-s」または「wrap」に変更してください。
例：
<table class="unstyled"> → <table class="tbl-s">
<table class="unstyled"> → <table class="wrap">
〇とてもうまく表示されているテーブル例
<table width="521" height="254" class="tbl-s">
<tbody>
<tr>
<td style="text-align: center;"><strong>受検級</strong></td>
<td style="text-align: center;"><strong>検定料（税込）</strong></td>
<td style="text-align: center;"><strong>受検条件</strong></td>
<td style="text-align: center;"><strong>出題範囲</strong></td>
</tr>
<tr>
<td style="text-align: center;"><span>3級</span></td>
<td style="text-align: center;"><span>7,700円</span></td>
<td style="text-align: center;"><span>なし</span></td>
<td style="text-align: center;"><span>色彩配色テキストⅠ</span></td>
</tr>
<tr>
<td style="text-align: center;"><span>2級</span></td>
<td style="text-align: center;"><span>11,000円</span></td>
<td style="text-align: center;"><span>配色検定3級取得者または、<br /><span>パーソナルカラリスト検定、トータルカラリスト検定3級以上取得者</span></span></td>
<td style="text-align: center;"><span>色彩配色テキストⅠ、Ⅱ(～P.87)</span></td>
</tr>
<tr>
<td style="text-align: center;"><span>3級・2級併願</span></td>
<td style="text-align: center;"><span>18,700円</span></td>
<td style="text-align: center;">なし※</td>
<td style="text-align: center;"><span>3級・2級の範囲</span></td>
</tr>
<tr>
<td style="text-align: center;"><span>1級</span></td>
<td style="text-align: center;">
<p><span>17,600円</span></p>
<p><span>(1次又は<span>2次免除者<span> </span></span><span>11,000円)</span></span></p>
</td>
<td style="text-align: center;">
<p><span>配色検定2級取得者に限ります</span></p>
</td>
<td style="text-align: center;">
<p><span>色彩配色テキストⅠ、Ⅱ</span></p>
</td>
</tr>
</tbody>
</table>
