提供: GeeklogJpWiki

［３］管理方法 > 管理者が導入後すぐ試せる簡単カスタマイズ > テーマをカスタマイズする > 話題ごとに異なるデザイン

目次 1 話題ごとに異なるデザイン 1.1 変数の活用事例 1.1.1 1.スタイルでデザインを変更 1.1.1.1 背景を変更する 1.1.1.2 ロゴを変更する 1.1.2 2.トップページのみヘッダコンテンツを表示する方法

話題ごとに異なるデザイン

ページによって異なる変数値をヘッダ用テンプレートファイルに引き渡します。これにより、トップページだけのデザイン、話題別のデザイン、ログイン前用のデザイン、ログイン後用のデザインのデザインを分けることができます。

この機能を使うためには、あらかじめ、後述のテンプレート変数を設定するカスタム関数CUSTOM_templatesetvars()を組み込む必要があります。

• ［３］管理方法 > 管理者が導入後すぐ試せる簡単カスタマイズ > カスタム関数を自由に記述する > テンプレート変数設定

CUSTOM_templatesetvars()で設定されるテーマ変数：

変数 {topic_id}
 変数の値: 話題ID

変数 {login_status}
 変数の値:
  guest:ログイン前
  member:ログイン後

変数 {home_id}
 変数の値:
  home:ホームページ
  sub:サブページ

これにより、トップページだけに表示したいコンテンツをヘッダに置くなど、見栄えを変更することができます。また、話題ごとにヘッダのロゴや背景、記事のスタイルを変えること等ができます。また、ログイン状態によってデザインを変更できます。

変数の活用事例

1.スタイルでデザインを変更

ページ全体を、以下のタグで囲みます。 つまり、header.thtmlのbodyタグの直後に、

<div id={topic_id}>

footer.thtmlのbody閉じタグの直前には

</div>

を入れます。

スタイルシートに話題別のスタイルをファイル（custom.css）に設定しておくことで話題ごとに自由にデザインを変更できます。 たとえば、以下のように設定しておくと、話題別にヘッダのロゴと背景を変更できます。

背景を変更する

話題IDtopic01,topic02がある場合、それぞれにスタイルを以下のように指定します。

たとえば次のように、スタイルをcustom.cssに追加します。

  #topic01 #header {
    background-image: url(images/custom/bg_header01.jpg);
  }
  #topic02 #header {
    background-image: url(images/custom/bg_header02.jpg);
  }

ロゴを変更する

header.thtmlで、ロゴのファイル名に話題IDを追加します。例えば次のように変更します。

  <img src="{layout_url}/images/custom/logo_{topic_id}.gif" alt="{site_name}" />

この場合、ロゴをかならず話題IDごとにすべて作成しておく必要があります。

例）
logo_.gif         …話題ページ以外で利用するロゴ
logo_topic01.gif　…話題ID topic01 で利用するロゴ
logo_topic02.gif　…話題ID topic02 で利用するロゴ

2.トップページのみヘッダコンテンツを表示する方法

ログイン前またはログイン後のトップページにのみコンテンツを記述する場合には、以下のように記述します。

<script language="JavaScript">
	if("{home_id}" == "home"){
	document.write("ここにHTMLを記述")
	} 
</script>