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

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








スポンサーサイト 

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

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

XOOPSでつくるビジネスサイト ヘッダデザインを変更する 

XOOPS ヘッダ背景画像を入れる

XOOPSを活用したビジネスサイト構築法 デザイン編 第一弾

R0010960XOOPSはCMS=コンテンツ管理システムだが、インストールしたままでは使えない。モジュール追加以外に、デザイン面でも手を入れてオリジナリティを出す必要がある。今回は、XOOPSで行こう デザイン編の第一弾として、ヘッダのXOOPSロゴ画像の代わりに背景画像を入れてみた。

XOOPS デザインカスタマイズの準備

今回のカスタマイズは XOOPSの既定のテーマ default を対象とする。最初からテンプレートを作ったり、他のテーマをもとにする方法もあるが、XOOPSの基本構造を理解するために、最初のカスタマイズは default をベースにするほうがよいだろう。

defaultテーマを直接変更すると取り返しのつかないことになるので、themes/default配下のファイルを themes/新テーマ に再アップする。このとき、theme.html の 4か所の include先を default/ から {%xoops_thems} に変更する。
{include file="$xoops_theme/theme_blockleft.html"}

管理メニュー>システム管理>一般設定>編集 で デフォルトサイトテーマ に新テーマを設定する。新テーマは頻繁に更新することになるので、themes/ ディレクトリからの自動アップデートを有効にする を有効にしておく。(カスタマイズ終了後は自動アップデートを無効にすること)

XOOPS ヘッダ部の構成を確認する

XOOPSのテンプレートは themes/新テーマ 配下の6つのHTMLで構成されている。theme.htmlがメインとなるHTMLで、他のHTLは先ほど変更したinclude文で theme.html に読み込まれる。

ヘッダ部は theme.htmlの上部 26行目から34行目のtable内に書かれている。tableは2行(2段)、1行目の左が headerlogo、右が headerbanner。2行目は headerbar。

defaut のイメージの XOOPSロゴがテーブル1行目の左セル headerlogo、その右の青いベタ部分が headerbanner、下の行全部が headerbar だ。

XOOPS ヘッダ部1行目に背景画像を入れる

default ではロゴとバナーをセルに分けているが、今回は合体して背景に画像を入れてみる。いろいろやり方はあるが、headerlogoのセルをコメントでつぶし、headerbannerのセルに colspan="2" を指定して二つのセルを合体させた。

XOOPSのテーマ用スタイルシートは同じディレクトリの style.css。48行目あたりの headerbanner 定義に背景画像用の定義を追加する。

td#headerbanner {
width: 100%;
height:120px; /* 背景画像の高さと合わせる */
background-image:url(titleBack.jpg); /* 背景画像 */
background-repeat:no-repeat;
background-position:top right;
}

背景画像を新テーマディレクトリにアップして確認してみよう。

XOOPS サイトタイトルをスローガンを見出しに表示する

XOOPSのdefaultテーマでは、サイト名とスローガン(XOOPSではサイトの説明文のことを過激にもこう呼んでいる)は title にしか表示されない。これではSEO的にも問題なのでヘッダ部の背景画像の上に表示させる。

さらにXOOPS defautlテーマでは h1.h2,h3,h4等の見出しタグを使っていない。わずかにWordPressモジュールが記事の日付でh3,タイトルでh4を使っているのみ。これらのタグはSEO的に有効だとされているので、積極的に使ったほうがいいだろう。WordPressモジュールとの整合性を考えて、サイト名をh1,スローガン=サイト説明文をh2にした。

<td colspan="2" id="headerbanner"><a href="<{$xoops_url}>/"><h1><{$xoops_sitename}></h1></a><h2><{$xoops_slogan}></h2></td>

defaultテーマでは hタグに対するスタイル設定もないので、style.css で定義する。マージン、パッディングを設定して文字位置を調整し、h2の文字サイズを変更した。

これで、いかにもXOOPSで作りました! というサイトのイメージから脱却できるのではないか。背景画像でサイトや季節のイメージを、その上にサイト名と説明文をh1,h2タグで記述し、見た目もSEO効果を考えたつもり。


コメントの投稿













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

トラックバック

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








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