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

CustomizeManual

Page Top

ブロックタイトルの画像化 anchor.png

ほとんどのXOOPS用テーマではブロックタイトルはテキスト表示になっています。これは、管理画面でブロックタイトルを変更することが出来るので、システム上テキストでないと都合が悪いのですが、これをデザインの都合で画像化したいという場合もあるでしょう。その方法はいくつかあります。

Page Top

ブロックタイトルをテーマに持たせずブロックテンプレートに持たせる。 anchor.png

汎用性を全く考えなくとも良いのであれば、この方法が一番簡単です。 theme.htmlにあるブロックタイトル部分の記述を削除してしまえば、デフォルトのブロックタイトルは表示されません。その代わりに画像をテンプレートに埋め込んでしまえば良いのです。カスタムブロックの場合は、タイプをHTMLにしてやはりそこに画像を埋め込みます。画像を置く位置は、ルートからのパスで指定すればどこにでも置けます。該当テーマ内に置きたければ$xoops_imageurlを使えば良いでしょう。 ただし、この方法の場合、同位置にあるブロックはすべて同じようになりますので、デフォルトのテキストブロックタイトルと画像タイトルを混在させることは出来ません。

Page Top

PHPを利用してブロックタイトルの表示・非表示をする anchor.png

同じ位置にある(例えば右カラム)ブロックで、ブロック毎にデフォルトのテキスト表示にしたり、画像タイトルにしたい場合、PHPを使ってタイトルの表示・非表示を切り替えることが出来ます。

有名な方法はWervive氏が「XOOPSをリデザインする」で数年前に発表した方法です。 ブロックタイトルの表示・非表示をコントロールしたい位置のブロック記述部分を次のように書き換えます。

<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(必ず半角)を付ければ、そのブロックタイトルだけ非表示になります。そこを画像化するにはやはりテンプレートに直に埋め込みます。

これはちょっと冗長ではないかと言うことでGIJOE氏が考えたのが以下のコードです。

<div class="block">
<{if ! $block.title|strstr:"none"}> //この行を加える
<div class="blockTitle"><{$block.title}></div>
<{/if}>//この行を加える
<div class="blockContent"><{$block.content}></div>
</div>

これも同様にブロックタイトル末尾にnoneを付ければ非表示になります。

Page Top

PHPを利用してブロックタイトルを画像に置き替える anchor.png

こちらはPHPロジックを利用して、タイトルのテキスト自体を直接画像のパスに置き換えてしまうと言う技です。新たに画像を埋め込むためのテンプレートの修正などの手間が無い代わりに、ブロックタイトルのテキストにかかっているスタイルシート(class="blockTitle")に影響されてしまうため、テキスト・画像共に破綻のない見栄えを作るには工夫が必要かも知れません。

これもwervive氏の案がオリジナルと思われます。

<div class="block">
<{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>
</div>

管理画面のブロックタイトルの指定欄で「タイトル[[画像のパス」を入力すればタイトル部分が画像に置き換わります。パスは$xoops_url等の変数は使えないので、サイトルート相対パスかフルパスにして下さい。例)「ニュース[[/images_block/news_blk_title.gif」

また、これに対してもGIJOE氏が代案を出しています。

ブロックタイトル部はすべて下記の記述に変更

<div class="blockTitle"><{$block.title|xoops_blocktitleimage}></div>

プラグインをclass/smarty/plugin/modifier.xoops_blocktitleimage.phpとして作成する

<?php
function smarty_modifier_xoops_blocktitleimage( $string , $width = null , $height = null )
{
	list( $title , $imgsrc ) = @explode( '[[' , $string ) ;
	if( empty( $imgsrc ) ) return $title ;
	$width_desc = isset( $width ) ? 'width="'.$width.'" ' : '' ;
	$height_desc = isset( $height ) ? 'height="'.$height.'" ' : '' ;
	return '<img src="'.XOOPS_URL.$imgsrc.'" alt="'.$title.'" '.$width_desc.$height_desc.' />' ;
}
?>

これらの技術に関するトピックは下記です。ご参考に。

http://www.xugj.org/modules/d3forum/index.php?topic_id=193

Page Top

CSSでブロックタイトルの画像化 anchor.png

単にタイトル文字を画像に置き換えるのではなく、CSSにて画像を背景として表示させた上で、タイトル文字はテキストインデントにより非表示とする方法です。 ブロックタイトルを画像にするには、テーマ内のブロックタイトルの記述を全て次の様にします。

 <{if ! $block.title|strstr:"none"}>
 <div<{if $block.title|strstr:"image"}> class="<{$block.title|regex_replace:"/<.+?>/":""}>"<{/if}>>
 <h3><{$block.title|regex_replace:"/image/":""}></h3></div>
 <{/if}>
 <div><{$block.content}></div>

または

<{if ! $block.title|strstr:"none"}>
<{if $block.title|strstr:"image"}><div class="<{$block.title|regex_replace:"/<.+?>/":""}>"><{/if}>
<h3><{$block.title|regex_replace:"/image/":""}></h3>
<{if $block.title|strstr:"image"}></div><{/if}>
<{/if}>
<div><{$block.content}></div>

上記の設定は、none技も使っており、ブロックタイトルの末尾に none がある場合は、ブロックタイトルを表示しないというのはnone技そのものですが、もうひとつブロックタイトルの末尾に image がある場合には、divにブロックタイトル名のclassを付加するというものです。

上の方のサンプルは常にdivを表示するもの、下の方は条件に合致した時にdivを表示するもので、多分どちらも同じ動作をすると思います。

あとは、cssにて次の様な記述を行います。

.welcome {
	width:60px;
	height:60px;
	background:url(images/hogehoge.jpg) no-repeat;
}
.image h3 {
	text-indent:-9999px;
	border:none;
}

そして、管理画面のブロック管理にて、画像を使いたいブロックのタイトルを次のようにします。

	welcome image

(タイトルをclass名として利用するため、日本語はだめ。半角英数とハイフン、アンダーバーに限ります。画像を使わずタイトルをそのまま表示する場合は、もちろん日本語でもOK!)

そうすると、望み通りタイトル部分が hogehoge.jpg に置き換わります。 cssで幅や高さも調整できますので、かなり自由度の高い表現が可能となるでしょう。

なお、ここではclass名として「.welcome」を単独で書きましたが、場合によっては上位要素のセレクタ名を前に書いてやらないと背景画像が上手く表示できないかもしれません。例えば、こんな感じに。

.grid09 div div.welcome {
	width:60px;
	height:60px;
	background:url(images/hogehoge.jpg);
}
Page Top

CSSでブロックタイトルの背景画像を自在にコントロールする anchor.png

ブロックタイトルの背景を画像にするには、テーマ内のブロックタイトルの記述を全て次の様にする。

<{if ! $block.title|strstr:"none"}>
<div<{if $block.title|strstr:"image01"}> class="image01"<{elseif $block.title|strstr:"image02"}> class="image02"<{elseif $block.title|strstr:"image03"}> class="image03"<{/if}>><h3><{$block.title|regex_replace="/image..$/",""}></h3></div>
<{/if}>
<div><{$block.content}></div>

cssは次のようにします。

.image01 {
	width:400px;
	height:200px;
	background:url(images/hoge01.jpg) no-repeat;
}
.image01 h3 {
	text-indent:-9999px;
	border:none;
}
.image02 {
	width:600px;
	height:30px;
	background:url(images/hoge02.jpg) no-repeat;
}
.image02 h3 {
	border:none;
}
.image03 {
	width:600px;
	height:60px;
	background:url(images/hoge03.jpg) no-repeat;
}
.image03 h3 {
	font-size:36px;
	border:none;
}

あとは、ブロック管理にて、タイトルの末尾に image01 から image03 までの記述を加える。

そうすると、image01の場合は幅400px高さ200pxの hoge01.jpg が表示されてタイトル文字は表示されない。 image02の場合は、hoge02.jpg を背景として、タイトル文字が表示される。 image03の場合は、hoge03.jpg を背景として、36pxのタイトル文字が表示されるようになります。

その他にも、ここで書かれている方法を複合的に使うことにより、色々な表現ができると思います。

Page Top

ブロック構成の改造(複雑な配置に対応させる) anchor.png

テーマを作成するに当たって、ブロックの話は避けて通れません。 xoopsでは、情報掲載はブロック単位で行っており、XCLであれば管理画面の「互換モジュール」「ブロックの管理」で表示をコントロールするようになっています。

「表示サイド」欄に「左」「中央」「右」と書かれているのが、いわゆる左カラム、センターカラム、右カラムへの表示を選択する箇所で、中央カラムについてはさらに、「中央左」「中央-中央」「中央右」と3つの選択肢があり、「中央-中央」を選ぶと中央カラムの横一杯に、「中央左」「中央右」の場合は中央カラムの横幅半分ずつ表示するというのが基本的な考え方です。

また、「並び順」欄がブロックのweight、つまり表示順とか表示の重要度の順番を決める箇所となっています。 基本的に、各表示サイドについて、数字が小さいものから順番に表示されるようになっています。

Cube_defaultなどのいわゆる3カラム表示のテーマの場合は、ブロックの管理画面で選択したとおりの表示になります。

でも、3カラムだけでは「いかにも的なデザインとなる」ことから、左側に中央カラムを配置した「大小」の2カラムや逆の「小大」の2カラムのテーマも良く見受けます。 また、中央カラムだけの「思い切った」1カラムデザインもありますが、いずれの場合も左カラムの下に右カラムのデータを表示させたり、中央カラムの下に左右カラムのデータを表示させるといった工夫により、管理画面の「表示サイド」とはちょっと異なりますが、ブロック管理で設定したブロックが表示されるように作られているものが殆どです。

さらに、ホダ塾ディストリビューションに入っているテーマ hd_default などは、「表示サイド」の設定で中央カラムしかない場合は1カラム表示、左(または右)カラムと中央カラムの場合は2カラム表示、全てのカラムが表示される設定の場合は3カラム表示するといった設定がなされていることから、利用するモジュール(ページ)に応じた柔軟な運用が可能となっています。

ちなみに、hd_defaultでは、下記のような記述により、body にclassを設定するようにされています。 つまり、ブロック管理にて左カラムを表示する設定の場合は、ShowBlockL1R0 というクラスが、右カラムの場合は ShowBlockL0R1 というクラスが、左右カラム両方が表示される場合は ShowBlockL1R1、そして左右カラムとも表示しない場合は ShowBlockL0R0 というクラスが設定されることにより、1カラムから3カラムまでの表示をコントロールしている訳です。 hd_defaultでは、さらに管理者としてログインした時のクラスやディレクトリ名によるidの設定も行うようになっており、非常に勉強になるテーマです。

<body class="ShowBlockL<{$xoops_showlblock}>R<{$xoops_showrblock}><{if $xoops_runs_admin_side}> AdminMode<{/if}>" id="<{if $xoops_dirname ne ""}><{$xoops_dirname}><{else}>home<{/if}>">

しかし、これらの工夫を行ったとしても、縦長の各カラムにweight順に表示するということには変わりはなく、特に各モジュールを表示している時など、中央カラムにはモジュールコンテンツが一番上となり、さらにその上にカスタムブロック等を表示するということができないのです。 また、横一列にブロックを4つとか5つ並べたり、3カラムの上、ヘッダとの間にカスタムブロック等を配置するというのは、通常のテーマでは出来ません。

その辺りを打開する方法のひとつが、ブロックのweight技なのです。

例えば、中央カラムに次のような表示をしたい場合の説明をしましょう。

 1 カスタムブロック  2 モジュールコンテンツ  3 カスタムブロック   (またはモジュールのブロック)

この場合、テーマで次の様な記述をするとweightを使ったコントロールが出来ます。

	<{if $xoops_showcblock == 1}><!-- ■ 中央中央ブロック判定 -->
	<div>
		<{if $xoops_ccblocks}><!-- ■ 中央中央ブロックの場合 -->
			<{foreach item=block from=$xoops_ccblocks name=ccloop}><!-- ■ 表示ブロックの数だけループ -->
				<{if $block.weight == 0 }><!-- ■ もしも weightが0の場合に表示 -->
				<{if ! $block.title|strstr:"none"}><h2 class="BlockTitle"><{$block.title}></h2><{/if}>
				<div class="BlockContents"><{$block.content}></div>
				<{/if}><!-- ■ weightによる条件文終わり-->
			<{/foreach}><!-- ■ ループ終わり -->
		<{/if}><!-- ■ 中央中央ブロック判定終わり -->
	</div>
	<{/if}><!-- ■ 中央ブロック判定終わり -->
	<!-- ■ モジュールコンテンツ-->
	<{if $xoops_contents}><div id="ModuleContents"><{$xoops_contents}></div><{/if}>
	<{if $xoops_showcblock == 1}><!-- ■ 中央中央ブロック判定 -->
	<div>
		<{if $xoops_ccblocks}><!-- ■ 中央中央ブロックの場合 -->
			<{foreach item=block from=$xoops_ccblocks name=ccloop}><!-- ■ 表示ブロックの数だけループ -->
				<{if $block.weight > 0 }><!-- ■ もしも weightが0より大きい場合に表示  -->
				<{if ! $block.title|strstr:"none"}><h2 class="BlockTitle"><{$block.title}></h2><{/if}>
				<div class="BlockContents"><{$block.content}></div>
				<{/if}><!-- ■ weightによる条件文終わり-->
			<{/foreach}><!-- ■ ループ終わり -->
		<{/if}><!-- ■ 中央中央ブロック判定終わり -->
	</div>
	<{/if}>

これは、まさにSmarty小ネタに書かれているweight技を使ったもので、上記の場合、管理画面「ブロックの管理」にて「並び順」つまりweightを 0 とした中央カラムのブロックが一番上となり、次にモジュールコンテンツ、weightが0より大きい、つまり1以上の中央カラムのブロックがその下に表示されるという設定になっています。 (CustomizeManual/テーマカスタマイズTips を参照ください。

別の実例として、ヘッダー下に240pxの正方形のブロックを横並びにする設定の説明をしましょう。 ここでは、横幅960pxのテーマのヘッダーの下に横幅一杯のdivを用意して、そこにweight技を使った記述をしてみます・・・

	<div id="container"><!-- Start container -->
	<div id="header">ヘッダーの内容を記述</div>
	<div id="TopColumn">
	<{if $xoops_showcblock == 1}>
	<div>
		<{if $xoops_ccblocks}>
			<{foreach item=block from=$xoops_ccblocks name=ccloop}>
				<{if $block.weight == 0 }><!-- ■ weightが 0 の場合に表示する -->
				<{if ! $block.title|strstr:"none"}><h2 class="BlockTitle"><{$block.title}></h2><{/if}>
				<div class="BlockContents"><{$block.content}></div>
				<{/if}><!-- ■ -->
			<{/foreach}>
		<{/if}>
	</div>
	<{/if}>
	</div>
	<div id="wrapper">
	<!-- ■ モジュールコンテンツ-->
	<{if $xoops_contents}><div id="ModuleContents"><{$xoops_contents}></div><{/if}>
	<{if $xoops_showcblock == 1}>
	<div>
		<{if $xoops_ccblocks}>
			<{foreach item=block from=$xoops_ccblocks name=ccloop}>
				<{if $block.weight > 0 }><!-- ■  weightが 0 より大きい場合に表示する -->
				<{if ! $block.title|strstr:"none"}><h2 class="BlockTitle"><{$block.title}></h2><{/if}>
				<div class="BlockContents"><{$block.content}></div>
				<{/if}><!-- ■ -->
			<{/foreach}>
		<{/if}>
	</div>
	<{/if}>
	</div>
	</div><!-- End container -->

そして、cssに次の様な記述を行うと・・・

#container {
	width:960px;
}
#TopColumn div {
	float:left;
	width:240px;
	height:240px;
}

ヘッダー下に240pxの正方形のブロックが横並びに並びます。

もちろん、実際のテーマを作る際には必要に応じてdivを追加したり、classなどのCSSセレクタを設定したりと色々な調整が必要となりますが・・・ 下に5つ横並びにブロックを並べたり、右上に1個だけブロックを表示したりと、weight技を使うと思い通りのデザインのテーマを作ることが出来るので、より一層楽しめることと思います。

Page Top

モジュールごとに異なる表示をさせる anchor.png

テーマ hd_default のような、bodyに設定したディレクトリ名によるclassなどのCSSセレクタを利用する(大きく表示を変える場合には、この方法が良いと考えられます。) 異なる表示をさせたい箇所にディレクトリ名によるclass付加の設定を行って表示の分岐をさせる(ページごとに違う画像を表示させる場合など)

CustomizeManual/テーマカスタマイズTipsを参照

Page Top

xugj_block を使って、他のモジュールの任意ブロックを表示する anchor.png

 この場合、テーマ内にxugj_blockを使った記述をする必要があり、ページごと(モジュールごと)に表示や非表示のコントロールする設定を加える等が必要となることから、若干敷居は高くなると思います。 (その際は、テーマ hd_default のような、bodyに設定したディレクトリ名によるclassなどのCSSセレクタを利用すると良いでしょう。)

Page Top

picoとxugj_block を使って、他のモジュールの任意ブロックを表示する anchor.png

 この場合、picoのブロック内にxugj_blockを使った記述を行うので、ブロック管理画面にてブロックの配置ができることから、運用しやすい方法と思います。


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