taninote

明るい未来に生きたい 引きこもりのブログ

ブログカスタマイズしたいなら「検証ツール」を使おう【CSSが簡単になる】

こんにちは。

ブログカスタマイズをやっているなら「検証ツール(デベロッパーモード)」を勉強するといいですよ。CSSが一気に簡単になりますよ。というのが今日の記事です。

初心者ブロガーには難しいカスタマイズ

初心者ブロガーにとって、カスタマイズって難しくないですか?

私はこんな感じでした。

  • コピペでOK!に頼る
  • でも、コピペで上手くいかないときもある
  • でも、どこが悪いのか分からない

⇒1つカスタマイズするのに時間がかかる

また、慣れてくると「もっと自分好みのデザインにしたい!」という気持ちが出てくるので、カスタマイズにどんどん時間を取られることもありました。

でも「検証ツール」を勉強してからは、カスタマイズが一気に楽になりました。

検証ツールを学ぼう

検証ツールを一度勉強すれば、スムーズにカスタマイズできるようになります。

検証ツールとは

検証ツール

検証ツール

検証ツールとは、WEBページのHTMLとCSSが簡単に確認できる、便利な機能のことです。(画像右上に出ているのがHTML、右下がCSS)

検証ツールで出来ること

①試しに編集できる

「このCSSを編集したら、デザインはどういう風に変わるだろう?」と試してみたいときに、検証ツールは便利です。

フォントの種類やサイズを変えてみた

わざわざブログのデザイン編集画面をいじらなくても、検証ツールを使えば一瞬で色んなCSSを試せます。

②他サイトのコードを見れる

好きなWEBサイトのHTML・CSSを一瞬で見れます。

例えば「このサイトのフォントすごく好き!何を使っているんだろう?」と気になるときに便利です。

自分のブログカスタマイズの参考になります。

③画面サイズごとの表示を確認できる

iPadやiPhoneなど、画面サイズが異なるときのデザイン表示を一瞬で確認できます。

iPhone6の表示を確認してみた

「スマホのデザイン崩れていないかな?」と気になるときに便利です。

検証ツールの学び方

HTML・CSSの勉強に意欲的な人は「Progate」で学ぶのがおすすめです。

↓検証ツールは、この記事で解説されています。

記事の内容が難しければ「HTML & CSS 初級編」だけでもやってみるといいですよ。無料で学べます。

↓こっから飛べます。

私もやりましたがHTMLとCSSの仕組みが分かって楽しかったです。4時間弱かかると表記されていますが1時間くらいで終わりました。

手っ取り早く検証ツールの使い方だけを勉強したい!という人は、サルワカさんの記事がおすすめです。

↓こちら。

おわりに

最初は、取っ掛かりにくいかもしれませんが、検証ツールを使えるようになれば、その後のカスタマイズが捗ります。

コピペのカスタマイズが上手くいかず、じれったい時間を過ごしている人は、いったん検証ツールの勉強をしてみてはいかがでしょうか。

最初に30分使って検証ツールの勉強をすれば、その分カスタマイズが速くできるようになりますよ。

私も「CSSって何?」レベルの超初心者でしたが、今はカスタマイズを楽しめるようになりました!

それでは、また。