ソートボタンをデザインする

ソートボタンも検索フォームと同様、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;
}

 

すると下記のようにソートボタンをデザインできます。