スタイルシートで、ブログのデザイン！でも失敗しちゃったよ。

いや～、このブログのデザインも飽きてきたな～

このブログは、ＷｏｒｄＰｒｅｓｓ　って言うソフトを使っています。

ＷｏｒｄＰｒｅｓｓ　の特徴は、無料のテンプレートが多い事かな？

ほんと、沢山のデザインがあるんだな～

気に入ったのをみつけたよ。

でも、それを作ったのが、外人でさ～

その人のホームページが、英語で書いてあるのよ。

テンプレートを、どこでダウンロードしたらいいのか、わかんないって事もしばしば。

やっとダウンロードできたと思ったら、エラーが出たときなんか、泣けるよ。

そうやって、沢山のテンプレートを見たんだけど、なかなか気に入ったのがなくてさ～

「ここが、もうちょっと」

て具合で、なかなか納得行くのが見つからない訳だよ。

そこで、自分でつくっちゃお～って事で、いろいろ調べた訳。

基本的なところは、何とか出来たのよ。

たぶん・・・

ま～、プログラムをいじるところだけど。

後は、デザイン。

でも、私は素人なので、デザインが浮かびません。

そこで、今のデザインを改良する事にしたのよ。

具体的には、２カラムから、３カラムに変更。

何？って人の為に説明。

今は、ブログのタイトルの下に、ブログの本文があり、右にメニューがあります。

それを、左にもメニューを付けようって訳。

何でそんなことするの？って

カッコいいから・・・

と、もうちょっと、グーグルの広告を目立たせたいから。

そうすれば、もうちょっと、グーグルのリンクを押してくれる人が増えるかな？

って言う、経済的な理由です。

ま～、このブログも、サーバを借りているので、タダではありません。

ところで、ホームページを作る技術も、少しずつ変化しています。

昔は、デザインする時に、テーブルタグってのを使っていました。

私が、初めてホームページを作ろうとした時は、パソコンの入門書などには、

「読み込みが遅くなるので、テーブルタグを使わないように」

って書いてありました。

しかし、ネットブームが来て、皆がホームページをデザインするのに、テーブルタグを使うようになりました。

いつの間にか、それが当たり前になりました。

でも、今は、スタイルシートを使うやり方が増えてきました。

ところで、テーブルタグや、スタイルシートってなんじゃい？って思う人もいると思います。

ま～、説明をしてもいいのですが、たぶんわからないと思います。

そこで、ある実験をしてください。

それで、スタイルシートがどんなものか、少しはわかるかも知れません。

このブログのデザインは、誰かが、スタイルシートを使ってデザインしています。

そのスタイルシートで、どんな事が出来るか見てもらいます。

今からの説明は、ブラウザが、ＩＥの方のみです。

他のも説明するのは面倒なので、ＩＥ　のみとします。

ところで、ＩＥ　ってなんじゃい？って人の為に、説明ですが、もし、あなたが、Windowsのパソコンなら、たぶんＩＥのブラウザを使っています。

今から、このブログのスタイルシートをのけた、デザインを見てもらいます。

まず、画面の左上をご覧ください。

そこに、”ファイル”と言う文字があると思います。

そこを押すと、”名前をつけて保存”ってのがあると思います。

それを押すと、”ＷＥＢページの保存”ってのが出てくると思います。

出てきた画面の下の方に、”ファイルの種類”ってのがあると思います。

ここで、”Ｗｅｂ　ページ、完全(*htm;*html)”を選んで、保存してください。

保存する場所は、デスクトップがお勧めです。

すると、

 

こんなんがで出来ていると思います。

今、青いほうをクリックすると、このブログと同じようなものが見えます。

しかし、画像がダウンロードできていないので、ちょっと違います。

この状態が、スタイルシートを使った状態です。

次に、黄色いフォルダのなかを見てください。

中には、いくつかのファイルがあると思います。

その中の、”style.css”のファイルを捨ててください。

「え～、捨てていいの？」

実は、これが今回のスタイルシートが書かれているファイルです。

捨てたら、もう一度、先ほどの青いのを、クリックしてみてください。

これが、スタイルシート無しの、私のブログです。

全然違うと思います。

スタイルシートを使って、これだけの事が出来ます。

このブログのスタイルシートありの状態

このブログのスタイルシート無しの状態

今回、プログラムをいじって、スタイルシート無しの状態まで、何とかできました。

今までとほとんど変わっていませんが、メニューの欄が一つ増えています。

後は、スタイルシートを使って、デザインです。

しかし、私は、最近スタイルシートを触っていないので、忘れました。

まず、復習です。

ところで、デザインは、メモ帳のソフトでも出来ます。

しかし、専用のソフトがあるので、それを使います。

ま～、そのソフトの使い方から復習ですが・・・

試行錯誤しながら、やっと出来ました。

外は明るくなっています。

ま～、６時間ぐらいかかりました。

でも、納得行くものが出来ました。

う～ん、我ながら満足です。

さ～、寝るか～

その前に、苦労の作品をもう一度鑑賞です。

最後に、スタイルシート無しの状態を確認です。

あれ？

間違ってる。

なんと、スタイルシート無しの状態で間違っていました。

つまり、今までの苦労が無駄です。

なんてこった～

また、一からデザインのやり直しです。

ちゃんと、デザインする前に確認しておくべきでした。

ま～、少しは、勉強になったからいいか～