第6章 XOOPS Cubeのデザイン変更

第6章 XOOPS Cubeのデザイン変更

ここからはデザインの変更方法について解説していきます。

テーマの管理

XOOPS Cubeのデザインは「テーマ」を適用するという形で変更します。

デフォルトでインストールされているテーマを使って変更の手順を学習します。

この作業はローカルコンピュータ上でテーマをデザインしてからサーバーにアップする方が賢明です。

本書ではローカル環境で作業しているという前提で解説します。

(XAMPP環境で開発用にXOOPS Cube Legacy 2.2.0をセットアップした後に学習してください。)

「モジュールメニュー」の「互換モジュール」の「テーマの管理」をクリックします。

theme_01.png

「テーマの管理」ページ

このページで使用するテーマを設定します。

テーマ設定の学習をするにはデフォルトのテーマをコピーしてカスタマイズするのが第一歩です。

XOOPS Cubeの「html」フォルダ内の「themes」フォルダ内にテーマセットをフォルダとしてセットします。

「legacy_default」フォルダをコピーして「my_theme」という名前に変更します。

theme_02.png

フォルダコピー後の状態

ここで再び「テーマの管理」ページを確認します。

theme_03.png

テーマ追加後の「テーマの管理」ページ

テーマが2つに増えていることを確認します。

(まだ設定を行なっていないので同じテーマで表示されます。)

使用するテーマの選択は「操作」の項目で使用するテーマのチェックボックスをチェックして選択します。

(ブロックをインストールすることでホームページ上からテーマを切り替える機能も利用できます。)

すぐに適用を反映させるには選択を1つにして「選択」ボタンをクリックしてアクティブに設定することで可能になります。(複数選択していると、すぐには適用されないことがあります。)

引き続きコピーした「my_theme」内のファイルを編集します。

theme_04.png

XOOPS Cube Legacy 2.2.0からテーマファイルの構成が変更されていますが、基本的には旧バージョンと互換性も保たれているようです。

テーマセットファイルの説明

imagesフォルダ

テーマで使用する画像が入っているフォルダ

manifesto.ini.php

「テーマの管理」ページで表示する内容およびテーマのマニフェスト設定ファイル

screenshot.png

「テーマの管理」ページで表示するサムネイル画像

index.html

HTTP不正アクセス防止用ファイル(変更不要)

theme.html

テーマレイアウトの基本ページテンプレートファイル

style.css

テーマ用CSSファイル(XOOPS Cubeで参照されるテーマ用CSSファイル)

common.css

テーマ用CSSファイルにインクルードされているファイル

item.css

テーマ用CSSファイルにインクルードされているファイル

layout.css

テーマ用CSSファイルにインクルードされているファイル

menu_blocks.css

テーマ用CSSファイルにインクルードされているファイル

style-leftcolumn.css

テーマ用CSSファイルにインクルードされているファイル

style-rightcolumn.css

テーマ用CSSファイルにインクルードされているファイル

旧バージョンでは1つのファイルで構成されていたCSSファイルを分割してメンテナンスしやすいように変更されています。

manifesto.ini.phpの編集

最初にインストールされているデフォルトテーマと間違わないように「manifesto.ini.php」を少し変更します。

「manifesto.ini.php」をテキストエディターで開きます。

theme_05.png

「manifesto.ini.php」をテキストエディターで開いた状態

このファイルに記載されている内容と「テーマの管理」ページに表示されている内容を見比べると、どの項目がどこに表示されるかわかります。

ここでは基本の3つを変更します。

Name="XOOPS Cube Legacy 2.2"

Name="My Theme"

に変更します。

Author=XOOPS Cube Project Team

Author=”あなたの名前または会社名(英語)”

に変更します。

Description="Full header with search. Layout with 2 Columns, left or right, and bottom center blocks."

Description="Custom Theme"

に変更して上書き保存します。

再び「テーマの管理」ページで確認します。

theme_06.png

変更後の「テーマの管理」ページ

今設定した項目が反映されていることを確認します。

カスタマイズするテーマ「My Theme」のチェックボックスにチェックを入れ、「選択」ボタンをクリックしてアクティブに変更します。

デフォルトのテーマのチェックボックスのチェックをはずし、「送信」ボタンをクリックします。

これで新しいテーマが適用されるようになりました。

引き続きテーマを編集します。

テーマ編集

「theme.html」をテキストエディターで開きます。

まず初めに「theme.html」をよくご覧ください。

XOOPS Cubeのテーマテンプレートには「XOOPS Smarty変数」という独自の変数を利用しています。

基本はXHTMLファイルで、XOOPSから情報をインポートする部分に「<{$xoops_url}>」というような「XOOPS Smarty変数」と呼ばれる記述があります。

(XOOPS Smarty変数については後述のXOOPS Smarty変数のページを参照してください。)

それとPHPの「ifの構文」と「forの構文」や「foreachの構文」が含まれています。

(ifは条件分岐、for、foreachはループ処理の構文です。)

ヘッダー部の記述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">

HTMLドキュメントの基本設定構文とHTML開始タグ

基本はXHTML1.0で記述していますが、必要に応じて変更します。

「<{$xoops_langcode}>」というXOOPS Smarty変数で文字コードの設定をインポートしています。

<head> ヘッダー開始タグ

<meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" />

<meta http-equiv="content-style-type" content="text/css" />

<meta http-equiv="content-script-type" content="text/javascript" />

<meta http-equiv="content-language" content="<{$xoops_langcode}>" />

<meta name="robots" content="<{$xoops_meta_robots}>" />

<meta name="keywords" content="<{$xoops_meta_keywords}>" />

<meta name="description" content="<{$xoops_meta_description}>" />

<meta name="rating" content="<{$xoops_meta_rating}>" />

<meta name="author" content="<{$xoops_meta_author}>" />

<meta name="copyright" content="<{$xoops_meta_copyright}>" />

<meta name="generator" content="XOOPS Cube" />

<title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>

<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_themecss}>" />

HTMLヘッダー部のMETAおよびタイトル、CSS設定のXOOPS Smarty変数をそれぞれインポートしています。

<!-- RMV: added module header -->

<{$xoops_module_header}>

<script type="text/javascript">

<!--

<{$xoops_js}>

// -->

</script>

HTMLヘッダー部にそれぞれのモジュールで設定するヘッダー部とXOOPS Cube デフォルトのJavaスクリプトをXOOPS Smarty変数を使ってインポートしています。

<!--[if IE]>

<style type="text/css">

#side{ width: 240px;}

#content {width:690px;}

#container { zoom: 1; padding-top: 10px; }

.centerCcolumn { zoom: 1;}

input {

border-width: expression(this.type=="submit" ?'1px':'');

border-style: expression(this.type=="submit" ?'outset':''); <br>

border-color: expression(this.type=="submit" ?'#ccc #666 #666 #ccc':'');

font-family: expression(this.type=="submit" ?'verdana arial':'');

font-size: expression(this.type=="submit" ?'11px':'');

font-weight: expression(this.type=="submit" ?'bold':'');

color: expression(this.type=="submit" ?'#444':'');

background-color: expression(this.type=="submit" ?'#f4f4f4':'');

cursor: expression(this.type=="submit" ?'hand':'');

}

</style>

<![endif]-->

IE用のCSSを設定しています。

</head> ヘッダー終了タグ

<body> ボディ開始タグ

<div id="layout"> layoutブロック開始タグ

<a name="top" id="top"></a> アンカーリンクタグ

<div id="header"> headerブロック開始タグ

<div class="headerlogo">

<a href="<{$xoops_url}>/"><img src="<{$xoops_imageurl}>images/logo.png" alt="<{$xoops_sitename}>" title="<{$xoops_sitename}>" /></a>

</div>

headerlogoブロック

ヘッダーロゴの画像表示ブロック

<div class="headersearch">

<form action="<{$xoops_url}>/search.php" method="get">

<input type="text" name="query" size="22" class="headerSearchField" />

<input type="hidden" name="action" value="results" />

<button name="submit" type="submit" value="search" accesskey="F">Search</button>

</form>

</div>

headersearchブロック

サイト内検索用ブロック

</div> headerブロック終了タグ

<!--<div class="headerbar">

<ul id="navigation">

<li><a href="http://xoopscube.org/index.php"><span>Welcome</span></a></li>

<li><a href="http://xoopscube.org/modules/news/"><span>News</span></a></li>

<li><a href="http://xoopscube.org/modules/features/"><span>Features</span></a></li>

<li><a href="http://xoopscube.org/modules/pukiwiki"><span>Documentation</span></a></li>

<li><a href="http://xoopscube.org/modules/xhnewbb/"><span>Forum</span></a></li>

<li><a href="http://xoopscube.org/modules/workshop/"><span>Workshop</span></a></li>

</ul>

<div class="floatClear"></div>

</div>-->

ヘッダー部にナビゲーションのリンクを表示するためのブロック

デフォルトではコメントアウトされているので表示されないようになっています。

<div id="container" class="clearfix"> containerブロック開始タグ

<div id="main2columns"> main2columnsブロック開始タグ

<!-- BLOCK Center-Center -->

<{if $xoops_showcblock == 1}>

<div class="centerCcolumn">

<{foreach item=block from=$xoops_ccblocks}>

<div class="centerCblock">

<div class="centerCblockTitle">

<{if $xoops_isadmin}>

<a href="<{$xoops_url}>/modules/legacy/admin/index.php?action=BlockEdit&amp;bid=<{$block.id}>"><img src="<{$xoops_imageurl}>images/edit.png" /></a>

<{/if}>

<{$block.title}>

</div>

<div class="centerCblockContent"><{$block.content}></div>

</div>

<{/foreach}>

</div>

<{/if}>

<!-- Module Content -->

中央ブロック中央表示ブロック

中央ブロックの中央が表示設定になっていたら動的に生成するブロック

<{if !empty($xoops_contents)}>

<div id="content"><{$xoops_contents}></div>

<{/if}>

モジュールのコンテンツ表示ブロック

モジュールのコンテンツを動的に生成するブロック

</div><!-- End main2columns --> main2columnsブロック終了タグ

<div id="side"> sideブロック開始タグ

<div class="sidecolumn"> s idecolumnブロック開始タグ

<{if $xoops_showlblock == 1}>

<{foreach item=block from=$xoops_lblocks}>

<div class="leftblock">

<div class="leftblockTitle">

<{if $xoops_isadmin}>

<a href="<{$xoops_url}>/modules/legacy/admin/index.php?action=BlockEdit&amp;bid=<{$block.id}>"><img src="<{$xoops_imageurl}>images/edit.png" /></a>

<{/if}>

<{$block.title}>

</div>

<div class="leftblockContent"><{$block.content}></div>

</div>

<{/foreach}>

<{/if}>

レフトブロックコンテンツ表示ブロック

左ブロック表示設定のブロックがあるときに動的に生成されるブロック

<br /> 改行

<{if $xoops_showrblock == 1}>

<{foreach item=block from=$xoops_rblocks}>

<div class="rightblock">

<div class="rightblockTitle">

<{if $xoops_isadmin}>

<a href="<{$xoops_url}>/modules/legacy/admin/index.php?action=BlockEdit&amp;bid=<{$block.id}>"><img src="<{$xoops_imageurl}>images/edit.png" /></a>

<{/if}>

<{$block.title}>

</div>

<div class="rightblockContent"><{$block.content}></div>

</div>

<{/foreach}>

<{/if}>

ライトブロックコンテンツ表示ブロック

右ブロック表示設定のブロックがあるときに動的に生成されるブロック

</div><!-- End sidecolumn --> sidecolumnブロック終了タグ

</div><!--End Side --> sideブロック終了タグ

</div> containerブロック終了タグ

</div> layoutブロック終了タグ

<{if $xoops_showcblock == 1}>

<div id="centerBlocks">

<div id="centerBlocksContainer">

<div class="centerLcolumn">

<{foreach item=block from=$xoops_clblocks}>

<div class="centerLblock">

<div class="centerLblockTitle">

<{if $xoops_isadmin}>

<a href="<{$xoops_url}>/modules/legacy/admin/index.php?action=BlockEdit&amp;bid=<{$block.id}>"><img src="<{$xoops_imageurl}>images/edit.png" /></a>

<{/if}>

<{$block.title}>

</div>

<div class="centerLblockContent"><{$block.content}></div>

</div>

<{/foreach}>

</div>

<div class="centerRcolumn">

<{foreach item=block from=$xoops_crblocks}>

<div class="centerRblock">

<div class="centerRblockTitle">

<{if $xoops_isadmin}>

<a href="<{$xoops_url}>/modules/legacy/admin/index.php?action=BlockEdit&amp;bid=<{$block.id}>"><img src="<{$xoops_imageurl}>images/edit.png" /></a>

<{/if}>

<{$block.title}>

</div>

<div class="centerRblockContent"><{$block.content}></div>

</div>

<{/foreach}>

</div>

<div class="floatClear" /></div>

</div>

</div><!-- End Block Center-Left and Center-Right -->

<{/if}>

中央ブロックの左右表示ブロック

中央ブロックの左右のブロックが表示設定の時に動的に生成されるブロック

<br class="floatClear" /> フロート解除のための改行

<div id="footerbar">

<a href="http://xoops.net.br/">Portuguese</a> | <a href="http://xoopscube.org/">English</a> | <a href="http://www.xoopscube.de/">German</a> | <a href="http://www.xoopscube.gr/">Greek</a> | <a href="http://xoopscube.sourceforge.net/ja/">Japanese</a> | <a href="http://www.xoops.ne.kr/xoopscube/">Korean</a> | <a href="http://www.xoopscube.ru/">Russian</a> | <a href="http://www.xoopscube.tw/">T-Chinese</a>

<span><a href="#top"><img src="<{$xoops_imageurl}>images/top.gif" alt="top" title="top" hspace="15" /></a></span>

<br />

<{$xoops_footer}>

</div>

footerbarブロック

フッター情報表示ブロック

</body> ボディ終了タグ

</html> HTML終了タグ

※theme.htmlをより理解するためのポイント

それぞれのdivやif文等を適切にインデントすると構造がよりわかりやすくなります。

前頁の続き

contents_04.png

「XOOPS Smarty変数」の詳細については以下のサイトを参照してください。

XOOPS Cube TOKAI

http://xc-tokai.net/modules/smartsection/item.php?itemid=1

theme_08.png
theme_09.png

このファイルはそれぞれのCSSをインポートしているだけのファイルです。

デフォルトの状態では右メニューの2カラムの設定になっています。

これを左メニューの2カラムに変更するには「@import "style-rightcolumn.css";」をコメントアウトして「@import "style-leftcolumn.css";」を有効にします。

これだけでメニューの位置を変更することができます。

theme_10.png

左メニューに変更したホームページ

※テンプレートファイルの設定変更をすぐに反映させるには「互換モジュール」の「全般設定」の「themes/ ディレクトリからの自動アップデートを有効にする」項目で「はい」を選択しておく必要があります。

XOOPS Cubeのデザイン変更は各CSSファイルの設定を変更するだけでもかなりのカスタマイズが可能です。

各CSSファイルをじっくり分析することをおすすめします。

全体のデザインに関係するCSSはlayout.cssファイルです。

ヘッダー部の変更

bodyのbackground設定をコメントアウトします。

※CSSのコメントアウトはコメントアウトしたい部分を /* と */ で囲みます。

body {

/* background: #fff url(images/bg_page.jpg) top left repeat-x; */

color: #323D56;

font-size: 13px;

font-family:Trebuchet MS, Helvetia, Tahoma, Verdana, Arial, sans-serif;

}

DIVのid headerの設定を少し変更します。(以下のコード参照)

高さを180pxにして背景色を設定

#header {

width: 100%;

height:180px;

background-color:#666666;

}

ヘッダーサーチエリア(クラスheadersearch)の背景をコメントアウトします。(以下のコード参照)

.headersearch {

float:right;

height:44px;

width:370px;

margin: 25px 0px 0px 0px;

/* background:url(images/bg_form_header.gif) no-repeat; */

text-align:center;

}

theme_11.png

変更後のヘッダー部

このようにCSSを変更するだけである程度のデザインはカスタマイズできます。

大幅にレイアウトを変更したいときはtheme.htmlを自分でDIVを使ってレイアウトし、その中にXOOPS の表示ブロック単位ごとレイアウトすると完全にカスタマイズしたテーマを作成できます。

theme_12.png

変更後の一例

変更したCSSのリスト

layout.css

body {

/*background: #fff url(images/bg_page.jpg) top left repeat-x;*/

color: #323D56;

font-size: 13px;

font-family:Trebuchet MS, Helvetia, Tahoma, Verdana, Arial, sans-serif;

background-color:#333;

}

背景画像の削除と背景色の追加

#layout {

width: 970px;

margin: 0px auto;

text-align: left;

background-color:#fff;

}

背景色の追加

#header {

width: 100%;

height:180px;

background-image: url(images/head_back.png);

}

背景イメージの追加(自分で用意した画像が必要です)

style-leftcolumn.css

#side{

float:left;

position:relative;

width: 245px;

text-align:center;

background-color: #79A6D3;

padding:5px;

}

背景色とパディングの追加

#main2columns{

width:auto;

float: right;

display:inline;

position: relative;

padding:5px;

}

幅の変更とパディングの追加

menu_blocks.css

.leftblockTitle, .rightblockTitle{

color: #344587;

font-size: 1.3em;

margin: 0;

padding: 5px 0px 5px 15px;

border-bottom:1px solid #E2E2FC;

/*background:url(images/bg_blocktitle.gif) repeat-x;*/

}

背景画像の削除

.leftblockContent, .rightblockContent{

margin: 0;

padding: 5px 0px 5px 15px;

line-height: 1.5em;

border:1px solid #E4E4FF;

/*background:url(images/bg_blockcontent.gif) top left repeat-x;*/

}

背景画像の削除

各モジュールごとに同じようなテンプレートがあり、そのテンプレートを変更することでモジュール個別のデザイン変更ができるようになっています。

モジュールのテンプレートを変更するには、「モジュールメニュー」の「互換レンダーシステム」の「テンプレート管理」で行います。

theme_13.png

モジュールのテンプレートを変更する場合はコピーを作って、そのコピーを編集するようにします。

モジュールのテンプレートの変更は各モジュールごと、多岐にわたっているので、それぞれ探して変更します。

テンプレートのコピー

右側にある「複製」ボタンをクリックします。

theme_14.png

重複しない名前を付けて「複製」ボタンをクリックします。

テンプレートセットが複製されますので、新しく作成されたテンプレートセットの右側にある「選択」ボタンをクリックします。

theme_15.png

テンプレートセットが複製されるので、新しく作成されたテンプレートセットの右側にある「選択」ボタンをクリックし、カスタマイズは複製したテンプレートを利用します。

複製したテンプレートに切り替わって背景色が変更したことを確認します。

theme_16.png

テンプレート変更後の画面

ページに表示されるメニュー表示の文字を変更する

「メインメニュー」の表示中で「ホーム」はモジュールやブロックの設定で変更できない文字列となっています。

これはあらかじめモジュールが文字列変数として提供しているからです。

それぞれのモジュールは複数言語の文字セットを提供しています。

ここでは「ホーム」を「Top」に変更してみます。

theme_17.png

各ブロックのモジュールは「ブロックの管理」画面で確認できます。

「メインメニュー」ブロックは「互換モジュール」が提供しているブロックです。

theme_18.png

「互換モジュール」のフォルダ名は「モジュールの管理」画面の「インフォメーションボタン」をクリックすることで確認できます。

theme_19.png

「インフォメーション」画面でフォルダ名を確認します。

フォルダ名は「legacy」となっています。

theme_20.png

実際には「XOOPSルート/modules/legacy」になります。

ローカルディスクの「xampp/htdocs」内の「html/modules/legacy」内を確認します。

theme_21.png

この中にある「language」フォルダが言語セットのフォルダです。

中を開くと複数の言語セットを確認できます。

theme_22.png

現在の文字コード設定は「UTF-8」ですので「ja_utf8」フォルダの中が使用されています。

「ja_utf8」フォルダを開きます。

theme_23.png

この中の「blocks.php」をテキストエディターで開きます。

theme_24.png

ファイルの中で文字変数セットの値が確認できます。

この文字変数の中の「ホーム」を「Top」に変更します。

変更が終わったら保存します。

変更後、ブラウザで確認します。

theme_25.png

「メインメニュー」の「ホーム」が「Top」に変わっていることを確認します。

このようにモジュールに添付されている言語ファイルを変更することにより画面上での表示文字を変更することができます。

モジュールのテンプレートを編集する

例として「マイブログ(d3blog)」のデザインを修正します。

theme_26.png

書き込みタイトルの左側の罫線を削除してみます。

最初に、どこに設定されているのか調べる必要があります

表示されているページのソースを表示して調べます。

theme_27.png

ソースで確認すると対象となる「div」に「d3blogEntryHeader」クラスが設定されていることがわかります。

「マイブログ(d3blog)」モジュールのテンプレートセットから探して変更します。

theme_28.png

「モジュールメニュー」の「互換レンダーシステム」の「テンプレート管理」を開いて「default2」テンプレートセットの「マイブログ」をクリックします。

「マイブログ(d3blog)」のテンプレートセットが表示されます。

theme_29.png

ページ下部にある「d3blog_main_style.css」を編集します。

theme_30.png

画面右側の「編集」アイコンをクリックします。

theme_31.png

テンプレートの編集画面になります。

「ソース」ウインドウの中で先ほどの「d3blogEntryHeader」を探し出します。

/***------ inc_entry.html ------***/

.d3blogEntry { margin:0 0 1em; }

.d3blogEntryHeader {

clear: both;

margin-bottom: 1em;

padding: 0;

/* border-left: 5px solid #999; */

}

.d3blogEntryTitle {

margin: 0;

padding: 7px 7px 7px 7px;

/* border-left: 5px solid #999;

border-bottom: 3px solid #999;*/

}

クラスd3blogEntryHeader内の罫線の設定をコメントアウトします。

変更が終わったら下部にある「編集」ボタンをクリックします。

テンプレートセットの一覧に戻ったらページの下部にある「アップロード」ボタンをクリックします。

アップロードが終わったらホームページに戻ってマイブログを表示させてブラウザを再読み込みさせます。

theme_32.png

画像のとおり左側の罫線がなくなっていることがわかります。

このようにモジュールが提供しているテンプレートを編集すると細かい設定が可能となります。

theme_33.png

これでカスタマイズの説明は終了します。

今後はご自身で試行錯誤しながらお気に入りのサイトに仕上げていってください。

カスタマイズについては、専門に解説している書籍もありますので、そちらも参考にして学習されることをお勧めします。

これで本書の解説は終了しますが、XOOPS Cubeにはまだまだ本書では解説していない様々な機能があります。

XOOPS Cubeシステムについては、本書で解説した操作方法を基に、インターネットや他の解説書を参考にして理解を深めていってください。

XAMPPを使ったテスト環境で構築して学習するのがいちばん勉強しやすい環境かと思います。

Webサーバーのフォルダを変更していくつものXOOPS Cubeシステムを使いながら検証していくのも有効です。

XOOPS Cubeのしくみや構造なども合わせて学習されることをお勧めします。