WordPressテーマ「SWELL」にして、ブログを書くのがさらに楽しくなりました。デザインのことはあまり考えなくても、きれいなブログが書けるのは思った以上にいいですね！
SWELLはデザインのテンプレートを用意してくれているのはいいんですが、細かいところまでカスタマイズできないところはちょっと物足りないんですよね。以前、ライブドアブログでCSSを自分で書いていたので、なおさらそう思うのかもしれませんが…。最近特に思うのが、
けんちゃん広告タグのボタンの色を変えたい！
ということです。通販サイトに飛ぶボタンは、たいていAmazonか楽天だと思います。やっぱり、青と黄色じゃないよな！と思うのは私だけじゃないと思います。ここはやっぱり、オレンジと赤にしたいところ。
WordPressのカスタマイザーでCSSをたった2行追加するだけで、広告タグのボタンの色を変えることができたので紹介します。これがわかれば、ボタンの色を他の色に変えることもできます。ぜひ、自分好みにカスタマイズしてみてください。
カスタマイザーの追加CSSを開く
まず、WordPressのダッシュボードからカスタマイザーを開きます。
上の画面のように、上のメニューに「カスタマイズ」と左の「テーマ」の中にも「カスタマイズ」があります。これをクリック。
すると、上の画面のように左にカスタマイザーのメニューが出ます。このメニューはSWELLのアイコンがあるように、SWELL上でのものです。他のテーマだと少し違うと思います（未確認）。
メニューの一番下に「追加CSS」があるので、これをクリックしてCSSを記入する画面を出します。
CSSを記入する
.p-adBox__btn.-btn1{background:orange}
.p-adBox__btn.-btn2{background:red}
上のように、追加CSSを書く画面になるので、ここにCSSを書きます。ここで少し解説します。
- 「-btn1」→ 1つ目のボタン
- 「-btn2」→ 2つ目のボタン
- 「background」→ ボタンの背景色
- 「orange」「red」→ ボタンの色
簡単に書くとこんな感じです。私は「orange」とか「red」とかで色を指定していますが、「ff8000」などのカラーコードでも指定できます。カラーピッカーを使うと簡単にカラーコードを調べることができます。代表的なカラーピッカーのサイトを下に貼っておきます。「カラーピッカー」と検索すると、他にもたくさん出てくるので、自分のお気に入りを決めておくと便利です。
完成
これが･･･
こんな感じになります！
やっぱり、オレンジと赤の方がいいですね！
けんちゃんさらにブログに愛着がわいてきた！
一瞬で終わるカスタマイズなので、ぜひやってみてください！
最後まで読んでいただき、ありがとうございます。ちょっとでも参考になったら、下の「♡」「コメント」いただけると嬉しいです！
コメント