SANGOヘッダーアイキャッチのリンクボタンのカスタマイズ|初心者向けカスタマイズ
SANGOヘッダーアイキャッチのリンクボタンのカスタマイズ|初心者向けカスタマイズ

SANGOでは、ヘッダーアイキャッチを設定すると、下記のようなリンクボタンを表示させることができます。

ヘッダーアイキャッチのリンクボタン

ヘッダーアイキャッチのリンクボタン

ヘッダーアイキャッチの設定方法は、下記の記事を参考にしてみてください。

今回は、このリンクボタンのカスタマイズについて解説したいと思います。

SANGOの子テーマをダウンロード

今回解説する方法では、SANGOの子テーマをカスタマイズするので、まだダウンロードしていない方は下記から子テーマをダウンロードしてインストールしておきましょう。

文字色を変える

子テーマのstyle.cssを開き、下記のコードを貼り付けます。

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

例えば、下記のように記述すると、文字色が黒色になります。

文字色を変える

文字色を変える

文字サイズを変える

子テーマのstyle.cssを開き、下記のコードを貼り付けます。

〇〇部分には、任意の数字を入力しましょう。

これで、リンクボタンの文字サイズが変わります。

文字サイズを変える

文字サイズを変える

文字を太くする

子テーマのstyle.cssを開き、下記のコードを貼り付けます。

これで、リンクボタンの文字が太くなります。

文字を太くする

文字を太くする

角丸を無くす

子テーマのstyle.cssを開き、下記のコードを貼り付けましょう。

これで、角丸の無い四角いリンクボタンになります。

角丸を無くす

角丸を無くす

角丸を大きくする

子テーマのstyle.cssを開き、下記のコードを貼り付けましょう。

これで、リンクボタンの両端が丸くなります。

角丸を大きくする

角丸を大きくする

影を無くす

子テーマのstyle.cssを開き、下記のコードを貼り付けましょう。

これで、影の無いフラットなリンクボタンになります。

影を無くす

影を無くす

まとめ

今回は、SANGOヘッダーアイキャッチのリンクボタンのカスタマイズを解説しました。

ヘッダーアイキャッチ画像に合わせてリンクボタンの見た目も変えたいという方は、ぜひ試してみてください。

スポンサーリンク

スポンサーリンク

アンケート実施中

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

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

おすすめの記事