XOOPSのテーマは、CMS Theme Finderに収録されているだけでも200〜300あります。これだけあれば、他のサイトと自分のテーマがカブることは無さそうです。ところが、人気テーマというのは決まっていて、自分が「カッコイイ！」と思うテーマは、大抵探すと他のサイトで使われています。

せっかく作る自分のサイト。デザインは他のサイトと差を付けたいですよね。なら、テーマを独自に作っちゃえばいいんです！デザインスキルが無いですって？この記事を書いているsuinはプログラマですし、フォトショップもイラレも持ってません。なので、ご心配なく！
今回は、デザインをせずにXOOPSの自分だけのテーマを作れる方法を紹介します。

デザインをせずに自分のテーマを作るとはどういうことでしょうか？ウェブ上にはXOOPS用のテンプレートではなく、単にHTMLとスタイルシートだけで作られている汎用的なテーマが公開されています。それらはCSSテンプレートと呼ばれます。その数は、数えきれないほど沢山あります。その中から1つピックアップして、XOOPSのテンプレートにするということです。膨大なデザインの中で、しかもXOOPSのテンプレートになっていないもの、ということになるので、他のサイトとカブることはほとんど無いでしょう。

なお、この投稿は XOOPS Themes and Templates Advent Calendar 2012 の最終日のものです。前日のアドベントカレンダーは、marineさんのプレゼント企画新テーマを題材にした「テーマ作成事例」でした。この投稿とも関連性が高いので是非御覧ください。

0. 事前条件

0.1 必要になる知識

デザインセンスは必要ないですが、HTMLの知識が必須になります。Smartyタグの知識があるともっといいですが、<{...}> で囲まれた部分はおまじないだと思って取り組んでいただいても構いません。

0.2 必要になるツール

テキストエディタが必要です。Windowsであれば、さくらエディタ、秀丸エディタ、EmEditorなど。Macであれば、CotEditor、Coda、TextMate、Sublime Text2などをお使い下さい。IBMホームページビルダーやDreamWeaverは、Smartyタグが解釈できない場合があるのでおすすめしません。

0.3 XOOPSの設定

管理者でログインし、「互換モジュール > 全般設定」の「themes/ ディレクトリからの自動アップデートを有効にする」を「はい」にしておいてください。ここを「はい」にしておかないと、テーマを編集しても反映されないので注意して下さい。また、「互換モジュール > ブロックのインストール」で「テーマ選択」ブロックをインストールしておいてください。

テーマ作成の流れ

オシャレなCSSテンプレートを探す
インストールしてみる
画像やCSSへのリンクを書き換える
タグを編集する
ヘッダーを作りこむ
コンテンツタグを埋め込む
ブロックを埋め込む

1. オシャレなCSSテンプレートを探す

1.1 無料CSSテンプレートを探そう

はじめに、自分のサイトに合いそうなCSSテンプレートを探します。私はデザインセンスもないですが、お金もないので無料のCSSテンプレートが欲しいところです。そこで、無料のCSSテンプレートを大量に配布している以下のサイトから物色します。

上記以外にも「CSS template」や「HTMLテンプレート」などでググると、CSSテンプレートが沢山見つかります。上記サイトで、見合うものが見つからなければ、もっと探してみてください :)

1.2 3カラムレイアウトがXOOPSテーマに向いている

CSSテンプレートであれば、どんなテンプレートでもXOOPSのテーマにすることができます。しかし、XOOPSテーマに向いているデザインとそうでないものがあります。ずばり、向いているデザインは、3カラムレイアウトです。3カラムレイアウトとは、左カラム・中央カラム・右カラムの3列でできているレイアウトです。

3カラムレイアウトの例

3カラムレイアウトは、XOOPSのブロックと相性がいいです。CSSテンプレートも３カラムのものが見つかればベストですが、2~5カラムでも問題ありません。2カラムでは、左ブロックか右ブロックを使わないようにすれば良く、5カラムでは、左ブロック・中央左ブロック・中央中央ブロック・中央右ブロック・右ブロックのように平たく並べればいいからです。

1.2 CSSテンプレートをダウンロードする

私は officememo というテンプレートを使ってXOOPSテーマを作ることに決めました。どのCSSテンプレートでXOOPSテーマを作るか決まったら、そのCSSテンプレートをダウンロードします。上記のサイトであればダウンロードボタンからzipファイルを入手できます。

入手したCSSテンプレート: officememo

2. インストールしてみる

CSSテンプレートを入手したら、zipファイルを解凍し、そのフォルダを XOOPS の themes フォルダに置きます。CSSテンプレートにもよりますが、大抵の場合 index.html が入っているはずです。これが、XOOPSテンプレートの種になります。この index.html をコピーして theme.html にします。theme.html があるとXOOPSが、XOOPSのテーマとして認識してくれるようになります。

officememoに同梱されていたファイル

管理者でログインし、「互換モジュール」の「テーマの管理」を開いてみて下さい。そこに、自分が追加したCSSテンプレートがあれば、インストールできる状態です。そしたら、「操作」のチェックボックスにチェックを入れて「送信」ボタンを押してます。すると、表画面の「テーマ選択」ブロックに、そのテーマが選択肢の1つになっているはずです。

さあ、「テーマ選択」ブロックでCSSテンプレートに切り替えてみましょう。

何もデザインが適用されていない、文字だけの画面が出れば成功です！これをベースに、XOOPSでスタイルシートを呼び出す記述を追加したり、XOOPSのコンテンツを表示する記述を追加していきます。

3. 画像やCSSへのリンクを書き換える

真っ白で文字だけの画面ではちょっとさびしいので、まずはCSSテンプレート本来のスタイルが効くように修正しましょう。先ほどコピーして作った theme.html をエディタで開きます。

開いたら、HTMLの中にスタイルシートにリンクしている<link>タグを探します。<head>から</head>の中にあるはずです。.css でひと通り検索してみるといいでしょう。見つけたら href のURLに <{$xoops_imageurl}> を付け加えます。ページを再読み込みしてみると、スタイルが適用されていると思います。

修正前

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

修正後

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

<{$xoops_imageurl}>は theme.thml がある場所のURLに自動で置き換わります。<img> タグや <script> タグで画像やスクリプトにリンクしているものがあれば同様に置き換えます。

修正前

<div id="banner">
    <img src="images/img04.jpg" width="1000" height="350" alt="" />
</div>

修正後

<div id="banner">
    <img src="<{$xoops_imageurl}>images/img04.jpg" width="1000" height="350" alt="" />
</div>

4. <head>タグを編集する

4.1 <title>タグを置き換える

ページのタイトルをCSSテンプレートのものから、XOOPSのものに変更します。

修正前

<title>Officememo by FCT</title>

修正後

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

4.2 メタタグを置き換える

<meta>の keywords と description を置き換えます。

修正前

<meta name="keywords" content="" />
<meta name="description" content="" />

修正後

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

以上で <head> タグの編集は完了です。

5. ヘッダーを作りこむ

ヘッダーを作りこみます。CSSテンプレートにもよりますがヘッダーには、グローバルメニューやサイトタイトルがあります。これらのヘッダ要素をXOOPSで設定したサイト名などを表示できるようにしていきましょう。

5.1 サイトタイトルを表示する

XOOPSのサイト名は <{$xoops_sitename}> で表示することができます。CSSテンプレートでサイト名を出しているHTMLを探して、 <{$xoops_sitename}> に置き換えます。

修正前

    <div id="header">
        <div id="logo">
            <h1><a href="#">Office <span>Memo</span></a></h1>
            <p>Template design by <a href="http://www.freecsstemplates.org">FCT</a></p>
        </div>
    </div>

修正後

    <div id="header">
        <div id="logo">
            <h1><a href="#"><{$xoops_sitename}></a></h1>
            <p>Template design by <a href="http://www.freecsstemplates.org">FCT</a></p>
        </div>
    </div>

5.2 サイト説明を表示する

サイトの説明文は <{$xoops_slogan}> で表示します。

修正前

    <div id="header">
        <div id="logo">
            <h1><a href="#"><{$xoops_sitename}></a></h1>
            <p>Template design by <a href="http://www.freecsstemplates.org">FCT</a></p>
        </div>
    </div>

修正後

    <div id="header">
        <div id="logo">
            <h1><a href="#"><{$xoops_sitename}></a></h1>
            <p><{$xoops_slogan}></p>
        </div>
    </div>

5.3 グローバルメニューを調整する

グローバルメニューを調整します。<{$xoops_url}> にXOOPSトップページのURLが入っているので、モジュールのトップなどへのリンクに変えていきます。

修正前

    <div id="menu">
        <ul>
            <li class="current_page_item"><a href="#">Homepage</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Links</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

修正後

    <div id="menu">
        <ul>
            <li class="current_page_item"><a href="<{$xoops_url}>">Homepage</a></li>
            <li><a href="<{$xoops_url}>/modules/wordpress/">Blog</a></li>
            <li><a href="<{$xoops_url}>/modules/myalbum/">Photos</a></li>
            <li><a href="<{$xoops_url}>/modules/pico/">About</a></li>
            <li><a href="<{$xoops_url}>/modules/mylinks/">Links</a></li>
            <li><a href="<{$xoops_url}>/modules/mailform/">Contact</a></li>
        </ul>
    </div>

6. コンテンツタグを埋め込む

次に、コンテンツ部分を作ります。コンテンツは <{$xoops_contents}> タグを配置するだけで表示できます。CSSテンプレートは通常、ダミーコンテンツが入っていますので、ダミーコンテンツのHTMLを消してから、<{$xoops_contents}> で置き換えます。

修正後

<div id="wrapper">
    <!-- end #header -->
    <div id="page">
        <div id="page-bgtop">
            <div id="page-bgbtm">
                <div id="content">
                    <{$xoops_contents}>
                    <div style="clear: both;">&nbsp;</div>
                </div>

このように <{$xoops_contents}> を配置すると XOOPS のコンテンツが表示できるようになります。

7. ブロックを埋め込む

最後にブロックを構成します。XOOPSのブロックは、左・中央左・中央中央・中央右・右の5つの位置に対応しています。CSSテンプレートによっては、左ブロックしかないテンプレートがありますので、そのようなときは左ブロックだけ表示できるようにしておけば十分でしょう。

ブロックの場合も、コンテンツと同じくCSSテンプレートにはダミーコンテンツが入っていますので、XOOPSテーマ化に当たってこれらのダミーコンテンツを置き換えることになります。例えば、下のHTMLは officememo テーマに書かれていたものです。

ダミーHTML

                <div id="sidebar">
                    <ul>
                        <li>
                            <h2>Searh Here:</h2>
                            <div id="search" >
                                <form method="get" action="#">
                                    <div>
                                        <input type="text" name="s" id="search-text" value="" />
                                        <input type="submit" id="search-submit" value="" />
                                    </div>
                                </form>
                            </div>
                            <div style="clear: both;">&nbsp;</div>
                        </li>
                        <li>
                            <h2>Aliquam tempus</h2>
                            <p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper consectetuer hendrerit.</p>
                        </li>
                        <li>
                            <h2>Categories</h2>
                            <ul>
                                <li><a href="#">Aliquam libero</a></li>
                                <li><a href="#">Consectetuer adipiscing elit</a></li>
                                <li><a href="#">Metus aliquam pellentesque</a></li>
                                <li><a href="#">Suspendisse iaculis mauris</a></li>
                                <li><a href="#">Urnanet non molestie semper</a></li>
                                <li><a href="#">Proin gravida orci porttitor</a></li>
                            </ul>
                        </li>
                        <li>
                            <h2>Blogroll</h2>
                            <ul>
                                <li><a href="#">Aliquam libero</a></li>
                                <li><a href="#">Consectetuer adipiscing elit</a></li>
                                <li><a href="#">Metus aliquam pellentesque</a></li>
                                <li><a href="#">Suspendisse iaculis mauris</a></li>
                                <li><a href="#">Urnanet non molestie semper</a></li>
                                <li><a href="#">Proin gravida orci porttitor</a></li>
                            </ul>
                        </li>
                        <li>
                            <h2>Archives</h2>
                            <ul>
                                <li><a href="#">Aliquam libero</a></li>
                                <li><a href="#">Consectetuer adipiscing elit</a></li>
                                <li><a href="#">Metus aliquam pellentesque</a></li>
                                <li><a href="#">Suspendisse iaculis mauris</a></li>
                                <li><a href="#">Urnanet non molestie semper</a></li>
                                <li><a href="#">Proin gravida orci porttitor</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- end #sidebar -->

このHTMLの中でブロックを作るに当たって、最低限必要になるHTMLは下記だけになるのでそれ以外の部分は消してしまいます。この残った部分に、ブロック表示用のタグを追加していきます。

最低限のHTML

                <div id="sidebar">
                    <ul>
                        <li>
                            <h2>Aliquam tempus</h2>
                            <p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper consectetuer hendrerit.</p>
                        </li>
                    </ul>
                </div>
                <!-- end #sidebar -->

ブロックを表示するために、ブロックタイトルタグとブロックコンテンツタグを加えます。

ブロックタイトルタグ: <{$block.title}>
ブロックコンテンツタグ: <{$block.content}>

これに加えて、ブロックを複数表示するために、繰り返しタグを加えます。

繰り返しタグ: <{foreach item=block from=$xoops_lblocks}>…<{/foreach}>

この3つを使って先ほどのHTMLを書き換えます。まず、ブロックタイトルタグを埋め込みます:

ブロックタイトルタグを埋め込んだ状態

                <div id="sidebar">
                    <ul>
                        <li>
                            <h2><{$block.title}></h2>
                            <p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper consectetuer hendrerit.</p>
                        </li>
                    </ul>
                </div>
                <!-- end #sidebar -->

次に、ブロックコンテンツタグを埋め込みます:

ブロックコンテンツタグを埋め込んだ状態

                <div id="sidebar">
                    <ul>
                        <li>
                            <h2><{$block.title}></h2>
                            <p><{$block.content}></p>
                        </li>
                    </ul>
                </div>
                <!-- end #sidebar -->

最後に、繰り返しタグを埋め込みます:

繰り返しタグを埋め込んだ状態

                <div id="sidebar">
                    <ul>
                        <{foreach item=block from=$xoops_lblocks}>
                        <li>
                            <h2><{$block.title}></h2>
                            <p><{$block.content}></p>
                        </li>
                        <{/foreach}>
                    </ul>
                </div>
                <!-- end #sidebar -->

これでブロックがブロックが表示できるようになったことでしょう。

なお、今埋め込んだ繰り返しタグはXOOPSの「左ブロック」です。XOOPSの「右ブロック」も左ブロックとして表示したければ、繰り返しタグの <{foreach item=block from=$xoops_rblocks}> を追加することになります。

「右ブロック」を左ブロックの下に埋め込んだ状態

                <div id="sidebar">
                    <ul>
                        <{foreach item=block from=$xoops_lblocks}>
                        <li>
                            <h2><{$block.title}></h2>
                            <p><{$block.content}></p>
                        </li>
                        <{/foreach}>

                        <{foreach item=block from=$xoops_rblocks}>
                        <li>
                            <h2><{$block.title}></h2>
                            <p><{$block.content}></p>
                        </li>
                        <{/foreach}>
                    </ul>
                </div>
                <!-- end #sidebar -->

他にも、中央左ブロックなども繰り返しタグをちょっと変えるだけで対応できます。

中央左: <{foreach item=block from=$xoops_clblocks}>
中央中央: <{foreach item=block from=$xoops_ccblocks}>
中央右: <{foreach item=block from=$xoops_crblocks}>

8. おわり

以上、デザインセンスが無くても自分だけのXOOPSテーマを作る方法を解説しました。このように、無料のCSSテンプレートを探してきて、XOOPS用にカスタマイズすれば「ほぼオリジナル」なテーマを作ることができます。HTMLの知識が必須になりますが、高いデザイナ向けツールなどは必要ありません。ぜひ、この機会にあなたのXOOPSサイトもオリジナリティに富んだデザインにリニューアルしてみてはいかがでしょうか？

デザインセンス無しで作る！自分だけのXOOPSテーマ