2015.11.21WEBサイト制作ツイート61シェアはてブ108送るPocket55どうも。WordPressでも静的サイトでも何でもいいんですが、サイトでCSSをちょっとカスタマイズしたいと思った時ブラウザで実際の表示を確認しながらカスタマイズする方法が便利です。デザインをカスタマイズしようとした時にstyle.cssを開いてみたものの何がなんやらわからない...やっぱ俺にはできないや...という方にオススメしたいカスタマイズの方法なので、この方法を知らない場合はぜひお試しください。今日はGoogleChromeを使って、サイトのCSSをカスタマイズする方法をご紹介します。適用されているCSSを確認することができます。これは自分のサイトはもちろん、サイト上に公開されている別の人のサイトであっても確認することが可能です。このサイトの見出しの部分のCSSを確認してみましょう。見出しの部分で右クリック→要素の検証をクリックします。するとこのように適用されているCSSをチェックすることが可能です。これだけでも気になるサイトのスタイルシートがどのように書かれているのかを見ることができるのでまだ慣れていない方が勉強するのにもオススメです。確認したCSSを変更する続いて先ほど表示したCSSを変更する方法です。個人的にはここが便利だなと思っている部分なのですが、表示されているスタイルシートの数値の部分を直接編集ができるんです。この見出しのフォントサイズと色を変更したい(試したい)時に、数値を変更してあげることで実際にどのような表示となるかすぐに確認することができます。現状表示されていないCSSを追加したいという場合も、何もないところをクリックしてあげれば新しい要素を追加することができるので、次々に追加していくことが可能です。DWやCodaのように、スタイルシートの予測変換(補完)も行ってくれるので、コードの最初の方を書いてあげれば、残りの部分は補完してくれるためうろ覚えでも編集ができてしまいます。フォントサイズや背景色なども思いのままフォントサイズを変更したり、色を変えたりして色々とスタイルシートを試すことができます。見出しサイズの調整や色の変更は実際に表示を確認しながらできた方が直感的なので、CSSのコーディングに慣れていない場合にとても便利です。この方法だと本番環境を変更するわけではないので、すでに公開されているサイトで実験のためだけにコードを書き換えて公開する必要がなく、修正の際に他の方にサイトを見られていたとしても大丈夫。思う存分実験可能です。変更したCSSをコピーして本番環境に反映さて。ここまでは実際にどのような表示になるのかをブラウザを使って編集してきましたが、ページ遷移したりページを更新してしまうと元に戻ってしまいます。テストしたCSSはまた本番環境のファイルに書かなければいけないの??めんどくセー。...と思ってしまいそうですが、もちろんそんなことはありません。CSS名をクリックすると実際にスタイルシートのファイル内を全てブラウズすることが可能。これを表示したらすべて選択してコピーします。コピーしたスタイルシートの中身を、実際のファイル(WordPressだったらstyle.cssなど)にコピペしてアップロードすれば簡単にテストしたスタイルを本番に適用することができます。ぶっちゃけこれだけできればテキストエディタが必要ないかもしれませんね。本番のファイルを変更してブラウザで確認あれ、おかしいな。いう流れかと思いますが、その逆パターンですね。GoogleChromeでテストして、そのテストを適用したいなと思った時だけ本番に適用することができるので、とても直感的にCSSを修正することができます。気になるサイトがどのようなCSSを設定しているのかがよくわかるここまで自分のサイトのカスタマイズにフォーカスして書いてきましたが、他には他のサイトさんのコードを簡単に見れるという点があります。(ここでは勝手にLIGさんのサイトを覗いてみました。)他のサイトさんを見ていて、ああ、この見出しのデザインいいなあ。押してCSSを確認することが可能。デザインやコードの使い方の勉強にもなるいいなあと思ったスタイルがどのように書かれているのかを見ていると、CSSの使い方を感覚的に勉強していくことになり、自分のスキルアップにもつながります。これまで自分のスキルだと画像で実装していた内容も、もしかするとCSSでコーディングできるようになるかもしれません。色々なサイトをみていいなあと思ったデザインはこの要素を検証でコードまで見るようにすれば、CSSなんて簡単に覚えられます。いかがでしたか?今日の内容はサイト制作者からしたら当たり前の知識かもしれませんが、WordPressでブログをされている方などはその知識がない場合もあるかと思います。フォントサイズや見出しのデザインを変えたいといった場合は、実際の表示を確認しながらできるこの方法がオススメです。これまでCSSってなんだよ。スタイルシートファイル見てもわかんないよ。とデザインカスタマイズを諦めていた方は、今回の方法を試してみてはいかがでしょうか。SPONSORLINKWEBサイト制作PICKUPエディタブラウザこの記事をシェアツイート61シェアはてブ108送るPocket55FOLLOWFeedly新作!シンプルかつパワフルWPテーマ「スワロー」SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。「必要なものとは何か」を考え尽くして、無駄な機能やデザインを削ぎ落とした洗練されたWordPressテーマです。「新しいスマホビュー時代をつくろう」というのをコンセプトに、スマホでの見やすさ、操作しやすさにとことんこだわりました。[...]RECOMMEND2015.02.02無料ホームページ作成サービスで作るサイトは『実は無料ではない』かもね。US矢野ヨシキ香川県(うどん県)にてフリーランスWEBデザイナー/ディレクターとして活動。小規模なWEBサイト制作を得意とし、コンセプト設計からデザイン、コーディング、撮影にいたるまでのすべてをこなします。地方の良さを全国に広めていくお手伝いをしていきたいと思っています。WebSiteTwitterFacebookGoogle+HOMEWEBサイト制作ブログのデザインカスタマイズが超はかどる!ブラウザを使ってCSSを編集する方法WPテーマ「スワロー」シンプル。このサイトで使っているWordPressテーマ、SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。