CSS Archive

独自ドメインを取得して、MovableType4(以下MT4)をインストールして、四苦八苦七転八倒しながらサイトリニューアルの作業に取り組んでいるワケですが、一つ問題なのが、公開のタイミング。

僕の場合、今回のリニューアルには大きく二つの意味があります。

1. デザイン変更
2. 独自ドメインへの移行

デザイン変更については、CSSを勉強して、デザインの管理をしやすくして、まずはトップページだけリニューアルしました。

デザインの変更だけでも大変なのですが、URLも変わるワケです。つまり、デザインを変更しながらデータも移行しなければならない。

どこかの企業でWEBチームがやるのとはワケが違います。個人がひっそりちまちまとやっているのですから、全てが完全に終わるまでには膨大な時間がかかりますし、そもそも個人的には早く公開したい(^-^;)。

なので、順次、公開していく作戦を取ることにします。

元々MovableTypeはブログ用ソフトだったようです(きっと、ね)。自分で自由にカスタマイズしたブログページを作れるってことですかね。

けれど、無料のブログサイトに登録してもある程度のカスタマイズはできますし、そうなるとわざわざMTを使うメリットが感じられません。

僕がMTを使ってみようと思った大きな理由がCMS(コンテンツマネジメントシステム＝Contents Management System)なのです。これはMT4になってから顕著になった特徴だそうです。

例えば僕のサイトには各ページにメニューがありません。元々個人サイトで(って、今もそうですが)何も考えずに適当にページを作った結果、そういうどんくさいサイトになってしまいました。

ところが、今から何十、何百とある各ページにメニューを設置しようと思ったら、それだけの数のHTMLファイルを書き換えなければなりません。

そこで、メニューをパーツ化すれば、後々の管理が楽になる。それがCMSなんですね。

とは言っても、やっぱり最初は各ページにパーツ化したメニューを入れていかなければならないんですけど・・・それでも次に更新したい時にはパーツ化したメニューだけを書き換えて再構築すればおしまい。

今後のことを考えると、CMSを取り入れた方がいいに決まってます。

ちなみにCSSも同じような考え方ですね。例えばCSSを使わずにページの背景を指定しようとすれば、すべてのページの背景をHTML内で指定しないといけませんが、CSSで管理すれば(これも最初はHTML内にCSSの指定をしないくてはいけませんが)、後で背景を変えたくなってもCSSファイルを改訂するだけでOKですよね。

僕は自分のことを素人と言うし、実際、卑下しているワケでも何でもなくて本当にそう思っています。けど、これは何をもって素人と定義するかってことで、はっきりと明確なラインなんてないですよね。

例えば、多少なりともHTMLが書けます。そういう意味では素人ではありません。ホームページ作成ソフトなんて一切使わずに、それこそ「HTMLって何？」っていうレベルの頃から独学で、エディタでしこしことHTMLを書いていたのですから。

CSSもちょっとくらいは分かります。先月から勉強を始めたので、数年前よりは分かるようになりました。

じゃあ、何が素人なんやろ？

SEOは言葉を知っていただけで、先月一冊本を読んで何となく分かりました。まさか、HTMLの記述の仕方がサーチエンジンに影響するなんて思ってもみませんでした。だから、SEOについてはまだ素人。

レンタルサーバーはもちろん言葉どおりなので意味は分かりますが、最近の動向についてはまったく知りませんでした。容量や料金は基本ですが、自作のCGIが使えるとかSSIが使えるとか。この辺りは知識があったけど、データベースが何だとかPleskがどうとか、ネットで調べていると分からない単語もいっぱいありました。だから、まだ素人レベル。

MovableTypeやWordPressに至っては、最近言葉を知ったくらいなので、ド素人と言ってもいいくらいです。

そういう、偏った分野での素人が果たしてどこまでできるのか、見ものですよ?（って誰に言うとんねん）。

ってなワケで、日々サイトリニューアルの作業をしているんですけど、もちろんトップページだけです。それだけでもエラい時間が掛かる。

やりたいこと全部完了するまでには一体どれくらいの時間がかかることやら。

で、現在のトップページには色んなコーナーがあって、もちろんそれぞれ人気があるコーナーやほとんど誰も見ないコーナーもあるので、その整理です。

体裁は大体決まりました。3カラム方式で行こうと思います。

実はこれが本当に大変だったんですよ。特にDIVタグをCSSで制御する際に、positionとかfloatなんてのを使うんですが、なかなか思い通りに表示されずに四苦八苦しました。

ま、とにかく。

何とかなったので次はドロップダウンメニューです。コードの内容はよく理解できてないんですけど、何とかどのブラウザでも表示できそうなコードを発見して、ちょいと手を入れて使えそうなところまでこぎつけました。

最初はね、「プルダウンメニュー」で検索して調べてたんですけど、これはまた違うんですね。

プルダウンメニューは窓の横に「▼」印があって、一度クリックしないとサブメニューが現れない。しかも、あんまりカッコよくない・・・自分的には。

なので、マウスを上に乗せるだけでずらーっとサブメニューが現れるドロップダウンメニューが作りたいワケです。

ところが、ここでもまた問題が発生。

CSSで作ろうとすると、IE7ではうまく動作するのにIE6ではできない、というようなCSSコードがあるんです。本当に厄介ですよね。これまで書いてませんでしたが、もちろんFireFoxやOperaでも上手く表示させたい。

Operaは使ったことがないのでどんなブラウザか知らないんですけど。

とにかく、このCSSってのは厄介です。サイトのデザインの統一性が取れるのはいいけれど、ブラウザによって見え方が違うってのはどないかならんもんかいな。

しばらく話題がサイトリニューアルから逸れましたが、その間にもコツコツと作業を進めています。完璧ではないにしろ、CSSも多少分かってきて、少なくとも見た目は改善の方向に進みそうです。

そうこうするうちに、また別の派生した好奇心が沸いてきました。タイトルにもあるとおり、ドロップダウンメニューです。

メニューにあるページの名前の上にマウスを乗せると、ずらーっとサブメニューが降りてくるヤツがありますよね（分かるかな？）。

あれ、やりたい(笑)。

コーナーが色々とあって、それを全部メニューに入れてしまうと見栄えが悪いんですよ。カテゴリ別にメインメニューを絞って、さらにサブメニューで個々のページに移動させる・・・こういうカッコイイ技を使いたい。

JavaScriptを使えばできるらしいんですけど、中にはJavaScriptをオフにして閲覧する訪問者もいるので、できれば避けたい。

で、色々調べてみるとCSSだけでできる技もあるんですね。世の中には頭のいい人が多いなあ、と改めて感心しました。

デザインの統一性という意味では、CSSでカバーできますよね。それとは違って、MovableTypeやWordPressは多岐に亙るページを一括管理できるところが便利なんですね。

と、言っても、どれくらい便利なのか、簡単にできるものなのか、分かりませんが・・・挑戦してみたい気持ちにはなります。

しかしまあ、あれもこれもしたくて何も進んでいないというのでは話になりませんし、一つ一つ地道にやっていきますかねぇ。

一気に何でもかんでもやってしまおうと思ったら、二進も三進も（*にっちもさっちもってこういう漢字書くんやでー。知ってた？）いかなくなってしまいます。

こういうブログに書いてしまうと簡単だけど、実際にはCSSのあるプロパティ一つとってもかなり時間を要してやっと理解ってことが少なくありません。

サイトのデザインにある程度統一性をもたせようと思ったら、CSSは絶対にはずせないし、SEO対策としてもやっぱりはずせない。

今回のサイトリニューアルにとって、CSSを――完璧ではないにしても――理解することは必須なんですよね。だもんで、まずはじっくりとCSSを勉強するのでありマス。

とまあ、色んな困難が僕を待ち構えていたワケですが、それでもCSSを勉強していると楽しいという思いの方が強いんです。

思い通りにならないことも多いけれど、思い通りのレイアウトが表示された時の嬉しさったら！

特に、本家ぷらむずぶっくではこれまでほとんどと言っていいくらいCSSを使ってませんでしたが、もっと早くに使っておくべきだったと実感しました。

何と言ってもファイルに共通したデザインが出来るというのは便利です。そういうことができることくらいは何年も前から知ってましたが、とにかく重い腰が上がらなかったのです。最初は大変ですからねぇ。

もし、これからサイトを作ろうという方がいらっしゃったら、最初からCSSを使って作る方が絶対にいいです。これだけは断言できますね。後から帳尻合わせのようなことをしようと思ったら僕みたいに苦労します。

もう、一から作り直した方が早いやんけ、みたいな(笑)。

そういうワケで僕は頭を抱え込んでしまったのですが、ウェブの世界ではこの現象は何年も前から問題になっていました。

何しろ僕は数年間、こういう勉強をしてませんでしたからね。今ごろになって悩んでいるという状態なんです。ええ、お恥ずかしい限りですとも。

けれど、こういうブラウザによる表示の不整合を切り抜ける裏ワザが存在するんです。世の中には頭のいい方がたくさんいらっしゃっるってことですよ。

それは「ハック」と呼ばれているワザなんですが、IE6にだけ認識させるコードとかその逆とか、そういうCSSの書き方ができるんです。

けどねえ・・・参考書を読むと、あくまでも「裏ワザ」なんで、できるだけ使わないほうがいいんですって。

どないせえって言うんじゃあ(ToT)！

CSSの勉強を進めていくにつれて、ますます困惑してきました。ネットで調べてみると、インターネットエクスプローラーのバージョンによってCSSの認識の仕方が違う場合があるらしいのです。

ちなみに会社はIE6で家はIE7。

細かいことは覚えていませんが、大枠をwidthで指定して、その中にdivで色んな枠を作るとします。そのdivにはmarginとかpaddingで値を指定する場合があります。

枠と枠内の文字とのスペースを決めたり、枠同士のスペースを決めたりするワケですが、そのスペースの認識がIE6とIE7では内に取ったり外に取ったりと、異なるワケですね。

分からない人にとっては何書いてんねんっ！

という感じですね。僕も書いてて、うまく説明できなくて、こんがらがってしまいました。

とにかく、IE6ではちゃんと表示されているのにIE7では表示が崩れていたり、その逆であったりということが起こってしまうんです。

これには参りました。

自分のサイトをリニューアルかあ。

ホントにため息が出そうなほど膨大な作業量になりそうですが、自分で決めたことですから、決めた以上はキチンとやってやろーじゃないですか。さすが、A型！

だもんで、もう一度ちゃんとCSSを勉強することにしました。

とは言っても、あくまでも独学ですから、見よう見まね、暗中模索の手探り状態です。まずはちょこっと作ったCSSを昼休みに会社で試してみます。

「おお、ここをこう設定したらこういう風に見えるんかあ」

だんだんと分かってきます。これって、サイトを作ろうと思った時にHTMLをいじってた時と同じ感覚ですね。本を読んで分かったようなつもりになっていても、実際にブラウザで表示させてみるとレイアウトがガタガタと崩れてたりとか。

ところが会社で確認したファイルを家に帰って自分のPCで見てみると崩れてるんですよぉ(ToT)！

数年ぶりにWEB関係の勉強をしていくにしたがって、たくさんの新発見がありました。

ぷらむずぶっくではサイト開設以来、ホームページ作成ソフトも使わずにちまちまとHTMLを書いていました。

もちろん、最初は勉強しましたが、そこそこ分かってくると必要以上の勉強はしません。つまり、使うタグが限られてくるのです。

文字に色を付けてサイズを変更したければFONTタグ、改行したければBRタグの連発。

ところが、SEO対策なのか最近の傾向なのか知りませんが、FONTタグなんて使わないんですね?。Bタグも使わないんですね?。そんなタグばっかり使ってるサイトなので、参りましたよ。

表を作るとき以外に、サイトのレイアウトを整えるのによくTABLEタグを使ってたんですけど、これもDIVタグとCSSで簡単にできてしまう。

あ、そうそう。XHTMLやXLMもよく分かってません。FONTタグを使わないのはXHTMLに関係があるのかな。

とにかくまあ、勉強すればするほど楽しくなってきてしまいました。

ところで。

HTMLもCSSもある程度は分かりますと前に書きましたが、これは言い換えれば「分からないことも多い」ということです。だって、個人サイトを長年運営していても、不必要なことは何の勉強もしてませんから。

きっかけはドロップシッピングのお店の運営でしたが、いい機会なのでCSSの勉強を少し前から始めました。

すると、これまで自分が知らなかったことがあまりに多いことに驚きました。

例えば、何度か書いたh1タグやh2タグ。これって、CSSで制御できるんですねー。

CSSファイルに右のような指定をすると、h1タグを使っても、文字サイズは8.5ptになるし、色も変えられるし、スタイルだって太字にする必要がありません。

SEO対策としてh1タグは使った方が良くて、けれど、そのまま使うと大きなフォントのダッサイ太文字になるという状況が避けられるワケです。

なんとまあ、今さら基本的なことをつらつら書いているのか、とも思いますが、本当に数年間何も勉強してなかったので、しゃーないですね。

とにかく、CSSをちゃんと勉強すれば、サイトの管理すら簡便にできちゃうワケです。

HTMLもCSSもある程度は分かります。だってぷらむずぶっくを9年以上運営しているんですから。

分からない人のためにめちゃくちゃ簡単に説明すると、サイト（今、あなたが見ているこのページ）を作るための言語の一種です。うわあ、めっちゃ簡単(笑)。

言語と言うと難しく聞こえますが、プログラムというほどのものでもなくて、ちょっと勉強すればすぐに分かるレベルの言語です。

ちなみにHTMLはハイパーテキストマークアップランゲージ（Hyper Text Markup Language）、CSSはキャスケーディングスタイルシート（Cascading Style Sheet）の略です。こうやって書くと、何のこっちゃ分かりませんね。

とにかく、DSPで用意されたテンプレートをいじって、自分なりのサイトを作りました。

そもそも、DSPで用意されているテンプレートでお店を構築しても、何万人、あるいは何十万人というユーザーが同じようなテンプレートでドロップシッピングのネットショップを開いているワケです。

例えばショッピングモールに行って、どこもかしこも同じような店構えだったとしたら、自分のお店に来てくれる可能性は出店数分の1ですよね。

と、なると、自分のお店(＝今の話ではサイト)に独自性を持たせないと、目立ちません。お客さんは来ません。

登録したDSPのサイトでは「上級者向け」として、自分である程度HTMLやCSSがいじれるようになっていたので、僕はいきなり「上級者向け」に挑戦することにしました。