ソートボタンも検索フォームと同様、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 ならソートボタン付きのサイトもすぐに作成できます!
HTML/CSS、JavaScriptやPHPに詳しくなくてもご安心ください。ソートボタンの作成代行や技術サポートに追加費用はかかりません!
今すぐご購入(即日ダウンロード可能)