STORYヘッダーコンテンツの円形ボタンのカスタマイズ方法|初心者向けカスタマイズ
STORYヘッダーコンテンツの円形ボタンのカスタマイズ方法|初心者向けカスタマイズ
STORYでは、トップページのヘッダーコンテンツ内に、下記のような円形ボタンを表示させることができます。

ヘッダーコンテンツの円形ボタン

ヘッダーコンテンツの円形ボタン

今回は、この円形ボタンの背景色や形を変更する方法を解説します。

円形ボタンのカスタマイズ方法

WordPressのダッシュボード左メニューから、『外観カスタマイズ』という順にクリックします。

WordPressのダッシュボード左メニューから、『外観→カスタマイズ』という順にクリック

WordPressのダッシュボード左メニューから、『外観→カスタマイズ』という順にクリック

カスタマイズページが開くので、画面左メニュー内の『追加CSS』をクリックしましょう。

画面左メニュー内の『追加CSS』をクリック

画面左メニュー内の『追加CSS』をクリック

背景色を変更する

追加CSSに下記のコードを入力します。

〇〇の部分には任意のカラーコードを入力しましょう。

例えば、下記のように記述すれば、背景色が黄色になります。

背景色を変更

背景色を変更

マウスオーバー時の背景色を変更する

追加CSSに下記のコードを入力します。

〇〇の部分には任意のカラーコードを入力しましょう。

例えば、下記のように記述すれば、マウスオーバー時に背景色が黄色になります。

マウスオーバー時の背景色を変更

マウスオーバー時の背景色を変更

背景色を透過させる

追加CSSに下記のコードを入力します。

〇〇の部分には0.1~0.9までの数値を入力しましょう。

 「0.0」は透明、「1.0」は不透明となり、数値が低くなるほど透明度が上がります。

下記のように記述すれば、背景色が半分透けた状態(0.5)になります。

背景色を透過

背景色を透過

また、「255,255,255」の部分の数値を変更すれば、下記のように任意の背景色を透過させることも可能です。

任意の背景色を透過

任意の背景色を透過

ボタンを四角にする

追加CSSに下記のコードを入力します。

ボタンを四角にする

ボタンを四角にする

コードを入力したら、メニュー上部の『公開』ボタンをクリックしましょう。

『公開』ボタンをクリック

『公開』ボタンをクリック

これで、円形ボタンにカスタマイズが反映されます。

まとめ

今回は、STORYヘッダーコンテンツの円形ボタンのカスタマイズ方法を解説しました。

スライダーの画像に合わせてボタンの見た目も変更したいという方は、ぜひ試してみてください。

全てのテーマを見るならこちら

スポンサーリンク

スポンサーリンク

アンケート実施中

テーマニアの内容をさらに充実させるため
アンケートを実施中です。

ご協力お願いいたします。

おすすめの記事