未分類

今さらですがfirebug入れてみたらすごくデザイン調整やりやすかった

firebugアドオン by you.

ボクの中で重要だけど緊急で無いタスクにブログデザインの改善というのがある。

ちょっとWordPressに移行してから個人的にもあまり落ち着かない日々が続いていたので、後回しにしていた。でも、後回しにしていた理由はそれだけでなく、導入したテーマがあまりにも難解なためであった。

いつもならヘッダーの背景が黒くてテキストだけなのを、背景を白くして、タイトルをテキストから画像ファイルに変えるぐらいの作業というのは、5分ぐらいソース眺めてすぐ治せるのだけど、治せない理由がある。

それは現在使っているvicuna CMS - WordPress Theme Ext.というテーマがたくさんのCSSファイルで構成されており、CSSの継承や上書きの関係性を読み解くのが、すでに難しいからだ。もちろん汎用性やCSSハックなどの理由などがあるが、カスタマイズするにはちょっと厄介。

そこで、これを使えば便利!っていうツールを前から知っていたのですが、今更ながら入れてみて使ってみました。

それはFirefoxのアドオンFirebug :: Firefox Add-onsというツールです。

何が良いかと言うと、ブラウザだけでそのデザインをしている要素(タグやそれに関連したCSS一覧)を取り出して眺めることができるから。

CSSであれば、どのファイルの何行目かも指示してくれる。この難解なテーマファイルであればどのファイルが犯人か探し出すのに時間が相当かかるが、これによって一瞬で解決できる。

そして、実際にCSSを修正する前に、直接ブラウザだけでCSSを修正してどのように表示されるか確認できる。これはつまり、ブラウザだけで試しにプレビューすることができるのである。

というわけで、簡単ながらこのブログのヘッダーを修正してみた。たぶん、今後デザインの修正するときはこれがメインツールになるであろう。

 

  • この記事を書いた人
  • 最新記事

wackey

Webディレクター・プロデューサーなどで大手企業サイトの構築に携わった後、インターネット広告営業やWebコンサルティングなどを行う。フリーランスを経て2012年にプラス・ムーブメント合同会社を設立。Webサイト・システムの制作やブロガーツアー・イベントなどの企画・運営を行う。地域ブログをまとめたLocketsというサービスの事業責任者としてビジネスを展開。 2015年にアジャイルメディア・ネットワーク株式会社に入社。 レビューズにてインフルエンサーマーケティング事業の立ち上げに関わり運営。またアンバサダープログラムの運営など多くの企業の支援をバックアップしていた。 現在プラス・ムーブメント合同会社を経営しつつ、新しい働き方について模索している。 主な著書に「アフィリエイターのための Web APIプログラミング入門(ビー・エヌ・エヌ新社)」がある。

-未分類