準備

<script src="<{$xoops_url}>/common/lib/jquery.js" type="text/javascript"></script>

<script src="<{$xoops_url}>/common/lib/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
ここにこれからでてくるコードを書いていきます
</script>
<{* jgrowl *}>

サイドカラムをスクロールに追従させる

$(function() {
    var el = $("#lblock1");
    var offset = el.offset();
    var topPadding = 15;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top) {
            el.stop().animate({
                marginTop: $(window).scrollTop() - offset.top + topPadding
            });
        } else {
            el.stop().animate({ marginTop: 0 });
        }
    });
});

メニューを開閉できるようにする

$(document).ready(function() {
    var el = $(".BlockTitle");
    el.hover(function(){
        $(this).css("cursor","pointer");
    },function(){
        $(this).css("cursor","default");
    });

    el.click(function(){
        $(this).next().children("ul").slideToggle("slow");
    });
});

var el = $("div[class$=blockTitle]");

超重要事項

こんにちわ。なおとです。

今日はテーマについて取り上げてみようと思います。 ホダ塾ディストリビューション標準の、「hd_default」テーマを題材に使います。

それも「どこを変えるとこうなる」という紹介から一歩進んで、テーマに少し手を加える手順を、手がかりを掴んでから実際に修正するまでの流れを追って書いてみます。 今回の目標は、ブロックのタイトル部分の背景色を変えるという簡単な内容です。 これを参考にしながら、ここでは紹介しなかったさまざまなカスタマイズを、楽しむきっかけとなれれば幸いです。

Smarty Debug Consoleから始める

まずは手がかりを見つけるための、情報収集から始めます。 管理者メニューの互換モジュール、全般設定を開いてみます。

※クリックで拡大

さまざまな項目があります。その中のひとつに、「デバッグモードを有効にする」というものがあります。(真ん中あたり) ここの設定を変えます。 プルダウンでいくつか選ぶことができますが、ここを「Smatryテンプレート・デバグ」にします。

あとでここを元に戻しますので、この場所は覚えておいてください。 デバッグとデバグというように表現が違いますが、これは単に表記の揺れなので気にしないでください。

順番が前後しますが、同画面の上のほうにある、「themes/ ディレクトリからの自動アップデートを有効にする」は、「はい」にしておいてください。

選んだら画面一番下の「送信」ボタンを押します。

これで準備ができたので、ホームページに戻ってください。

すると、ポップアップで表示されるウインドウが出てくると思います。 もし出てこないようであれば、ブラウザの設定でポップアップをブロックしていないか確認して、解除してください。

こんなウインドウが出てくるはずです。

※クリックで拡大

ここには、テーマやテンプレートで使える、「テンプレート変数」の情報が詰まっています。 順に見ていくと「$hd_season」と言うものを見付けました。

これは、テーマにhd_defaultを使っているときだけに利用できる、「テンプレート変数」です。

このように、面白そうな文字列や使えそうな数字がないか探すのです。

見ると内容は、把握できるかと思いますが、季節と年、月、日などの情報が割り当てられているようです。

テンプレート変数の内容をメモしたら、再び全般設定に戻って、デバッグモードの設定を「オフ」に戻しておきましょう。

テーマのなかで、使ってみる

$hd_seasonを使って、季節毎にブロックのタイトル部分の背景色を変えてみましょう。

「themes/hd_default/theme.html」ファイルを編集します。 ファイルを見付けて、エディターで開いてください。 50行目かその前後に、head要素の閉じタグがあります。 その直前に書き加えましょう。

修正前

</head>

修正後

<style type="text/css">
div#LeftColumn h2.BlockTitle, div#RightColumn h2.BlockTitle {
<{if $hd_season.season=="spring"}>
background:#fcf;
<{elseif $hd_season.season=="summer"}>
background:#cff;
<{elseif $hd_season.season=="winter"}>
background:#ffc;
<{/if}>
}
</style>
</head>

今回色の指定は余り考えずに書いています。 気に入るいろを決めて、上記にある「background:#cff;」部分の指定を工夫してみてください。

編集した「theme.html」は、保存した上で元の位置に上書きアップロードします。 その状態でホームページを見てみましょう。

このように、ブロックのタイトル部分に色が付きました。

• iPhone対応（argon）
• WebPhotoモジュールの紹介（ohwada氏）
• モジュール開発の話
• 上海の購買事情（ayumi氏）

デザイナーじゃなくても出来る テーマカスタマイズについて (fabi氏)

イベント案内モジュールを作る 〜中の人のつぶやき〜 (nobu氏)

技術者じゃなくても出来る プロジェクトへの関わり方 (minahito氏)

ちなみに

こんにちわ。なおとです。

私はこのブログに一昨年、NONEモジュールの言語ファイル対応版というものを書きました。 それ以来NONEモジュールにはまっています。

そのことはスタッフ紹介の私のページでも続いていて、そこで触れた、作り直したバージョンをまた公開しています。

ダウンロード none テンプレートを強化したNONEモジュール

今日は、それを使ったサンプルを紹介したいと思います。

新しいnoneモジュールにはブロックが追加されていて、それはほぼカスタムブロックと同じように使えます。 そして、それを使ってブログツール「ＮＨＫ時計」を表示するようにしました。 画像の中の左上に見えるのが、それです。（画像をクリックすると拡大）

なお右半分のモジュール部分に見えているのは、うさできの「Xoops Cube Legacy 2.1系 共通のテンプレート変数 」と同じ内容です。

テンプレートを強化したNONEモジュールをインストールすれば、あなたのXOOPSサイトでも表示できますよ！ というより、うさできでもこれと同じモジュールを使っているのです。

実は他にも、弊社でお仕事させていただいたサイトにも複数インストール済みで、実績もばっちりです！ もし気になったなら、ぜひお試しください。

他の特徴

• Xoops Cube Legacy 2.1.xシリーズ対応
• ホダ塾ディストリビューション 1.0.xシリーズ対応
• altsysモジュール必須 バージョン0.7以降推奨
• d3forum コメント統合対応 テンプレートを編集することにより、複数のトピックを使えます
• サイト内検索対応 searchモジュールの本文表示に対応
• 「予備」のテンプレートを9コ用意しています
• 一般設定に、自由に使える設定項目が3種9項目あります

インストール

「XOOPS_TRUST_PATH」を利用するということに気をつければ、他の一般的なインストール方法と変りません。 公開側（htmlもしくはhtdocs、public_html）のmodulesと、XOOPS_TRUST_PATHのmodulesにそれぞれ置くものがあります。 フォルダ構造を見ながらアップロードしてください。 そのあとは管理画面の「モジュールの管理」からインストールし、必要に応じてnoneモジュールの「ブロック管理」でアクセス権限の設定もしてください。（標準ではログインした場合だけ表示する設定です。）

altsys(必須)をインストールした段階で、XOOPS_TRUST_PATHのセットアップは済んでいると思いますので、それほど難しくはないと思います。

...続きを読む