【コピペOK】AFFINGER5でドロップダウンをカスタマイズする

2021年3月29日 2021年7月17日

こんな方におすすめ

AFFINGER5のドロップダウンをカスタマイズしたい
CSSをコピペしてAFFINGER5のデザインを変えたい

ドロップダウンとは、以下のようにメニュー項目を表示できる表示方法です。

今回はCSSをコピペしてこのAFINGER5のドロップダウンのデザインをカスタマイズする方法について解説します。

1. AFFINGER5でドロップダウンをカスタマイズする
- 1.1. AFFINGER5でCSSをコピペする場所
2. CSSのコピペでドロップダウンをカスタマイズする
3. まとめ

AFFINGER5でドロップダウンをカスタマイズする

それでは、以下の2つを順番に解説します。

AFFINGER5でCSSをコピペする場所
コピペするCSS

ぜひ参考にしてください。

AFFINGER5でCSSをコピペする場所

まず、AFFINGER5でCSSをコピペする場所を解説します。

最初に、WordPressの管理画面を開いてください。

次に『外観➡︎カスタマイズ➡︎CSS追加』を選択すると、以下のようになると思います。

ここに、今回紹介するCSSをコピペしましょう。

場所は1番下でOKです。

CSSのコピペでドロップダウンをカスタマイズする

続いて、ドロップダウンのデザインをカスタマイズするCSSを以下の3つに分けて解説します。

ドロップダウンをカスタマイズ

文字
枠線&背景
ホバー時のデザイン

それでは順番に紹介します。

デザイン①：文字

まずは文字から解説します。

コピペするCSSは以下の通り。

select {
color: #333; /*文字色*/
font-size: 15px;/*文字サイズ*/
font-family: '明朝体';/*フォントの種類*/
font-weight: bold;/*文字の太さ*/
}

こんな感じです。

文字の太さは、フォントの種類によってカスタマイズできないことがあるので注意してください。

デザイン②：枠線&背景

次は、枠線です。

箱部ブログ（このサイト）では、以下のCSSでデザインを作っています。

select {
border: 1px solid #369;/*枠線の太さ、種類、色*/
border-bottom: 2px solid #369;/*下の枠線の太さ、種類、色*/
border-radius: 5px;/*角の丸み*/
}

『border-radius』では角の丸みが設定できるので、数値を増やせば角も丸くなります。

そして、背景は以下のCSSをコピペしてください。

※右側の矢印も、背景に含まれています。

select {
padding: 10px;/*余白*/
background: url(/*画像のリンク*/) 97.5% #fff no-repeat;/*背景画像、位置、色、繰り返し*/
background-size: 9px;/*背景画像のサイズ*/
}

『/*画像リンク*/』のところには、矢印となる画像のリンクを入れましょう。

デザイン③：ホバー時のデザイン

最後は、ホバー時のデザインですね。
マウスカーソルを重ねた時などのデザインのことです。

■通常時

■ホバー時

一応先ほど紹介したCSSをまとめます。↓

select:hover {/*ホバー時のデザイン*/
color: #333; /*文字色*/
font-size: 15px;/*文字サイズ*/
font-family: '明朝体';/*フォントの種類*/
font-weight: bold;/*文字の太さ*/
border: 1px solid #369;/*枠線の太さ、種類、色*/
border-bottom: 2px solid #369;/*下の枠線の太さ、種類、色*/
border-radius: 5px;/*角の丸み*/
padding: 10px;/*余白*/
background: url(/*画像のリンク*/) 97.5% #fff no-repeat;/*背景画像、位置、色、繰り返し*/
background-size: 9px;/*背景画像のサイズ*/
}

ホバー時に変化させたいデザインだけ切り抜いてください。

ちなみに僕は、文字色を『#666』にしました。

select:hover {/*ホバー時のデザイン*/
color: #666; /*文字色*/
}