パソコン

ブログのカスタマイズってどうするの?→【画像付きで説明します】

紙にデザイン案を書いている男性
こんにちは!サトシ(@satoshi365_blog)です!

 

この記事では、ブログのカスタマイズの方法を紹介します!

 

ある時、

この部分をカスタマイズしたいんだけど、僕の使っているテーマではカスタマイズできないみたいだな。どうしよう。

と困ってしまいました。

試行錯誤した結果、無事カスタマイズすることができたので、その方法を紹介します!

 

この記事で紹介する方法を使えば、特定の場所の色を変えたり、デザインを変えることができるので、ぜひ試してみてください!^^

カスタマイズの手順

以下の手順でカスタマイズします。

  1. Chromeのデベロッパーツールを開く
  2. カスタマイズしたい部分の名前を見つける
  3. 試しにカスタマイズしてみる
  4. 追加CSSにコードを追記する

 

それぞれ詳しく見ていきます。

 

※この記事では、例として、自己紹介下の背景色を黄色から赤色に変えてみます。

 

Chromeのデベロッパーツールを開く

まずは、カスタマイズしたいページを開きます。

そして、Chromeの「デベロッパーツール」というものを開きます。

 

デベロッパーツールは、下のショートカットキーで開くことができます。

  • Mac→「commandキー」+「optionキー」+「iキー」
  • Windows→「F12キー」

 

デベロッパーツールを開くと、下のような画面になります。

chromeデベロッパーツールを開いた時の画面デベロッパーツールを開いた画面

 

カスタマイズしたい部分の名前を見つける

下の手順で、カスタマイズしたい部分の名前を見つけます。

  1. 要素選択モードにする
  2. カスタマイズしたい部分を選択する

 

それぞれ詳しく見ていきます。

 

要素選択モードにする

下のボタンをクリックすることで、要素を選択するモードに切り替えることができます。

要素を選択するボタン左上のカーソルが描いてあるボタンをクリックする

 

カスタマイズしたい部分を選択する

下のように、カスタマイズしたい部分をクリックして選択します。

カスタマイズしたい要素を選択カスタマイズしたい要素をクリックする

 

試しにカスタマイズしてみる

右側に表示されている、CSSに適当な設定を追記してみます。

 

今回は自己紹介下の背景色を赤色に変えてみます。

そのために「background-color: red !important」と追記します。

色を変えるコードを追記背景色を変えるコードを追記する

 

ちゃんと色が変わったのを確認したら、その部分の名前をメモしておきましょう。

カスタマイズしたい要素の名前をメモカスタマイズしたい要素の名前をメモする

 

追加CSSに書き込む

下のように、追加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やコメントなどでご質問ください^^

少しでも参考になれば嬉しいです!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です