fc2blogのCSSカスタマイズに挑戦した事のある人なら、誰にでもぶつかる壁がある。
「CSSエディタをインストールしたものの、機能ありすぎで意味わからない・・・」
「プレビュー見ながらじゃないと、うまくデザインできない。でも管理画面行ったりきたりするのはもうしんどい・・・」
そこでWEBサイト上でCSSを編集できる、画期的なエディタが登場。
この”たぬきのしっぽ”はブラウザでCSSの設定編集ができるエディタ。ブックマークに入れておくだけで、いつでも即起動でき、面倒なダウンロード・インストールは必要なし。
操作はとっても簡単で自分のブログのURLを貼り付けるだけ。すると”たぬきのしっぽ”がWEBサイトからスタイルシートを取得して、出力。あとは通常のCSSエディタ感覚で編集。良く使うセレクタのみに絞り込まれたかんたんインターフェイスなので、少しだけCSSの知識があれば誰にでも使えるはず。
一番の売りはブログの独自タグもプレビューできることでしょうか。あのホームページビルダーやDreamWeaverでも、ブログの独自タグはプレビューできない。しかしこの”たぬきのしっぽ”はブラウザを解してCSSを設定できるため、独自タグもすべて配置した状態でプレビュー可能。もう管理画面を行ったりきたりして、出来上がりのデザインを確認する必要がありません。
正直なところブログテンプレートを一から作るには、ブラウザという制限付きワークスペースのため、”たぬきのしっぽ”は向いていない。ですがテンプレートをちょっと編集したいなんてときには、ピッタリのエディタだと思います。
WEBサイトを作るエディタというとホームページビルダーやDreamWeaverなどが有名でしょう。これらはWISGというワープロ感覚でWEBサイトが作れる機能があるため人気があります。ですがブログのテンプレートをカスタマイズするとなると、WISG機能はあまり役に立ちません。というのもブログのテンプレートはほぼCSSでデザインされており、WISG系エディタはCSSをすべて再現して描写できないからです。
なのでどちらかというと動作が軽いタグ挿入型のエディタがおすすめ。フリーのタグ挿入型エディタの中で、スタイルシートが編集できるものをいくつか紹介します。
リストボックスでCSSを設定できる機能付き。またスタイルシート編集の際に、模擬プレビュー機能がついており非常に重宝します。
スタイルシートの編集については、オンラインマニュアルのスタイルシートの項を参照してください。正直機能が沢山ありすぎて、説明をよく読まないとスタイルシートの設定方法がわかりません。私もどうやってクラスタを作成するのかわかりませんでした。
サイトマップ作成は通常のWEBサイトのみ利用できます。ブログではできません。
ez-HTMLほど多機能ではありませんが、スタイルシートの編集だけならこちらのほうが簡単なのでオススメ。CSSをクラスタ別に階層化して表示してくれるのが便利です。
フリーウェアのhtmlエディタは数多く存在します。ですが一方フリーウェアのCSSウェアエディタは数えるほどしかありません。今回紹介するのは数少ないフリーCSSエディタの中で、おそらくもっとも高機能のCSSエディタを持つNvu（エヌビュー）
困ったことに公式サイトは英語です。ですがその下のサイトからダウンロードから、インストールまで日本語でわかりやすく解説されているので心配無用。Nvuの日本語化の方法は必見です。
NVUはCSSエディタを抜きにしても、高機能＆わかりやすいインターフェイスでhtmlエディタとしても非常に使えます。特にフリーエディタでは稀な、ワード感覚でwebページを作れるWISYWIGと呼ばれるhtml編集機能を持っているため、重宝すると思います。
フリーのhtmlエディタでは、びっくりするほど高機能のものが数多くあります。膨大なタグの中から選んで挿入していくことができ、ソースも綺麗に整形することが可能です。ですが、初心者にはとても扱えるものではありません。タグを入れれば入れるほど、出来上がりを想像するのが難しくなります。
一方はWISYWIGエディタはプレビューを見ながら編集することができ、あまりhtmlについて知らなくても、それなりに使えます。それに必要最低限の機能がシンプルにまとめられたインターフェイスなので、あのホームページビルダーが難しすぎる、という人にもnvuをオススメします。
ホームページビルダーユーザーの方は、スタイルシートマネージャーについてご存知でしょうか。
スタイルシートマネージャーとは名前のとおり、スタイルシートを記述してくれる、ホームページビルダー付属ツールです。
たとえばスタイルシートマネージャーには
こんな利点があります。
手打ちするよりずっと簡単なので、ブログのCSSもこれで編集できればと思った方も多いはず。
ブログのCSSをホームページビルダーにコピペ・・・というわけにはいきません。元々ホームページビルダーは、CSSのみを編集することが不可能。
とにかくまずメモ帳などでCSSファイルを作成する必要があります。CSSについてわからない方用に、手順を説明します。
ややこしい話ですが、スタイルシートマネージャーは、リンクされていないＣＳＳファイルは編集できません。
そこで新しくWEBページを作り、CSSファイルとリンクさせます。まず新規にhtmlファイルを作成します。
次にスタイルシートマネージャーを起動させ、CSSファイルとリンクさせます。
ここまでできれば後は実際に設定するだけです。スタイルシートマネージャーウィンドウ→編集をクリックしてください。
設定が失敗するときもあります。必ずテンプレートCSSを差し替える前に、以前のCSSをメモ帳に保存しておきましょう。
今回ホームページビルダーの新規作成ファイルと、CSSファイル(blog.css）をひとつづつ作りました。二つともわかりやすい場所に保存しておきましょう。次回からはホームページビルダーから、保存したhtmlファイルを開くだけで、CSSの設定ができるようになります。
ブログのCSSを設定するとき、FC2テンプレート設定画面から手打ちしようとせず、必ずさっき説明した方法で貼り付けるようにしてください。管理画面を何度も往復する手間が省けます。
CSSに変更を加える前に、必ず変更前のCSSを保存しておきましょう
