HPのメインビジュアルのスクロールボタンを改善しました

WordPress有料テーマ「SWELL」のメインビジュアルに表示されるスクロールボタンを改善しました。

スクロールボタンが目立たない事が気になっていましたが、修正方法がわからず、そのままにしていました。

しかし、「かんたさん」のページに辿りつき、修正することができました。

それがこちらの「【SWELL】メインビジュアルのスクロールボタンをカスタマイズ！！」記事です。

スクロールボタンは「矢印のアイコン」と「Scroll部分のテキスト」に分かれているそうです。

私は「かんたさん」の記事を参考に「外観」-「カスタマイズ」-「追加 CSS」を開き、以下のコードを追加しました。

①「矢印のアイコン」のサイズ変更　

.p-mainVisual__scrollArrow {
width: 30px;
height: 30px;
}

②「Scrollのテキスト」のサイズ変更　

.p-mainVisual__scrollLabel{
font-size: 20 px;
}

③「Scroll」ボタンの背景に丸くし、色を付けるをやりました。黒ではちょっときついイメージになるので色は#333で柔らかさを出しました。　

p-mainVisual__scroll{
padding: 20px;
background: #333;
border-radius: 50%;
}

「かんたさん」、情報提供ありがとうございました。