診断士の経営視点とSEのシステム技術の両面からIT・システム開発・Web技術+アウトドア情報を提供しています

トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報








スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[--------] スポンサー広告 | |

背景画像でJoomla!サイトの見栄えを変える 

Joomla!サイトの見栄えを変えてみる

Joomla!実践サイトには、MovableType、WordPress、Xoopsの実践サンプルサイトに共通のデザイン、レイアウトを適用している。このテンプレートを元にページ全体に背景画像を入れて見栄えを変えてみることにした。

テンプレートをリキッドレイアウトから幅固定タイプに変更する

変更前のテンプレートは表示するブラウザ画面の横幅80%で可変する いわゆるリキッドレイアウトを採用していた。表示幅を固定しないリキッドレイアウトには確かにメリットがあるのだが、企業サイトの場合、あまり幅が小さく表示されても困ることが多い。、特に物販サイトでは商品画像をできるだけ大きく表示することになるので、リキッドレイアウトでも画像がツッカイ棒になってしまい、実際問題として可変できないことが多い。

今回の変更では背景画像で見栄えを変えることが目的なので、横幅が固定されないとサイドバーに対して画像が配置できにくいという問題もあり、フロートレイアウトによる3カラムを維持しながら、横幅固定レイアウトでいくことにした。

フロートレイアウトで3カラム、メインコンテンツ上部記述は難しい

フロートレイアウトは面倒だ。ブラウザによる解釈の違いの影響も大きい。2カラムならまだ何とかなるが、3カラムでは深刻な問題が出てくる。しかもJoomla!のテンプレートはSEOを考慮して、メインコンテンツがサイドコンテンツよりHTMLの上部にくるようにしている。この条件でIEの互換モードでもキチンと表示されるページを作るのは嫌になるほど大変な作業だ。せっかくリキッドレイアウトで表示されるようにしたものを、幅固定レイアウトに変更するのは気が重い。

ともかく、ページ幅750px、左サイドバー 170px、コンテンツ部 400px、右サイドバー 170px の3カラム幅固定レイアウトに変更できた。

後は所定の幅の背景画像を作って設定するだけ

ページ全体の ラッパー用背景画像として 左サイドバーには赤、右サイドバーには緑のクリスマスカラーの画像を作る。それぞれの画像にはドロップシャドーを入れて立体感を醸し出すことにする。コンテンツ部は読みやすくするため白一色にする。サイドバーの表示に一致するように赤緑のボックスを微妙に移動させながら位置決めを行う。ドロップシャドーを入れたために位置決めが面倒だ。

Joomla!でつくるビジネスサイトクリスマスバージョンタイトル部分はラッパーのイメージを延長し、さらにイメージ画像をはりつけることにした。クリスマスなのでリースとポインセチアの画像を使ったが、気に入った素材をネットで探すのに時間がかかってしまった。素材を検索すると、素材サイトではなく、素材サイトのリンク集が出てくるのが面倒だ。ヤットお目当てのページにたどり着いても、素材作成者のサイトはデザイン優先でどこに素材があるのか分かりにくい。時間と手間がかかる原因だ。

デザイン的にはイマイチだが

Joomla!テンプレートにはヘッダとメインの間を横断するグローバルナビを入れている。この部分は途中で色を変えるわけにはいかないので、独自に赤一色の背景画像を作った。リンク色の設定を背景色に合わせて変更するのが面倒だ。

サイドバーのタイトルにも背景画像を入れることにしたが、左右の背景色が違ううえ、アイコンを入れようとしたので結構手間取ってしまった。アクセントになり、ページを引き締めようと苦労しながら結局は妥協することになった。

デザイン的には問題点や改善点も多いが、とにかく4つの背景画像だけでページ全体のイメージを変更することができた。すべて背景画像にしているので変更も簡単だし、SEO的にも有利になるはずだ。あとはデザインセンスの問題だけだ。

泣く子と IEには・・・

一件落着かと思ったら、お問い合わせとWordPressのページがIE互換モードでズレるという現象が発生している。FireFox、Opera、SafariではOK。まったく IE などというわけのわからないブラウザのおかげでどれほどの時間が費やされていることか? 泣く子と IEには勝てない 後日対応しなければならなくなった。



いつも 色々と為になる情報をありがとうございます。


加藤先生に追いつこうとがんばっているつもりですが
・・・おこがましいにも程があるようです><
[ 編集 ] [2007/12/13 13:51]

Joomla!サイトデザイン変更

Joomla!サイトのデザインを変えました。
花やリースはイメージと一致しないので、赤と緑の色遣いとトナカイのみとし、あとは画像を入れることにしました。画像はローテーションで表示されます。
[ 編集 ] [2007/12/14 16:46]

ブログ掲載のおしらせ

はじめまして。貴ブログサイトを拝見し、誠に勝手では
ございますが、掲載させていただきました。
http://www.artput.net/joblog-systemen.html

差し支えなければ、リンクを貼っていただけませんか?
タイトル:仕事コトログ
URL http://www.artput.net/joblog.html

ご要望、掲載拒否などの場合、御連絡いただけると幸いです。
『仕事コトログ』運営者 エボラン
[ 編集 ] [2007/12/29 15:43]

コメントの投稿













管理者にだけ表示を許可する

トラックバック

この記事のトラックバックURL
http://wiz2.blog16.fc2.com/tb.php/261-e818497e








トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。