ホームページのデザインを変えてみました

昨年11月に開設したこのホームページですが、デザインがシンプル過ぎてどことなく寂しいなぁ・・・とずっと思っていました。ホームページ開設からしばらくの間は、あちこちで起こる不具合に対処するのに精一杯で、デザイン云々どころではありませんでした(^_^;)しかし、開設から10ヶ月が経ち、少しずつコンテンツも増え、有料サーバーに引っ越したことで安定したサイト運営が出来るようになりました。メンテナンスは基本毎日していますが、必要最低限の簡単なものなので、ホームページの不具合に振り回されていた以前と比べて心にゆとりが出来ました(*^^)vそこで、前々から考えていたホームページのデザイン変更に挑戦してみることにしました。とは言っても、ゴテゴテとした派手なデザインは敬遠されますので、基本的なデザインはそのまま残し、ヘッダー部分と背景部分(壁紙)だけ変えることにしました。ヘッダー部分にはパブリックドメイン(作者が著作権を完全に放棄したもの)の画像サイトから入手したお点前セット(?)を配置しました。やっぱり宇治茶は、世界に誇れる宇治の貴重な財産ですからね(^^)ヘッダー部分の変更は、画像サイズの調整をしてアップロードするだけの、簡単な作業でした。問題は背景画像の変更です。こんなのスタイルシート(CSS)を弄るだけで、楽勝♪と思っていましたが、かなり手強かったです(私には)。いくつか見当を付けた場所にコードを書き加えるのですが、何度やっても変化なし・・・。バックアップデータもありますし、子テーマを作っているので、弄り放題なのですが、何故か全く上手く行きません(T_T)どうやら、設定した背景画像は読み込まれているのですが、反映されていないようです。ですが、どこがおかしいのか分かりません。そこで、強力な助っ人に頼ることにしました。「デベロッパーツール」という、ブラウザに搭載されているアドオン(拡張機能)です。その名の通り、Webサイト開発者のための機能です。Firefoxでは「Firebug」、Chromeなら「デベロッパーツール」が有名ですね(^^♪これを使って調査すること数十分、ようやく原因を突き止めることが出来ました\(^o^)/通常、デザイン関連の問題はstyle.cssというファイルを弄れば大概は解決するのですが、このホームページの場合導入しているテーマ(テンプレート)のファイルの一つ・main.cssの背景設定が#ffffff(白)になっていたので、いくらstyle.cssを弄っても反映されなかったのでした(~_~;)main.cssの設定を変更したい画像のURLに書き替えたら、見事に反映されました。詳しい人なら、デベロッパーツールを使わなくても分かるのでしょうが・・・。私の場合、これを使わないと未だに原因究明が出来ずにいたことでしょう。上手く行って良かったです。それに、また一つ知識が増えたのも、嬉しいですね♪

The following two tabs change content below.

めぐみん

「宇治のお茶まる」の広報。ホームページの作成、管理、メンテナンスを担当。