LOGIN ID Password Auto Login Register Now! Lost Password?
XUGJ Wiki

CustomizeManual

Page Top

準備 anchor.png

Page Top

エディタについて anchor.png

最初は theme.html をいじっていきますが、編集するエティタに気をつけてください。サイトが EUC の文字コードで作られていれば EUC が編集できるエディタ。UTF で作られている場合は、UTF の編集に対応したエディタが必要です。編集している最中に文字化けなどがおこったら、まずエディタやファイル保存時の文字コードを疑ってみてください。

Page Top

テスト環境 anchor.png

ベーシックマニュアルのサーバ環境準備から「ローカルテスト環境の整備」をよく読んでください。基本的にテーマ改造などはこのローカルテスト環境で行うクセをつけた方がよいです。

Page Top

デフォルトテーマの複製 anchor.png

XOOPS Cube Legacy であれば、cube_default XOOPS2 系だったら default というフォルダのセットがあるので、まずはこれを複製して別の名前をつけてみましょう。
これでテーマをいじっている最中に、もし真っ白とかに遭遇しても、もともとあったテーマフォルダの名前を改造中のフォルダの名前に変えるなどすれば、問題の切り分けにも役立ちますし、安全です。

加えて、XOOPS Cube Legacy用テーマの場合、フォルダ内に manifesto.ini.php という設定ファイルがあって、この中にテーマの名前が記載されているのですが、複製した方の Name="Default theme of Cube" と書かれている箇所を任意の名称に替えましょう。(例 Name="My Theme " )

これを行っておかないと、「互換モジュール > テーマ管理」で表示される一覧に 「Default theme of Cube」 が二つ並んでしまい、どちらがどちらか分からなくなってしまいます。

Page Top

XOOPS の環境設定 anchor.png

XOOPS にログインして、管理画面に入ります。
XCL だったら「互換モジュール > 全般設定」、X2 だったら、「システム管理モジュール > 一般設定 > 編集」に入ります。
デフォルトテーマを複製したあとであれば、「デフォルト・サイトテーマ」や「選択可能なテーマ」に、追加したフォルダ名が追加されていると思います(追加されてなければ、もう一度複製作業を確認してください)。
これからいじるテーマを「デフォルト・サイトテーマ」にして、「themes/ ディレクトリからの自動アップデートを有効にする」を「はい」にしておいてください。
これで編集準備完了です。

Page Top

開始 - 変更の反映のされ方に慣れてみる anchor.png

Page Top

文字を足してみる anchor.png

theme.html をテキストエディタで開くと、div やら table やらが並んでいると思います。まずはどこでもいいので、何か文字を──「X」などと入れて保存してみましょう。
#ポイントは「加える」動作からはじめてみることです。「削る」のは、慣れてきてからにしましょう。
ブラウザでページをリロードすると、追加した X が、表示されたでしょうか? これがとにかく最初の一歩です。

Page Top

画像を足してみる anchor.png

文字を表示できるということは、画像も表示できるということです。
テーマディレクトリに画像ファイルを置いて、<img>タグで呼び出してみてください。多分最初はこんな表記になると思います。

<img src="YOURHOST/themes/YOURTHEME/sample.jpg" alt="" />

YOUR...の部分や画像ファイル名は適宜入れ替えてください。
デフォルトテーマでは左上に表示されているロゴマークを変えてみるのも楽しいかと思います。

Page Top

ロゴ画像を変更してみる anchor.png

デフォルトテーマの見た目を変更するなら、ロゴとして使われている画像や背景画像などの変更を行うのがとても簡単。 テーマフォルダの下に images というフォルダがあり、そこにテーマで使われている各種画像が納められています。

とっかかりとしては、ロゴを変更するのが一番簡単でしょう。 cube_default の場合、ロゴ画像は logo.gif という 200×100px のGIF画像が使われています。 この画像を自分のサイト名などを入れたオリジナル画像に替えると、それだけで自分用のテーマになった気分になります。

同じサイズ( 200×100px )で同じファイル名の画像なら、どこも書き換えることなく見た目の変更が可能です。

もし、違うファイル名なら、36行目にある

<td class="headerlogo"><a href="<{$xoops_url}>/"><img src="<{$xoops_imageurl}>images/logo.gif" width="200" height="100" alt="<{$xoops_sitename}>" title="<{$xoops_sitename}>" /></a></td>

の logo.gif という名称を書き換えてください。もちろん、JPGファイルやPNGファイルも使えます。

その他、base.gif や cube.gif 、poweredby.gif をオリジナルのものに変えると、ガラッと雰囲気を変えることができます。 コツというほどではありませんが、最初のうちは元のファイルと同じ大きさで、同じファイル名にしておくと簡単です。 もし違うファイル名の画像を使うなら、style.css の中に記述されている該当部分のファイル名を変更してください。

Page Top

消してはいけないもの - Smarty変数 anchor.png

いろいろと足せることが分かったら、こんどは削ってみましょう。
基本的に html のタグは消したところでそれほど致命傷になることは少ないでしょう。ただ、山括弧(<>)とブレース({})に囲まれた要素── Smarty 変数には気をつけてください。「$を忘れた」「括弧が不完全だった」というだけで真っ白になり得ます。

Page Top
Smarty 変数/書式の例 anchor.png
<{$xoops_url}>
<{foreach .....}>

しかし真っ白になったところで、ローカルのテキストエディタでいじっている分には、Undo を繰り返せばよいだけでそれほど恐れる必要はありません。
しっちゃかめっちゃかにしても、複製したファイルをいじっている分には、フォルダの名前をちょっと戻してやれば、すぐに元に戻ることができます。
慣れてきたら、Smarty 変数も消したりしてみましょう。XOOPS の中で、どの変数がどんな仕事をしているかが分かってくるはずです。
ただし条件分岐文には気をつけてください。<{if ...}>...<{/if}>というようなつがいになっているものがその代表格ですが、このペアはきちんと相方がいないと、たいがい真っ白をかえしてきます。ここを消すときは、つがいで消すようにしてください。

Page Top

調子に乗ってみる anchor.png

あとはどんどんのめり込んでいってください。
CSS をいじるのも table をとりさって div に置き換えるのも自由自在です :-D


トップ   凍結 差分 バックアップ 複製 名前変更 リロード印刷に適した表示   ページ新規作成 全ページ一覧 単語検索 最新ページの一覧   ヘルプ   最新ページのRSS 1.0 最新ページのRSS 2.0 最新ページのRSS Atom Powered by xpWiki
Counter: 8697, today: 1, yesterday: 1
初版日時: 2007-06-06 (水) 20:32:41
最終更新: 2014-01-13 (月) 22:06:01 (JST) (1405d) by fabi
Back to Page Top
MainMenu
Manuals
Search
XOOPS Official & Dev.
XOOPS Communities