実施概要

■レスポンシブ対応　画像の表示

スマホサイズでは横並びの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>&nbsp;</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>