ソートボタン も検索フォームと同様、CSSでデザインを作り込みます。
ソートボタンの設定画面において、「見出し」「前に挿入」「後に挿入」欄にはHTML/CSSを記述できますので、div/spanタグやclassを付与することで、CSSでのデザインがしやすくなります。
例として、上記のようにソートボタンを設定しHTMLタグを挿入すると、生成されたソートボタンのHTMLソースコードには下記のようにそれぞれclassが付与されます：
<div id="feas-sort-menu">
<div class="feas-sort-price">
<p class="midashi">価格で並び替え</p>
<span class="feas-sl-1-up"><a href="https://example.com/?..">▲</a></span>
<span class="feas-sl-1-down"><a href="https://example.com/?...">▼</a></span>
</div>
<div class="feas-sort-star">
<p class="midashi">評価で並び替え</p>
<span class="feas-sl-1-up"><a href="https://example.com/?...">▲</a></span>
<span class="feas-sl-1-down"><a href="https://example.com/?...">▼</a></span>
</div>
<div class="feas-sort-date">
<p class="midashi">登録日で並び替え</p>
<span class="feas-sl-1-up"><a href="https://example.com/?...">▲</a></span>
<span class="feas-sl-1-down"><a href="https://example.com/?...">▼</a></span>
</div>
</div>これに対し、下記のようなCSSを 検索 > デザイン またはご使用中のテーマのstyle.cssに記述します。
/* ソートボタンのセクション全体に適用 */
#feas-sort-menu {
text-align: center;
margin: 1em auto;
padding: 1em 0;
}
/* id=feas-sort-menu内のすべてのdivタグに適用 */
#feas-sort-menu div {
display: inline-block;
width: 20%;
text-align: center;
border-left: 1px solid #dadee6;
}
/* その最初のdivタグのみに適用 */
#feas-sort-menu div:first-child {
border-left: none;
}
/* 見出しに適用 */
#feas-sort-menu p.midashi {
display: block;
font-weight: bold;
color: #5d5d5d;
margin-bottom: 0.5em;
line-height: 1;
}
/* すべてのソートボタンに適用 */
#feas-sort-menu span a {
color: white;
display: inline-block;
width: 2em;
background-color: #54bee6;
border-radius: 3px;
margin: 0 3px;
}すると下記のようにソートボタンをデザインできます。
FE Advanced Search なら“ソートボタン”付きのサイトもPHPやHTMLを使わずにすぐに作成できます！
HTML/CSS、JavaScriptやPHPに詳しくなくてもご安心ください。ソートボタンの作成代行や技術サポートに追加費用はかかりません！
今すぐご購入（即日ダウンロード可能）
