【Stinger5】カスタマイズが2倍楽になる!Chromeを使ったデザインカスタマイズ術

Google Chromeを使ってブログデザインのカスタマイズを楽に行う方法を紹介します。この方法であれば気になるサイトのデザインも簡単に自分のものにできちゃいます。

4054200146_1ca01ce4cc_z

スポンサーリンク

WordPressでのデザインカスタマイズ効率を飛躍的にあげる方法を紹介

WordPressを使ったブログの魅力の1つに自分の思い通りにカスタマイズできる点があります。

色やデザインを自分の好きなように変えることでオリジナリィテイあふれるブログが作れます。

でも初心者には敷居が高い

デザインに関してはスタイルシートをカスタマイズしていくことになりますが、初心者にとってはCSSのコードも良く分からないし、どこをどうしたらいいのか分かりません。

そこで、おすすめするのが「Chrome」です。Chromeはgoogleが無料で提供するブラウザです。

こちらでダウンロードできます。

まずはそれをダウンロードしてインストールしてみてください。非常に軽快に動くのでネットサーフィンにも最適です。

効率の良いカスタマイズ

さて、ブログをカスタマイズするときは

① ダッシュボードを開く
② スタイルシートにコードを書く(変更する)
③ 保存
④ プレビュー

という流れになります。カスタマイズが一発で決まればいいですが、プレビューしてみて、また修正を繰り返すとなると面倒だし時間もかかります。また初心者にとっては何をどう変えたらいいのか分かりません。

そこでChromeの「 要素を検証 」機能を使います。

まずは自分のブログをChromeで開きます。

そして、カスタマイズしたい部分で右クリックします。例としてサイドバーの「Follow me」をカスタマイズしてみます。

「Follow me」の上で右クリックすると、ウィンドウが立ち上がります。そこで、要素の検証を選びます。

2014y10m21d_050104995

スタイルシートが表示されます。

2014y10m21d_050141962

試しに色を変えて見ましょう。配色に該当するbackgroundにマウスを当てて、クリックすると修正ができます。

c1

青色を選んでみます。

c2

すると・・・「Follow me」の色が青色に変わりました。ブログ全体を見ながら色のマッチングを確認できます。

次に「Follow me」の文字の大きさを変えてみます。font-sizeのところをクリックすると数字が選択されて修正ができるよになります。

f1

16ptから26ptに変えてみます。

f2

文字の大きさが変わりました。

このようにChromeの「要素を検証」の機能を使うとそのスタイルを「仮に」修正できて、どのように変わるかシュミレーションすることができます。

実際にブログのデザインがどのように変わるか簡単に確かめることができるため、非常に効率的です。

しかもこれはあくまでシュミレーションなので、間違えたり気に入らなくてもブラウザを閉じてしまえば元に戻ります。

実際にカスタマイズに生かしてみよう

次にシュミレーションで決めたカスタマイズを実際に適用していきます。

最初に変更した部分の名前をメモするかコピーしておきます。

ss6

ここでは、水色線の「aside h4」という部分になります。

シュミレーションで表示されたウィンドウのままでもいいですが、そのウィンドウの中のStyle cssという部分(赤線の部分)をクリックすると、スタイルシート全体が表示されます。

CSS

スタイルシート全体が表示されました

2014y10m21d_050451946

次に自分のブログのダッシュボードを開いてスタイルシートを表示します。

先ほどシュミレーションでカスタマイズした部分と同じところを探します。

CtrlとFを同時に押すと右上に検索ウィンドウが現れるので、そこに文字列の一部を入力するとその部分に移動出来ます。
ss1

「Follow me」の部分はaside h4なので、検索ボックスに「aside h4」と入力します

複数あるときは上下の矢印で移動してください。

ダッシュボードのスタイルシートとChromeで開いたスタイルシートを並べて修正していきます。

Chrome側のスタイルシートをコピーしてダッシュボード側のスタイルシートにペーストすると簡単です。

2014y10m21d_050758177

使い方次第で便利さ無限大

この方法を使えば、他のサイトのスタイルシートを簡単に見ることができてしまいます。

素敵なサイトを見つけたら、スタイルシートを覗いて、勉強しましょう。

よさそうなら<、自分のサイトにも取り入れてみましょう。 初心者にとって敷居の高いデザインカスタマイズもこの方法であればグッと簡単になりますので、ぜひぜひお試しください。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク