なまら春友流

ラーメン屋店主兼ブロガーの春友がラーメン、ガジェット、日常について書くブログ

新米ブロガーにおすすめ!ちょっとしたCSS知識だけでブログカスタマイズを楽にする2つの便利機能!!

Sponsored Links


Design Festa
Design Festa / sugagaga



ブログのカスタマイズ。
私のような新米ブロガーにとってはかなり敷居が高い。
しかし、超絶便利なChrome&Safari拡張機能と、必殺「ページのソースを表示」することでカスタマイズはものすごく楽になる。
しかもCSSだけでカスタマイズできればブログ管理も楽ちんだ。

Sponsored Links


2つの便利機能

  1. サイトを表示→右クリック→「ページのソースを表示」
  2. 拡張機能「Live CSS Editor」でリアルタイムにレイアウトを確認


1. ページのソースを表示

スクリーンショット 2011 12 06 21 02 47

右クリックするとサイトのソースが見られるようになる。

View source harutomo ryu com 1

フォントやら大きさやら色やらを変えたい時はソースを表示して、どの部分をスタイルシートで変更してあげれば良いかを調べればよい。
今回はブログのタイトル部分を変更してみる。
CSSの書き方は「CSS 基本」などでググればいくらでも詳しい説明の記事がヒットするので参考にしよう。

2. Live CSS Editorをインストール

Chrome拡張機能 「 Live CSS Editor」

スクリーンショット 2011 12 06 20 51 25

私はChromeを使っているがSafari版もある。

なまら春友流

インストールしたら起動してスタイルを指定しよう。
ブログタイトルの変更をするので、
『 #blog-title { font-size : 1px; 』と記入(;を記入した時点で)するとタイトルが変わる。

なまら春友流 1

こんな感じでリアルタイムにスタイルが反映される。
これも〜のすごい便利。
今までいちいちリアルにCSSを変更して、ブログを表示して確認してたのはなんだったんだって感じ。
嬉しいわ〜。

最後に

この2つの機能を使えば簡単に細かいカスタマイズを行うことができるようになる。
「Live CSS Editor」はスタイルシートを書き換えているわけではなく、どのようなスタイルになるかということをリアルタイムで表示してくれる拡張機能。
これはほんと自分的には神機能。
いろんな細かい部分の変更ができるとブログに更に愛着が湧く。

調べればやりたいことはどんなことでも探せる時代。
でも、できることが増えていくと嬉しい反面大変にもなってゆく。
誰かデザインセンスを僕にくださいw

Sponsored Links


LEAVE A REPLY

*
*
* (公開されません)

Return Top