「CSS、初体験」です。

　みなさん、こんにちわ。水の心です。

今日は「CSS、初体験」です。

　このブログ1回目で、新しいジャンルの開拓として、このサブブログを立ち上げた事を、伝えましたが、今回その制作過程で非常に苦しんだ、という話です。

　当然「はてな」のブログなので、Googleアナリティクス用のトラッキングデータをブログに埋め込んだり、細かい表示設定は、メインブログのやり方をそのまま踏襲しました。

　今回、ありがたい事に、版権表示フリーの「背景素材、ホームページ壁紙」サイトを発見しました。パステルカラーで、キレイで可愛らしい画像が並んでいます。

　自分で探してきた200KB近い「写真」画像は、ブログに合わせて表示させるのにCSSによる加工が必要なのですが、この壁紙ならデータ量は4KB程度で、最初からブログ、HP用に作ってあるので、調整が少なくて済みました。

　そして、一回目の記事を書き、投稿した後、画面を落ち着いて眺めていたところ、なにか雰囲気が違う事に気が付きました。メインのブログと少し形が違うんです。

サイドバーと言われるパーツや、プロフィール等が、ブログの一番下に表示され、動きません。

　「なぜサイドバーが、下に？」

早速、調べてみると、本文中の画像に、巨大なものを張り付けると、ブログ内部ののプログラム設定数値が狂ってしまい、サイドバーが押されてはみ出て、下に移動してしまう事がわかりました。

 　そういえばサブブログ開設の際、新しい「版権フリー写真画像サイト」を発見し、そこから写真画像を張り付けていたのでした。

「しかしダウンサイズはしたのだが・・・」

 画像を小さくして貼り付ける事は憶えて実行していました。

　一旦貼り付けていた画像を削除し、違う小さい画像を張り付けても、直りません。どんどん焦り、どんどん調べてみます。

「CSSを使って、本文中の狂ったサイズを適正サイズに直しましょう！」

 と書かれていました。

　「そりゃ無理やんけーッ！」

CSSの意味がわからない私でも、こうなったらやるしかありません。

Firefoxからのブログ上の右クリで「要素の調査」を出し、慎重に、サイドバーに関連しているCSSの行を探します。

「ありゃしねぇーッ！」

今度は、本文中にあるだろう狂ってしまったサイズ設定を探してみます。

「わかりゃしねぇーッ！」

該当するCSSを、落ち着いて調べますが、カラキシわかりません。

大体のところで、数値をいじってみると、本文文字列が、数センチの幅になったりしました。しかし、サイドバーは動かざること山の如し。

　「いきなり一回目の記事公開して、これかよーッ！」

こうなったら、自爆ボタンを「ON」したのちに、もう一回ブログを作り直しだ。

一日かけて、作ったものを壊して、再度作り直すと思うと、失神しそうです。

　「と、とりあえず、ダメならダメで、出来るだけイジッておこう・・・」

「背景画の変更」から始まり「背景色」「ヘッダ」「記事」「サイドバー」「フッダ」「{ }デザインCSS」何か関連ありそうなところは、全て触ってみます。

　「ダメだ・・・」

最後に「デザインテーマ」⇒「公式のテーマ」というのを、投入してみることにしました。

「・・・おおっ、サイドバーが横に来ている！」

　そうです。

見慣れたメインブログは「公式デザインテーマ」を使用しており、サイドバーも、きちんと定型で、あるべきところにありました。

 今回は、それを忘れていた様で、

「公式デザインテーマ」を使わなかったばかりに、サイドバーが下に表示され、それを「壊れた」と勘違いして、直すために4時間位、さ迷っていたのでした。

本当にすっかり忘れていました。

自爆ボタンを早めに押さなくてラッキーでした。

　結局、公開初日から、一時非公開措置を取り、見ていたお客さんもチリジリバラバラという最悪の結果になりましたが、とりあえず、何とか収束しました。

しかし未だ「CSS」という、未知の難題が待ち構え、他の課題も多々残っているのですが、また時間のある時に、色んな改善方法を試したみたいと思います。

それでは、また次の更新まで！