TOP>>コンテンツ>>XOOPS
XOOPS ロゴイメージ

XOOPSをリデザインする


リデザインに必要なスキル

XOOPSは、テンプレート化により手軽にリデザインができるようになっています。基本的なことは、HTMLCSSでほとんどできるようになっていますが、PHPの拡張エンジン、Smartyについての知識があれば、その幅はより広がります。

Smartyについては、こちらで日本語マニュアルを配布していますので、それを参考にして下さい。当サイトでも、Smartyを使用したXOOPSのリデザインテクニックをご紹介します。

テーマ (Theme) について

XOOPSは、基本的にテーマ(theme)というファイルによってデザインの構成が行われています。このテーマを編集することにより、XOOPSを自分オリジナルのデザインにすることができます。

テーマのファイル構成

XOOPSルート/themes/テーマフォルダ名内に、以下のファイルがあります。

XOOPSテーマ ファイル構成

style.css , styleMAC.css , styleNN.css CSSによるデザインをするファイル
各HTMLファイル 各ブロックの表示をするHTMLファイル

各ファイルを編集してリデザインを行います。この段階では、各モジュールの細かいデザインまでは変更できませんが、その方法については別で説明します。

ちょっといじってみる

テーマの準備

XOOPSの標準テーマ、defaultをいじってみましょう。

XOOPSルート/themes/内にあるdefaultフォルダをコピーし、自分の好きな名前にリネームします。ここではoriginalとリネームしたことにして説明していきます。

originalフォルダ内のtheme.htmlをテキストエディタで開き、置換機能を使って(メモ帳ならCtrl+H)置換する文字をdefault/に、置換後をoriginal/にして、置換処理を実行します。これで、すべてのブロックファイルがoriginalファイル内のブロックHTMLファイルから読み込まれるようになります。

管理者メニューから、SYSTEM ADMIN一般設定一般設定

themes/ ディレクトリからの自動アップデートを有効にするはいに、選択可能なテーマメニューで、originalを選択し、送信ボタンを押します。

テーマの選択

CSSを編集する

とりあえず、現在のTOPが以下のような感じだとします。

TOPのスクリーンショット

では、以下の部分をCSSで変えてみることにします。

左メニュー

originalテーマ内のstyle.cssと、theme_blockleft.htmlを開きます。

theme_blockleft.htm内のソース

<div class="blockTitle"><{$block.title}></div>
<div class= "blockContent"><{$block.content}></div>

タイトルがclass="blockTitle"となってますので、style.css内のblockTitleクラスを探します。

style.css内のソースの一部

td#leftcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; font-weight: bold;}

これが左のタイトル欄のCSSクラスです。以下のように変えてみます。

td#leftcolumn div.blockTitle {
padding: 3px;
background-color: #dddddd;
color: #000000;
font-weight: bold;
border-top-width: 3px;
border-bottom-width: 3px;

border-top-style: ridge;
border-bottom-style: groove;
border-top-color: #999999;
border-bottom-color: #999999;

}

書き換え後、保存したらTOPにアクセスしてみましょう。

変更後のメニュー

こんな感じになりました。下にCSSを使ったテーマのリデザイン方法をまとめます。

CSSによる編集方法
1.デザインを変えたいブロックに該当するHTMLファイルの中の、CSSスタイルを確認する。
2.style.css内の該当部分を編集する。
3.編集後のページを確認し、また1へ

HTMLブロックファイルの編集

以下のセンターブロックを変えてみます。

センターブロック画像

originalテーマ内のstyle.cssと、theme_blockcenter_c.htmlを開きます。

theme_blockcenter_c.html内のソース

<div style="padding: 5px;">
<fieldset>
<legend class="blockTitle"><{$block.title}></legend>
<div class="blockContent"><{$block.content}></div>
</fieldset>
</div>

これを以下のように変えてみます。

<div class="block">
<div class="blockTitle"><{$block.title}></div>
<div class="blockContent"><{$block.content}></div>
</div>

style.css内のソース

td#centerCcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-left: 0px;}

これを下のように変えます。

td#centerCcolumn div.blockTitle {
padding: 5px;
color: #FFFFFF;
font-weight: bold;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
border-top-width: 3px;
border-bottom-width: 3px;
border-top-style: ridge;
border-bottom-style: groove;
border-top-color: #CCCCCC;
border-bottom-color: #CCCCCC;
background-color: #333333;
}

さらに、下のクラスを加えます。

td#centerCcolumn div.block{padding: 3px;}

以上が書き換え終わったら、上書き保存してTOPにアクセスしてみます。

ブロック変更後

こんな感じになりました。下に手順をまとめます。

ブロックHTMLファイルの編集方法
1.ブロックHTMLファイルを開き、編集する。
2.style.css内の該当部分を修正、または追加する。
3.編集後のページを確認し、また1へ

Smartyを使う

タイトルの表示、非表示を制御する

Smartyの正規表現を使って、タイトルの表示、非表示を選択できるようにします。当サイトのセンターブロックでも使用してるテクニックです。

下のタイトル部分の表示、非表示を選択できるようにします。

センタータイトル

if文正規表現置換を用いて処理します。theme_blockcenter_c.htmlを開きます。

theme_blockcenter_c.html内のソース (HTMLブロックファイルの編集で変更後のもの)

<div class="block">
<div class="blockTitle"><{$block.title}></div>
<div class="blockContent"><{$block.content}></div>
</div>

これを以下のように変えます。

<div class="block">
< {if $block.title|regex_replace:"/.*none/":"none" ne "none"}>
<div class="blockTitle"><{$block.title}></div>
< {/if}>
<div class="blockContent"><{$block.content}></div>
</div>

これで、タイトルの最後尾にnoneと書けば非表示にすることができます。

管理者メニューsystem admin ブロック管理から、タイトル部分を非表示にしたいブロックの編集をクリックし、タイトルの入力欄の最後尾にnoneと書きます。

ブロック管理画面

TOPへアクセスし、確認します。

スクリーンショット

投稿数ランキングのタイトルが消えました。

タイトルに画像を使用する

これもif文と正規表現置換でおこないます。以下の部分に画像を適用できるようにします。

ユーザーメニュー変更前

theme_blockleft.htm内のソース

<div class="blockTitle"><{$block.title}></div>
<div class= "blockContent"><{$block.content}></div>

これを下のように変えます。

<{if $block.title|regex_replace:"/.*\[\[.*/":"Picture True" eq "Picture True"}>
< div class="blockTitle">
< img src="<{$block.title|regex_replace:"/.*\[\[/":""}>" alt="<{$block.title|regex_replace:"/\[\[.*/":""}>">
< /div>
< {else}>
<div class="blockTitle"><{$block.title}></div>
< {/if}>
<div class="blockContent"><{$block.content}></div>

これで、タイトル名[[画像URLを記述することにより、画像が使用できます。タイトル名はALT属性に適用されます。普通にタイトル名だけを入力した場合は、タイトル名がテキストで表示されます。

画像を準備したら、管理者メニューsystem admin ブロック管理から、タイトル部分を非表示にしたいブロックの編集をクリックし、タイトルの入力欄に、タイトル[[画像の場所を書きます。

ブロックタイトル編集

TOPにアクセスし、確認します。

メニュー変更後

ユーザメニュータイトルが画像になりました。

テンプレートについて

テーマの編集だけでは、どうしてもデザインに限界があります。しかし、テンプレートを編集することで、ほぼ全てのリデザインが可能になります。HTML+CSS+Smartyによって、ほぼ完全に自分の理想のデザインを再現できると思います。

テンプレートを編集する

具体的にテンプレートを編集する方法を解説します。編集方法には何通りかあります。

defaultテンプレートを複製して編集

管理者メニューSYSTEM ADMINテンプレートdefaultテンプレートの複製リンクへ

テンプレートセット;マネージャー画像

テンプレートセットの複製を作成する」ページへ入り新しいテンプレートセット名を入力します。ここではテンプレートセット名を「original」とつけることにします。

テンプレートセット複製ページ画像

すると、以下のように複製されたテンプレート「original」が表示されます。

originalテンプレートが追加された状態

SYSTEM ADMIN一般設定一般設定編集リンクへ行き、デフォルトのテンプレート・セットメニューでoriginalテンプレートを選択します。

テンプレート選択

テンプレートセット・マネジャーに戻ると、下のようにチェックがoriginalテンプレート方にされています。

defaultからoriginalにチェックが移動

編集したいテンプレートの一覧リンクへ飛びます。ここではニュースのテンプレートへ飛んでみます。

各テンプレートの編集方法は、テンプレートファイルの編集ページから直接修正する方法と、テンプレートファイルをダウンロードして、編集後、そのファイルをアップロードする方法とあります。ここではnews_block_top.htmlを編集ページから直接編集することにします。下の画面のマークしてあるところからテンプレートファイルの編集ページに飛びます。

テンプレート選択

下の画面で編集し、送信すれば、トップニュースブロックのデザインが修正されます。

テンプレートファイルの編集画面

defaultテンプレートをダウンロードし、まとめて編集後にアップロード

テンプレートセット・マネージャーから、defaultテンプレートをダウンロードします。

テンプレートセットをダウンロード

ダウンロードしたtar.gzファイルを解凍すると、下のような構成のファイルが現れます。

ダウンロードしたテンプレートフォルダ内

解凍してできた各ファイルを編集し、それが終わったらdefaultフォルダが一番上の階層になるようにして圧縮します。(解凍したとき、defaultフォルダが現れるように)

まぁ、Lhacaのデラックス版にdefaultフォルダを突っ込んで拡張子かえるだけなんですが。

テンプレートセットマネージャーの「テンプレートセットをアップロードする」から、圧縮したtar.gzファイルを選択し、新しいテンプレートセット名に好きな名前を入力し、アップロードします。ここではテンプレート名をoriginalとします。

テンプレートセットのアップロード

アップロード後、以下のような画面になれば登録成功です。

アップロード成功

テンプレートマネージャーに戻ると、originalテンプレートセットが作成されています。

テンプレートセットマネージャ

テンプレートセットが足りなかったとき

例えば、アップロードして登録したオリジナルのテンプレートセット「original」にダウンロードモジュールのテンプレートが入っていなかったとき、ダウンロードモジュールのテンプレートにだけdefaultテンプレートが適用されます。このとき、作成リンクから、足りないoriginalテンプレートを作成し、編集することができます。

テンプレートが足りなかったとき

一覧をすると、下のように黄色で未登録テンプレートが表示されます。

未登録テンプレート

メインメニューの各モジュールタイトルに画像を使用する

タイトルに画像を使用するでも紹介した方法で、画像を表示させてみましょう。

テンプレートセットマネージャー ⇒ originalテンプレートのシステム管理一覧 ⇒ system_block_mainmenu.html編集へ飛びます。

以下、system_block_mainmenu.htmlのソースです。

<table cellspacing="0">
<tr>
<td id="mainmenu">
<a class="menuTop" href="<{$xoops_url}>/"><{$block.lang_home}></a>
<!-- start module menu loop -->
<{foreach item=module from=$block.modules}>
<a class="menuMain" href="<{$xoops_url}>/modules/<{$module.directory}>/"><{$module.name}></a>
<{foreach item=sublink from=$module.sublinks}>
<a class="menuSub" href="<{$sublink.url}>"><{$sublink.name}></a>
<{/foreach}>
<{/foreach}>
<!-- end module menu loop -->
</td>
</tr>
</table>

これを以下のように変えます。

<table cellspacing="0">
<tr>
<td id="mainmenu">
<a class="menuTop" href="<{$xoops_url}>/"><{$block.lang_home}></a>
<!-- start module menu loop -->
<{foreach item=module from=$block.modules}>
<a class="menuMain" href="<{$xoops_url}>/modules/<{$module.directory}>/">
<{if $module.name|regex_replace:"/.*\[\[.*/":"Picture True" eq "Picture True"}>
<img src="<{$module.name|regex_replace:"/.*\[\[/":""}>" alt="<{$module.name|regex_replace:"/\[\[.*/":""}>">
<{else}>
  <{$module.name}>
<{/if}>

  </a>
<{foreach item=sublink from=$module.sublinks}>
<a class="menuSub" href="<{$sublink.url}>"><{$sublink.name}></a>
<{/foreach}>
<{/foreach}>
<!-- end module menu loop -->
</td>
</tr>
</table>

管理者メニューのモジュール管理から、モジュールの名前[[画像URLを入力します。

画像URLの入力

これで画像が表示されます。

NEWSが画像に

powered by wervival.net & xoops