この記事では、ブログのカスタマイズの方法を紹介します!
ある時、
と困ってしまいました。
試行錯誤した結果、無事カスタマイズすることができたので、その方法を紹介します!
この記事で紹介する方法を使えば、特定の場所の色を変えたり、デザインを変えることができるので、ぜひ試してみてください!^^
タップできる目次
カスタマイズの手順
以下の手順でカスタマイズします。
- Chromeのデベロッパーツールを開く
- カスタマイズしたい部分の名前を見つける
- 試しにカスタマイズしてみる
- 追加CSSにコードを追記する
それぞれ詳しく見ていきます。
※この記事では、例として、自己紹介下の背景色を黄色から赤色に変えてみます。
Chromeのデベロッパーツールを開く
まずは、カスタマイズしたいページを開きます。
そして、Chromeの「デベロッパーツール」というものを開きます。
デベロッパーツールは、下のショートカットキーで開くことができます。
- Mac→「commandキー」+「optionキー」+「iキー」
- Windows→「F12キー」
デベロッパーツールを開くと、下のような画面になります。
カスタマイズしたい部分の名前を見つける
下の手順で、カスタマイズしたい部分の名前を見つけます。
- 要素選択モードにする
- カスタマイズしたい部分を選択する
それぞれ詳しく見ていきます。
要素選択モードにする
下のボタンをクリックすることで、要素を選択するモードに切り替えることができます。
カスタマイズしたい部分を選択する
下のように、カスタマイズしたい部分をクリックして選択します。
試しにカスタマイズしてみる
右側に表示されている、CSSに適当な設定を追記してみます。
今回は自己紹介下の背景色を赤色に変えてみます。
そのために「background-color: red !important」と追記します。
ちゃんと色が変わったのを確認したら、その部分の名前をメモしておきましょう。
追加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やコメントなどでご質問ください^^
少しでも参考になれば嬉しいです!