この記事では、ブログのカスタマイズの方法を紹介します！
ある時、
と困ってしまいました。
試行錯誤した結果、無事カスタマイズすることができたので、その方法を紹介します！
この記事で紹介する方法を使えば、特定の場所の色を変えたり、デザインを変えることができるので、ぜひ試してみてください！＾＾
タップできる目次
カスタマイズの手順
以下の手順でカスタマイズします。
- Chromeのデベロッパーツールを開く
- カスタマイズしたい部分の名前を見つける
- 試しにカスタマイズしてみる
- 追加CSSにコードを追記する
それぞれ詳しく見ていきます。
※この記事では、例として、自己紹介下の背景色を黄色から赤色に変えてみます。
Chromeのデベロッパーツールを開く
まずは、カスタマイズしたいページを開きます。
そして、Chromeの「デベロッパーツール」というものを開きます。
デベロッパーツールは、下のショートカットキーで開くことができます。
- Mac→「commandキー」＋「optionキー」＋「iキー」
- Windows→「F12キー」
デベロッパーツールを開くと、下のような画面になります。
デベロッパーツールを開いた画面
カスタマイズしたい部分の名前を見つける
下の手順で、カスタマイズしたい部分の名前を見つけます。
- 要素選択モードにする
- カスタマイズしたい部分を選択する
それぞれ詳しく見ていきます。
要素選択モードにする
下のボタンをクリックすることで、要素を選択するモードに切り替えることができます。
左上のカーソルが描いてあるボタンをクリックする
カスタマイズしたい部分を選択する
下のように、カスタマイズしたい部分をクリックして選択します。
カスタマイズしたい要素をクリックする
試しにカスタマイズしてみる
右側に表示されている、CSSに適当な設定を追記してみます。
今回は自己紹介下の背景色を赤色に変えてみます。
そのために「background-color: red !important」と追記します。
背景色を変えるコードを追記する
ちゃんと色が変わったのを確認したら、その部分の名前をメモしておきましょう。
カスタマイズしたい要素の名前をメモする
追加CSSに書き込む
下のように、追加CSSにコードを追記しましょう。
追加CSSにコードを追記する
最後に、「公開」ボタンをクリックすれば、カスタマイズは終わりです！
カスタマイズの具体例
具体例として、下の部分をカスタマイズをするCSSを紹介します。
- 「Rinker」のボタンの色
- 「Contact Form 7」の背景色
それぞれ詳しく見ていきます。
※「ここのカスタマイズの方法も書いた方が良いんじゃないか」などの意見があれば、ぜひコメントやTwitterなどで教えてください＾＾
「Rinker」のボタンの色を変えるCSS
追加CSSに以下のCSSを追記することで、「Rinker」のボタンの色を変えることができます。
※「#000」の部分をお好みの色のコードに変えてください
/*Rinkerのボタンの色*/
/*Rinker Amazon*/
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
background-color: #000;
}
/*Rinker Rakuten*/
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {
background-color: #000;
}
/*Rinker Yahooショッピング*/
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
background-color: #000;
}
「Contact Form 7」の背景色を変えるCSS
追加CSSに以下のCSSを追記することで、「Contact Form 7」の背景色を変えることができます。
※「#000」の部分をお好みの色のコードに変えてください
/*contact-formの背景色*/
.wpcf7 {
background-color:#000;
}
まとめ
今回は、ブログのデザインをカスタマイズする方法について説明しました！
また、もし分からない点などありましたら、気軽にTwitterやコメントなどでご質問ください＾＾
少しでも参考になれば嬉しいです！
