ブログのデザインをカスタマイズしようと思うと、スタイルシートをいじる事になりますが、Google Chromeの「開発者ツール」を活用すると、簡単にデザインのカスタマイズが出来ますので、今回は、その活用方法についてです。
デザインに時間をかけてしまってブログ記事を書く時間が無くなると本末転倒ですからね！
例えばどこかのサイトを見ていて「このデザインいいな」と思ったら、開発者ツールを使えばそのデザインをコピペ＋α程度で持ってこれますので、ぜひうまく活用して時短しましょう。
開発者ツールって何？
Google Chromeでサイトを表示している時に右クリックすると表示されるメニューで「検証」というものがありますが、これが「開発者ツール」です。
「検証」を選択すると、以下のような画面が表示されます。
開発者ツールでは、そのページの要素がどのように構成されているか、スタイルシートがどうのように設定されているか、を全部見ることができます。
開発者ツールの活用方法
開発者ツールでは、そのページのHTMLの要素がどのように構成されているか、スタイルシートがどのように設定されているか、を見ることができます。が、それだけではありません。
例えば「この見出しのデザインいいなあ」と思ったら、そこにマウスをあてて「検証」を開いてみてください。なんと便利なことに、その要素とデザインのスタイルシートをピンポイントで表示してくれます。
ということは、このスタイルシートの設定をそのまま自分のブログのスタイルカスタマイズのところにコピペすれば、簡単に同じデザインにできてしまうということですね！
これを自分のブログに合わせてパラメータを調整すれば、簡単に見た目を好みのものに仕上げることができてしまいますので、ぜひ活用してみてください。
Safari / Firefox にもありますよ
今回は「Google Chrome」の開発者ツールを紹介しましたが、同じような開発者ツールは「Safari」や「Firefox」にもあるので、ほとんど同じように活用できますよ！
- Safari：右クリック＞「要素の詳細を表示」
- Firefox：右クリック＞「要素を調査」
HTML / CSS の基礎知識は必要です
とはいえ、ブログのテーマ毎にCSSのクラス名とか違いますので、自分のブログに合わせて多少のコーディングは必要になります。
なので、HTML / CSS の基本的な知識は身につけておいた方が良いです。
それほど難しいものではありませんし、知っていると色々捗るようになりますから、何よりもデザインを自由にいじれるようになると楽しくなってくるので、ぜひ勉強しておきましょう。
HTML / CSS の基礎は「ドットインストール」というサイトで無料で学べますよ。
コメント