カスタマイズの基礎テクニック
カスタマイズ（1）
HTML入門、CSS入門とやってきて、やっとカスタマイズに辿（たど）り着きました。長かった・・・・・・お疲れ様でした。
もう HTML と CSS の基礎的なことは、ご理解いただけているはずなので、みなさんは既にテンプレートをカスタマイズする力が身に付いています。
あとは経験だけです。
経験値を高めるために、お話は続きます。今回は、カスタマイズするテンプレートに対しての「目利き」をアップしましょう。
カスタマイズの難易度を把握する
HTMLやCSSの知識を得ても、いったい何からはじめたら良いものか迷うのではないかしら。
まずはじめに、カスタマイズのおおよその難易度をご紹介しておきます。
1：カスタマイズの難易度
「カスタマイズ！」と、ひと言でいっても、人それぞれやりたいことは様々です。ちょっとした変更もあれば、原形を留めないような大改造もあります。
事前に、あなたのしようとしていることが、簡単なのか？難しいのか？把握しておくと、ストレスになりません。
主なカスタマイズ例を挙げて、難易度を記述しておきます。
カスタマイズの内容 | 難易度 |
|---|---|
段組みレイアウトの変更 | A |
中央揃え（センタリング） | B |
背景色の変更 | C |
文字サイズを変更する | C |
リンクの色を変更する | D |
画像を罫線で囲む | E |
文字の色を変更する | E |
2：HTMLとCSSの知識は必須です
もちろん、テンプレート制作者が、カスタマイズしやすいようにしてくれている場合もあるし、個々の習熟度にもよるので一概には言えませんから、おおよそのお話しです。
当ブログのHTML入門と、CSS入門をご覧いただければ、上述、一覧表のB〜Cくらいのレベルは、意外と簡単に出来るのではないかと思います。
どのような方法（ネット、書籍など）でも構いませんが、カスタマイズをするのであれば、当ブログによらず、HTMLとCSSのスキルを高めておくことをお薦めします。
ちなみに、なぜ「段組みレイアウトの変更」が難しいかと言えば、けっこう広い範囲でコードを見なければいけないためです。
カスタマイズしやすいテンプレートとは？
1：カスタマイズしやすさの判断基準
次に、あなたがカスタマイズしようとしているテンプレートは、カスタマイズしやすいのかどうか？見極める必要があります。
判断の基準は、「画像の使い方」に寄るところが大きいように思います。
カスタマイズ | シンプルで、画像をあまり使っていない。 |
|---|---|
カスタマイズ | コッテリと随所に画像が使われている。 |
2：具体的なテンプレートの例
具体的な例を挙げると、例えば、Enifさん作のテンプレート「air」は、いたってシンプルで分かりやすい構成なので、どのようなカスタマイズでもしやすいと言えます。
対して、更紗さん作のテンプレート「alice」は、すでに世界が出来上がっているので、大きなカスタマイズはし難いと言えます。（する理由がない）
誤解のないように書いておきますが、「どちらのテンプレートが優れているか？」とか、そんなお話ではありません。
「カスタマイズしやすいか否か？」というお話です。どちらも、人気の高い素敵なテンプレートです。
カスタマイズの基礎テクニック
1：ターゲットとなる文字をコピーする
（01）
どのようなときに「テンプレートをカスタマイズしたいな〜」と考えるかと言えば、おそらく、ブログを眺めているときだと思います。
例えば、「タイトルの文字の色が、背景の色と近いから変えようかしら」などと思ったとします。あなたは、次に何をすれば良いか分かるでしょうか？
（02）
まず行うことは、「カスタマイズしたい箇所が、HTML文のどこにあるのか？」を特定することです。探し当てるためのキーワードを探しましょう。
変更したい箇所が「テキストの文字」であれば、その「文字」を範囲選択し、コピーして控えておけばいいし、
あるいは、近くにある「文字」なども、コピー（覚える）しておけば、検索の精度が増します。
2：HTML文内を検索する
（03）
そして、どうやって特定するかと言えば、ブラウザでHTMLソースを表示して探します。
確認の方法が分からない人は、記事「ブラウザでHTMLソースを表示する方法」をご覧ください。
（04）
HTMLソースが表示できたら、コピーしておいた「文字」を入力し、検索します。
（05）
一つ目の候補です。しかし、<title>タグで囲まれていますから、明らかに違います。
<title>タグは、ブラウザの上部の帯にタイトルを表示するタグです。そんなところの色を変えようとしているのではありません。
<title>タグを、忘れてしまった人は、記事「HTML入門 はじめました」をご覧ください。
（06）
[f3]キーなどを打鍵して、次の候補を探します。今度は、<h1>タグで囲まれています。どうやらこれみたいです。
画像では見難いですね。次のような感じです。覚えておいた「近くの文字」も記述されているので、間違いなさそうです。
[f3]キーを何度か打鍵して、目的とするタグを探しましょう。（ループするので、ご注意ください）
3：CSSファイルを見る
（07）
そして次に、CSSファイルの中で、<h1>タグについて指定している箇所を探します。
FC2ブログであれば、CSSファイルは、「環境設定」の「テンプレートの設定」で確認できます。
（08）
例えば、<h1>タグの指定が、次のように書かれているとします。さて、文字の色を変える場合は、どこを変更すれば良いか覚えていらっしゃるかしら？
そうです。「color」の指定値（#f09390）を変更すれば、良いわけです。
また、今回は、<h1>タグでしたが、場合によっては、該当するタグに id名や、class名を付けて指定されていることもあります。
文字色の変更「color」を忘れた人は、記事「文字色の変更【color】：CSS入門」が参考になります。
4：あとがき
以上、このような手順で進めれば、簡単なカスタマイズは、サクサクと片付くはずです。
テンプレートをいじったからと言って、地球が破滅したりはしないので、あまり恐れずにトライしてみると良いように思います。
文字色の変更については、記事「文字色の変更 / カスタマイズ」へ続きます。是非、引き続きご覧ください。
次回予告
恐れずトライするにしても、事前に知っておくと良いことがあります。次回は、カスタマイズするときの留意事項などを書く予定です。
関連記事
カスタマイズに関連する記事を、ご紹介します。
作成日：2008/05/21 更新日：2008/05/21
｜「カスタマイズ前の留意点」 »
コメントありがとうございます。
カスタマイズ
Web Developer
いつも、コメントありがとうございます！
そうです。新シリーズなのです。
でも、無計画な状態です。(´Д｀;)
とりあえず、変数のお話などが多くなるのかなーなんて思っています。
なるほど確かに、Firefoxの拡張ってのもありましたね。
でも私、Web Developerをあまり使っていないんですよねぇ。
次の2つくらいです。
・[情報]-[ブロック要素のサイズを表示する]
・[ツール]-[HTML構文の検証]
お薦めの機能があれば、教えていただけると助かります。
宜しくお願い致します・・・・・・良かったら。(･∀･)人(･∀･)
[その他]-[HTMLを編集する]なんかも、使える感じかしら。
ひろこさんは「style note」を使っていらっしゃるんですよね。
「HTML Project2」なんてのは、どうなのかしら？
けっこうフリーソフトもあるのですねー。
写真をご覧いただきまして、ありがとうございます。
楓とか、赤黄の葉って秋なのかと思っていましたが、
こんな季節なのですね。
写真を撮るようになって、以前より季節を感じるようになりました。
和色は落ち着いていて良いですね。(´ー｀)
変数！
ひょー変数！
ちょっとMTで触った事があるくらいなんですが、今すごく興味があるので
楽しみです！
web Developerなんですが、自分もフル活用してるかといえばそうでもなく、
枠を表示させたり（枠表示：ブロックレベル要素を囲う）
また、ウィンドウサイズを変えて確認したり、（サイズ変更。リサイズでいろんな大きさを設定できる）
あと、ｃｓｓ編集でちょっと実験したりくらいです。
でも、ブラウザでこんな事が出来るのは本当に便利なので、重宝しています。
ないとヤダ。
HTML Project2みてきました！
style noteと編集画面がそう変わらないので、すんなり使えそうですね！
知らなかったソフトなので衝撃です。ちょっとつかってみたいなー
ほんといろいろありますよねえ。
作ってる人達すごいや。
ところで、KumaCrowさんは何のソフトでサイトなどを作ってるんですか？
よければ教えてください＾＾
ありがとうございます！
コメントありがとうございます。長くなっちゃった。(´Д｀;)
（1）変数
ひょー変数！って、
豹変するみたいな言い方ですね。(・∀・)ヒョーヘンスールー
実際にビギナーの人にご覧いただいて、
どの程度の習熟度に達するものか分からないので、
ちょっと難しいところがあります。
格闘家のひとは、短期間に技を急激に覚え過ぎると、
逆に弱くなったりするそうです。
単純な技、少ない技に集中した方が良いのかも。
なので、新しいものを、ドンドン出していくのは、
本当の意味での理解を妨げる気がするので、
控えている面があります。
（ドンドン出せば、アクセス数は増えるのかもしれないけれども）
「ビギナーの人でも分かるように！」がテーマのブログでもあるので、
ひろこさんのレベルの人たちには、物足りない回が続くかもしれません。
ごめんなちゃいん。変数は、いつになるか・・・。(´Д｀;)
（2）Web Developer
あーCSSの編集も出来たんでしたね。参考にさせていただきます。
ありがとうございます。(oﾟωﾟo)ﾉ39
・ブロックレベル表示
・ウィンドウサイズ変更
・CSS編集
（3）HTML Project2
本当、フリーソフトでも、いろいろあるみたいですね。
このくらい出来ると、ホームページビルダーのクラスのソフトは、
わざわざ買わなくても良いような気さえします。
（4）私の制作環境
TeraPadとFirefoxです。(〃▽〃)オハズカシイ
ビルダ
やったことがないので、本当にブログカスタマイズはビギナーです。
変数とかわからんしい。
だから、とても楽しみです！
ビルダは、以前使っていたのですがソースがすごい事になったり
あと、あまりに初心者をサポートしてくれるので、機能に甘えて中身を知らん、
って事態になってしまいました。（自分の場合）
htmlと触れ合うって意味ではすんなりいけたのでそこはよかった、と思うけど
ビルダを卒業したら、もうちょっとシンプルなソフト、それを卒業したら手打ち、って風に
いけたらいいのにな。
TeraPadってテキストエディタですよね。
全部手打ち！？すっごいわあー！ｶｺｲｲ！
自分はソフトとりあげられたら何にも出来ないってのが
すごくコンプレックスなので、ものすごく憧れます。
KumaCrowさんタイピング早そう。
ちょっとお兄さんこちらへ（ヒマな時にでも）
http://typing.sakura.ne.jp/sushida/
（フラッシュタイピングゲーム：寿司打ち）
自分はランキングで４９５５位だったｗｗ（hiroって名前です）（普通コース）
回転寿司
コメントありがとうございます。
そっかー。
めっさマニアックなことを知っているかと思えば、
基礎的なことを知らなかったりと、スキルに偏りがあるんですね。
独学だと、そういうことってあるのかも・・・人のこと言えんけど。
ビルダは、余計なコードが入りまくるんですよね。
今はそうでもないのかしら。
私が試した頃は、Ver.10だったかな。
CSSをあまりうまいこと理解して表示してくれなかった印象があります。
CSSの変更も、作業ステップが多くて面倒だったような気がする。
けっこう、そういう段階を踏んで来るのかもしれませんね。誰しも。
手打ち麺かー。
でも、やはり効率的な作業を考えると、Dreamweaverに行きつくのかしら。
いくつもWeb制作をかかえると、手打ちじゃあやってられないかも。
しかし、庶民には、手が届かないわ、あの金額。
私はタイピング遅いです。
ノートPCなので、激しく叩くのが怖いのね。(;´Д｀)
お兄さん誘われて、回転寿司に行ってみましたが、
話にもなりませんでした。orz
普通お勧めで何回か試しましたが、だいたい2,600円くらい損してます。
速いのにこしたことはないよねぇ。
うーん、寿司食いたし。(oﾟωﾟo)
偏り
そうなんです、すごく偏っているんですよ。
食生活で言えば、焼肉とラーメンしか食べてない感じ。
だから、いまいち自分がどこまでわかっているかとか不明だし、
プロの人のソースとか見てても、「えっなにこれ！？」ってのが結構あって、
割と心細い日々を送っています。
やっぱり独学だとねえ・・・。
精進精進。
自分もビルダはVer.10でした。
いまいち使いこなしていなかったのもあるんですが、外部ｃｓｓだと
いちいちｃｓｓファイルをメモ帳で開きなおして編集したあと、またｃｓｓファイルに戻して、
って自分はやってました。たぶん、何か他に方法があったはず＾＾；
最後の方は、ページ編集使わないでソース直接いじってたし、
もうこれじゃビルダ使う意味ないやんかと思って今のソフトに流れたのです。
現場だと、複数人で同じソースいじったりするし、そんな時編集ツールが
同じものじゃないと不便がおきそうですよね。
だからDWなのかなあ。
いつか買いたいけどなかなか手がでねえ・・・
タイピングは、早いといいけど、もっと大事なのはやはり
「手打ちできるか」って事かもしれないですね。
自分は手打ちでどれだけできるかなー
最初の宣言とかは無理orz
そういやあ、KumaCrow さんのプロフみたんですが、すんでるところが
うちの父さんの故郷だったｗ
いいところですよね！
センス
コメントありがとうでおじゃる。
（1）センス
うーん、そのままでいいんじゃないかしら。
けっこう、本を最初から最後まで読んで分かった気になる人の方が、
世の中、多かったりします。
学校に行っただけで満足してしまうとかね。(´Д｀;)
でも、ことIT関係の仕事は、
そういうタイプの人はあまり向きません。
ひろこさんみたいに、プロの人のソースとか見て、
ガツガツ吸収していくタイプの方が、現場では活きますよ。
自信を持って、長所を伸ばしていく方が良いんじゃないかしら。
半年後くらいには、
追いつけないような高みに行ってしまっているかもしれないなぁ。
怖れとか、羨望とか、嫉妬とか、
正直なところ、いろいろな感情が渦巻くね。
センスは、デパートじゃあ買えないし・・・、(´・ｪ・)
置いて行かれないように、頑張らなきゃ。
（2）ビルダ
私もまったく一緒です。
外部CSSも@importとかつかってさらに飛ばしていたから、
もう面倒で、現在に至っています。
サポートにも問合せてみたんだけれど、
あまり、いい返事が返ってこなかったんですよ。
ビルダの手順通りじゃないと、CSSの保証はしかねるとか。
もういいやって感じでした。
（3）手打ち蕎麦
いやー最初の宣言とか、手打ちする人っているんですかね？
あ、今回のリニューアル時には手打ちしたけれど、
でも、今後はコピー&ペーストしちゃうなぁ。
うーん・・・こ。
そういう手打ちは、必要ないと思うけどなぁ。
手打ちしようがしまいが、ユーザには関係ないもの。
設定の意味が分かっていればいいんじゃないかしら。
（4）プロフ
あら、ひろこパパさんは、山形ですか。
いいところです・・・たぶん。
住めば都はるみッス。(・∀・)/鮟鱇くいたし
コメントの投稿
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/303-c70ce67f
ふおおブログカスタマイズ！！
以前こちらでブログのカスタマイズについていろいろお聞きした事があったのですが、
あの時、教えて頂いた、Firefoxのwebdeveloper、使ってますよ！
サイト作ってる時にも確認とかするの便利だし、すごく気に入ってます。
ブログカスタマイズにも使えそうなので、記事楽しみにしてますね＾＾
あと、お花と楓の写真、今日は見ることができました！
楓がきれいだー
空の薄い水色と楓の赤、陰の黒が異常にうつくしい
和の色ですねー