WEB DEVELOPERでCSS編集

ブログのCSS編集はプレビューで確認すると時間がかかりますね。リアルタイムで確認できたら時間が効率的かもしれません。そんな方のためのツールであるWEB DEVELOPERの簡単な使い方です。

なおWEB DEVELOPERで編集した結果はブログには反映されません。必ずコピーしてブログに反映しましょう。

インストールは以下のサイトでご自分に対応したブラウザのものを入れてください。

　WEB DEVELOPERをインストールしてある状態として話をします。私は今回，Chromeを使用。他のブラウザでも同じ感じです。

１.まず自分のブログをブラウザで開きます。

２.自分のブログのページで.右上の歯車のようなアイコンのボタンを押すとWEB DEVELOPERのメニューが表示されます。

3.WEB DEVELOPERのパネルの左上のCSSをクリックすると以下のパネル表示になります。

次に，Edit CSSを選びます。

4.Edit CSSの画面が表示されます。下に”skin.css"など表示されます。すでにカスタマイズをしてある方は，数値.css私は10054076801.cssとなっていました。

カスタマイズをしていないかたは skin.cssです。それをクリックすると，カスタマイズ用のCSSが表示されます。ここで編集した結果がリアルタイムで反映されます。

ただし，保存されないため，よさそうでしたらコピーしてアメーバブログのCSS編集画面で反映してください。

編集画面を自分の好きなテキストエディタで編集が可能になります。私はVimを利用していますが，普通の方は扱いが難しいので，ご自分の使いやすいテキストエディタをお使いください。

連動して使うと，ブラウザが落ちてもテキストエディタは落ちないことが多いので，編集内容を失うリスクが減ります。

　できるだけ効率的な方法を探してみましょう。つねに自分の欲しいものはなにか，何を求めているのかを考えているだけで，気づきが多いです。そして空いた時間は有意義な時間に使いましょう。

誰かと何気ない話や同じ時間を共有する。そんな贅沢な時間の為の効率化です。

できれば，自分が満たされたら相手が満たされるようなことをできる人になりたいですね。まだまだなぽっとでした。