AMOREの「トップページ第3ブロック」の円形バナーを四角にする方法|中級者向けカスタマイズ
AMOREの「トップページ第3ブロック」の円形バナーを四角にする方法|中級者向けカスタマイズ
AMOREでは、トップページの「第3ブロック」セクションに、下記のような円形バナー一覧を設置することができます。

AMOREの「トップページ第3ブロック」

AMOREの「トップページ第3ブロック」

今回は、このトップページ第3ブロックの円形バナーを四角にする方法を解説したいと思います。

カスタマイズの注意点

今回紹介するカスタマイズ方法では、WordPressテーマのテーマファイルを直接編集します。
万が一に備え、編集前は必ずファイルのバックアップをとっておきましょう。

「トップページ第3ブロック」の円形バナーを四角にする方法

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

『外観→テーマエディター』という順にクリック

『外観→テーマエディター』という順にクリック

テーマの編集画面が開きます。
画面右側の「テーマファイル」にある『Welcome Screen 固定ページテンプレート (page-welcome.php)』をクリックしましょう。

「テーマファイル」にある『Welcome Screen 固定ページテンプレート (page-welcome.php)』をクリック

「テーマファイル」にある『Welcome Screen 固定ページテンプレート (page-welcome.php)』をクリック

下記のコードを探します。

上記のコードを下記の内容に書き換えましょう。

 img-circleクラスを削除します。

コードを書き換えたら、ページ下部の『ファイルを更新』ボタンをクリックしましょう。

『ファイルを更新』ボタンをクリック

『ファイルを更新』ボタンをクリック

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

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

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

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

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

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

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

これで、トップページ第3ブロックの円形バナーを四角にすることができます。

四角に変更したバナー

四角に変更したバナー

まとめ

今回は、AMOREの「トップページ第3ブロック」の円形バナーを四角にする方法を解説しました。

円形バナーを四角にすることで、「トップページ第5ブロック」の四角バナーと形を揃えることができるので、見た目を調整したい方は試してみてください。

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

スポンサーリンク

スポンサーリンク

アンケート実施中

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

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

おすすめの記事