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

スポンサーリンク

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

このブログは、WordPress って言うソフトを使っています。

WordPress の特徴は、無料のテンプレートが多い事かな?

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

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

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

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

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

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

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

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

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

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

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

たぶん・・・

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

後は、デザイン。

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

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

具体的には、2カラムから、3カラムに変更。

何?って人の為に説明。

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

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

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

カッコいいから・・・

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

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

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

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

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

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

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

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

って書いてありました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

すると、

 きになるこまめ

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

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

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

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

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

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

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

「え~、捨てていいの?」

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

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

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

全然違うと思います。

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

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

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

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

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

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

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

まず、復習です。

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

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

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

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

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

ま~、6時間ぐらいかかりました。

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

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

さ~、寝るか~

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

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

あれ?

間違ってる。

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

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

なんてこった~

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

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

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

コメント

タイトルとURLをコピーしました