BCOOL THEME http://demo.2bcool.net/ XOOPS デザインテーマ Fri, 25 Jul 2008 00:02:39 +0900 http://backend.userland.com/rss/ XOOPS News xoopstheme@2bcool.net xoopstheme@2bcool.net ja BCOOL THEME http://demo.2bcool.net/images/logo.gif http://demo.2bcool.net/ 144 80 FCKeditorをBCOOL THEMEに最適化して使う方法 http://demo.2bcool.net/modules/news/index.php?page=article&storyid=33 FCKeditorをBCOOL THEMEに最適化して使う方法 XOOPS上での最近のコンテンツ編集の主流は、GIJOEさんのPICO+FCKeditorの様です。先日のバージョンアップによって添付画像のリサイズが追加されましたね。これによってさらにFCKeditorへの乗り換えに拍車がかかりそうです。このサイトにも度々質問をいただく事があり、そろそろ軽視できない状況なので、ここでBCOOL THEMEを使用したサイトでFCKeditorを最適化する方法についてご紹介したいと思います。 Tue, 16 Oct 2007 02:31:34 +0900 http://demo.2bcool.net/modules/news/index.php?page=article&storyid=33 カスタマイズ＆運用TIPS
  • 編集画面レイアウトの変更(picoのtemplate編集)
  • サイトで使うスタイルシートの適応
  • プルダウンのスタイルのカスタマイズ
  • 挿入テンプレートのカスタマイズ
  • メニューのシンプル化など...
    • 今回はBCOOL THEMEのex.cssの使い方と共に紹介していきます。

    編集画面レイアウトの変更(picoのtemplate編集)

    幅固定のテーマが多いBCOOL THEMEでは「編集領域の確保」が重要です。編集時も表示時となるべく同じ幅で行わないと、せっかくのヴィジュアライズされたHTMLエディタの機能を活かせているとはいえないでしょう。そこでpico標準の編集画面テンプレート（pico_main_content_form.html）を編集します。 手を入れるのは、74行目付近 
    		<tr valign="top" align="left">
			<th class="head"><label for="body"><{$smarty.const._MD_PICO_TH_BODY}></label></th>
			<td class="even">
				<{if $body_wysiwyg}>
					<{$body_wysiwyg}>
				<{else}>
					<input type="checkbox" id="body_bbcode_onoff" onclick="if(this.checked){xoopsGetElementById('body_bbcode_buttons_pre').style.display='block';xoopsGetElementById('body_bbcode_buttons_post').style.display='block'}else{xoopsGetElementById('body_bbcode_buttons_pre').style.display='none';xoopsGetElementById('body_bbcode_buttons_post').style.display='none'};" /><label for="body_bbcode_onoff"><{$smarty.const._MD_PICO_LABEL_INPUTHELPER}></label>
					<br />
					<{xoopsdhtmltarea name="body" cols="60" rows="15" value=$content.body pre_style="display:none;" post_style="display:none;"}>
				<{/if}>
			</td>
		</tr>
    の部分です。 テーブルが2列になっているので、1行にしてしまいます。 
    <tr valign="top" align="left">
	<th colspan="2" class="head"><label for="body"><{$smarty.const._MD_PICO_TH_BODY}></label>
	<{if $body_wysiwyg}>
		<{$body_wysiwyg}>
		<{else}>
		<input type="checkbox" id="body_bbcode_onoff" onclick="if(this.checked){xoopsGetElementById('body_bbcode_buttons_pre').style.display='block';xoopsGetElementById('body_bbcode_buttons_post').style.display='block'}else{xoopsGetElementById('body_bbcode_buttons_pre').style.display='none';xoopsGetElementById('body_bbcode_buttons_post').style.display='none'};" />					<label for="body_bbcode_onoff"><{$smarty.const._MD_PICO_LABEL_INPUTHELPER}></label>
		<br />
		<{xoopsdhtmltarea name="body" cols="60" rows="15" value=$content.body pre_style="display:none;" post_style="display:none;"}>
	<{/if}>
	</th>
</tr>
    photophoto
     

    サイトで使うスタイルシートの適応

    せっかくリアルタイムにヴィジュアライズされるエディティング画面なのですから、実際に掲載される画面と同様なプレビューが出来るようにしておかねば意味がありませんよね。 fckeditor.jsの27行目付近にある 
    FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;
    を自分の使っているテーマのスタイルシートに変更することで、編集中のエディタエリア内の見た目も、サイトのスタイルが反映されます。 サンプル 
    FCKConfig.EditorAreaCSS = FCKConfig.BasePath + '../../../themes/使用テーマ名/style.css'
    photophoto
     

    プルダウンのスタイルのカスタマイズ

    BCOOL THEME 2ndシリーズにはHTMLコンテンツ制作を支援するためのスタイルをあらかじめ同梱しています。配布テーマのcssフォルダに入れてある“ex.css”がそれなのですが、これまで丁寧な説明をしていなかったためか、以外とうまく使われていないのかもしれません。ただこの“ex.css”に記載したスタイルは、HTML編集をする際、どれも頻繁に使いたいと思うものなはずなので、とても重宝するはずです。
    ここをクリックしてそのスタイルサンプルを見る
    このex.cssをFCKeditorでも瞬時に適応させるため、デフォルトで用意されているスタイルをex.cssで置き換えてしまいます。 fckstyles.xmlの22行目〜 
    <Styles>
	<Style name="Image on Left" element="img">
		<Attribute name="style" value="padding: 5px; margin-right: 5px" />
		<Attribute name="border" value="2" />
		<Attribute name="align" value="left" />
	</Style>
	<Style name="Image on Right" element="img">
		<Attribute name="style" value="padding: 5px; margin-left: 5px" />
		<Attribute name="border" value="2" />
		<Attribute name="align" value="right" />
	</Style>
	<Style name="Custom Bold" element="span">
		<Attribute name="style" value="font-weight: bold;" />
	</Style>
	<Style name="Custom Italic" element="em" />
	<Style name="Title" element="span">
		<Attribute name="class" value="Title" />
	</Style>
	<Style name="Code" element="span">
		<Attribute name="class" value="Code" />
	</Style>
	<Style name="Title H3" element="h3" />
	<Style name="Custom Ruler" element="hr">
		<Attribute name="size" value="1" />
		<Attribute name="color" value="#ff0000" />
	</Style>
</Styles>
    を 
    <Styles>

	<Style name="写真をフォトフレーム風に" element="img">
		<Attribute name="class" value="photo_frame" />
	</Style>

	<Style name="写真フレーム(左回込)" element="img">
		<Attribute name="class" value="photo_r" />
	</Style>

	<Style name="写真フレーム(右回込)" element="img">
		<Attribute name="class" value="photo_l" />
	</Style>

	<Style name="vertical align middle for images" element="img">
		<Attribute name="class" value="vam" />
	</Style>

	<Style name="small" element="span">
		<Attribute name="class" value="small" />
	</Style>

	<Style name="noteline" element="span">
		<Attribute name="class" value="noteline" />
	</Style>

	<Style name="notice" element="span">
		<Attribute name="class" value="notice" />
	</Style>

	<Style name="marker" element="span">
		<Attribute name="class" value="marker" />
	</Style>

	<Style name="price" element="span">
		<Attribute name="class" value="price" />
	</Style>

	<Style name="センタリング" element="div">
		<Attribute name="class" value="center" />
	</Style>

	<Style name="右揃え" element="div">
		<Attribute name="class" value="right" />
	</Style>

	<Style name="左揃え" element="div">
		<Attribute name="class" value="left" />
	</Style>

	<Style name="clear" element="div">
		<Attribute name="class" value="clear" />
	</Style>

	<Style name="topic box" element="div">
		<Attribute name="class" value="topicbox" />
	</Style>

	<Style name="topic box1" element="div">
		<Attribute name="class" value="box1" />
	</Style>

	<Style name="topic box2" element="div">
		<Attribute name="class" value="box2" />
	</Style>

	<Style name="回込み解除" element="div">
		<Attribute name="class" value="clear" />
	</Style>

</Styles>
    に変更します。 このように、もし自分で頻繁に使いたいようなスタイルがある場合は、テーマのex.cssにクラス宣言を追加し、fckstyles.xmlにそのクラスを呼び出す記述を加えていく事で、より充実した環境をつくることが出来ます。 photophoto
     

    挿入テンプレートのカスタマイズ

    意外と最も便利と個人的に思うのが、挿入テンプレートのカスタマイズです。とにかくいちいち記述するのが面倒なレイアウト系のものはテンプレートにしてしまうと日々の作業を楽にしてくれます。 やり方は先ほどのスタイルとほとんど同じで、fcktemplates.xmlを自分専用にカスタマイズするだけです（ヴィジュアルアイコンも変更したい場合は、こちらも用意する必要がありますが）。ここでは私のよく使う設定をご紹介します。 fcktemplates.xmlの22行目〜 
    <Templates imagesBasePath="fck_template/images/">
	<Template title="Image and Title" image="template1.gif">
		<Description>One main image with a title and text that surround the image.</Description>
		<Html>
			<![CDATA[
				<img style="MARGIN-RIGHT: 10px" height="100" alt="" width="100" align="left"/>
				<h3>Type the title here</h3>
				Type the text here
			]]>
		</Html>
	</Template>
	<Template title="Strange Template" image="template2.gif">
		<Description>A template that defines two colums, each one with a title, and some text.</Description>
		<Html>
			<![CDATA[
				<table cellspacing="0" cellpadding="0" width="100%" border="0">
					<tbody>
						<tr>
							<td width="50%">
							<h3>Title 1</h3>
							</td>
							<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
							<td width="50%">
							<h3>Title 2</h3>
							</td>
						</tr>
						<tr>
							<td>Text 1</td>
							<td>&nbsp;</td>
							<td>Text 2</td>
						</tr>
					</tbody>
				</table>
				More text goes here.
			]]>
		</Html>
	</Template>
	<Template title="Text and Table" image="template3.gif">
		<Description>A title with some text and a table.</Description>
		<Html>
			<![CDATA[
				<table align="left" width="80%" border="0" cellspacing="0" cellpadding="0"><tr><td>
					<h3>Title goes here</h3>
					<p>
					<table style="FLOAT: right" cellspacing="0" cellpadding="0" width="150" border="1">
						<tbody>
							<tr>
								<td align="center" colspan="3"><strong>Table title</strong></td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
							</tr>
						</tbody>
					</table>
					Type the text here</p>
				</td></tr></table>
			]]>
		</Html>
	</Template>
</Templates>
    を 
    <Templates imagesBasePath="fck_template/images/">
	<Template title="写真付きテキスト" image="template1.gif">
		<Description>どんなタイプのページにももってこいのベーシックテンプレートです。</Description>
		<Html>
			<![CDATA[
				<h1>タイトル</h1>
				<img class="photo_l" height="140" alt="" width="100" />
				<h2>h2タイトル</h2>
				説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト
			]]>
		</Html>
	</Template>
	<Template title="tableless 2columns layout" image="bcool_2column.gif">
		<Description>テーブルレスな２カラムレイアウト。</Description>
		<Html>
			<![CDATA[
			<h2>タイトル</h2>
				<div class="fl_left" style="width:47%; padding:0 0 10px;">
					<h3>項目タイトル</h3>
					テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
				</div>
				<div class="fl_right" style="width:47%; padding:0 0 10px;">
					<h3>項目タイトル</h3>
					テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
				</div>
				<div class="clear"></div>
			]]>
		</Html>
	</Template>
	<Template title="tableless 3columns layout" image="bcool_3column.gif">
		<Description>テーブルレスな３カラムレイアウト。</Description>
		<Html>
			<![CDATA[
			<h2>タイトル</h2>
				<div class="fl_left" style="width:27%; padding:0 3% 10px;">
					<h3>項目タイトル</h3>
					テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
				</div>
				<div class="fl_left" style="width:27%; padding:0 3% 10px;">
					<h3>項目タイトル</h3>
					テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
				</div>
				<div class="fl_left" style="width:27%; padding:0 3% 10px;">
					<h3>項目タイトル</h3>
					テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
				</div>
				<div class="clear"></div>
			]]>
		</Html>
	</Template>
	<Template title="表組み" image="bcool_table.gif">
		<Description>会社概要やリクルートの募集要項などにどうぞ。</Description>
		<Html>
			<![CDATA[
			<h1>タイトル</h1>
				<table border="0" cellspacing="2" cellpadding="1" class="outer">
					<tr>
						<td class="head">項目１</td>
						<td class="odd">テキスト</td>
					</tr>
					<tr>
						<td class="head">項目２</td>
						<td class="odd">テキスト</td>
					</tr>
					<tr>
						<td class="head">項目３</td>
						<td class="odd">テキスト</td>
					</tr>
					<tr>
						<td class="head">項目４</td>
						<td class="odd">テキスト</td>
					</tr>
					<tr>
						<td class="head">項目５</td>
						<td class="odd">テキスト</td>
					</tr>
					<tr>
						<td class="head">項目６</td>
						<td class="odd">テキスト</td>
					</tr>
					<tr>
						<td class="head">項目７</td>
						<td class="odd">テキスト</td>
					</tr>
					<tr>
						<td class="head">項目８</td>
						<td class="odd">テキスト</td>
					</tr>
				</table>
			<h2>h2項目</h2>


			]]>
		</Html>
	</Template>
</Templates>
    に。 photophoto
     
    アイコン用の画像は、下のものを右クリック保存で、 /common/fckeditor/editor/dialog/fck_template/images/ に入れてください。 photophotophoto
     

    メニューのシンプル化

    このあたりは定番だと思いますが、私には標準で用意されているメニューがあまりに高機能すぎるので、ある程度シンプル化させています。 修正する場所はfckconfig.jsの93行目〜 
    FCKConfig.ToolbarSets["Default"] = [
	['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
	['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
	['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
	['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
	'/',
	['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
	['OrderedList','UnorderedList','-','Outdent','Indent'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['Link','Unlink','Anchor'],
	['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak','UniversalKey'],
	'/',
	['Style','FontFormat','FontName','FontSize'],
	['TextColor','BGColor'],
	['FitWindow','-','About']
] ;
    の中身です。 一つひとつ読んでいけば意味を読み取れるのでわかるとは思いますが、それすらも面倒な方は、私の設定を参考に！ 
    FCKConfig.ToolbarSets["Default"] = [
	['Source','DocProps','-','Save','Preview','Templates'],
	['Cut','Copy','Paste','PasteText','PasteWord'],
	['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
	'/',
	['Bold','Italic','Underline','StrikeThrough'],
	['OrderedList','UnorderedList','-','Outdent','Indent'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['Link','Unlink','Anchor'],
	['Image','Table','Rule','Smiley','SpecialChar'],
	'/',
	['Style','FontFormat','FontSize'],
	['TextColor','BGColor'],
	['About']
] ;
    photophoto
     
    ]]>         最新ALTSYSを利用した管理エリア向けテーマ http://demo.2bcool.net/modules/news/index.php?page=article&storyid=32 XOOPSの管理画面の画面デザインを変更したいと思ったことはありませんか？GIJOEさんの最新altsysを使うと、管理エリアにもテーマを簡単に適応できます。もちろん当サイトで配布中のテーマも適応できますが、幅固定（しかも幅の狭い）のテーマですと、使い勝手が悪いだけでなく、列数の多いテーブルタグの使われたモジュールの管理画面等で、右端が切れてしまい使えない場合もあります。かといって標準のまま使いたくないという方のために、管理画面専用のベーステーマをつくってみました。 Mon, 21 May 2007 18:30:18 +0900 http://demo.2bcool.net/modules/news/index.php?page=article&storyid=32 カスタマイズ＆運用TIPS photoXOOPSの管理画面の画面デザインを変更したいと思ったことはありませんか？GIJOEさんの最新altsysを使うと、管理エリアにもテーマを簡単に適応できます。もちろん当サイトで配布中のテーマも適応できますが、幅固定（しかも幅の狭い）のテーマですと、使い勝手が悪いだけでなく、列数の多いテーブルタグの使われたモジュールの管理画面等で、右端が切れてしまい使えない場合もあります。かといって標準のまま使いたくないという方のために、管理画面専用のベーステーマをつくってみました。

    管理エリア専用テーマのダウンロード：bc_admin01
     

    altsysのインストール方法はここで説明はしませんが、altsysがきちんとインストールされていれば、あとは適応方法はとても簡単です。

    ダウンロードしたテーマを解凍し通常のテーマと同様、
    XOOPS_ROOT/themes/bc_admin01/
    の位置に配置します。

    そしてALTSYS一般設定の管理画面用テーマの欄に、bc_admin01と記入するだけです。

    またその欄の説明に書かれているように、mainfile.phpのcommon.php行直後に、
    
include XOOPS_TRUST_PATH.'/libs/altsys/include/admin_in_theme.inc.php';

    を挿入しておくことをお忘れなく。

    せっかく管理エリアにもテーマを適応できるので、管理エリアも公開エリアとシームレスな方が...という意見もあると思いますが、私はパブリックエリアは見た目と機能性の共存・融合、バックヤードは利便性の追求、と分けて考えることも重要だと考えています。もちろん多くの場面に適応させるためにはソースも肥大化しますのでそれを避けたいという意味合いもあります。今回はベースとしてとにかくシンプルなつくりとしていますので、コレを元にもっと使いやすい、あるいはオリジナリティあふれる管理テーマを作成してみてはと思います。

    ※公開エリア側のテーマとしては使用できません。
    もし間違って公開エリアテーマに適応してしまった際に困らないよう、簡素なログイン画面が表示されるようにつくっていますので大丈夫だとは思いますが...。]]>         SmoothGalleryをXOOPSで使う-（２） http://demo.2bcool.net/modules/news/index.php?page=article&storyid=31 前回は弊社提供中のテーマchampagne_goldへのSmoothGalleryの適応方法についてご説明しました。ご要望の多かった内容だったのですが、実践できましたでしょうか？ 前回の文末に書いたように、今回はもっとXOOPSらしいSmoothGalleryの使い方についてご紹介したいと思います。ちょっと難易度高めですが、皆さんなら大丈夫。 Wed, 02 May 2007 01:14:47 +0900 http://demo.2bcool.net/modules/news/index.php?page=article&storyid=31 カスタマイズ＆運用TIPS 前回は弊社提供中のテーマchampagne_goldへのSmoothGalleryの適応方法についてご説明しました。ご要望の多かった内容だったのですが、実践できましたでしょうか？
    前回の文末に書いたように、今回はもっとXOOPSらしいSmoothGalleryの使い方についてご紹介したいと思います。ちょっと難易度高めですが、皆さんなら大丈夫。
    さてさて、ここでいう「XOOPSらしい使い方ってどういう意味？」についてまず説明しますと、
    1. CMS的に便利に更新が出来ること
    2. コミュニティサイトとしてユーザ活性を促す要因となること
    3. ポータルサイトとしての質を高められる要素となること
    以上のようなことです。なにやら良く分からないかもしれませんが、順を追って説明していきますので、お付き合い下さい。今日はまず一つ目です。

    １．CMS的に便利に更新が出来ること。

    Gallery部に当てはめる写真をちまちまHTMLで作ってUPして...まぁ真っ当な使い方なのですが、せっかくXOOPSでやるからには、CMS的にHTML編集とかFTPとかなしで実現したいですよね、スマートに。そこで、myalbumを使って、Gallery部分を更新しちゃう方法をお教えしましょう。
    前回の続きでchampagne_goldのスライドショー部分を、この方法で変更できるようにしてみます。

    準備その１（基本環境を整備する）

    SmoothGalleryを使える状態にセッティングしてください。（前回と内容は同じなので、説明は省きます。前回内容を復習する）

    次にgalleryを更新するための画像管理ツールとしてGIJOEさんのmyalbum-Pを使いますのでインストールしてください。

    さらにこれが今回最大のポイントですが、SmoothGalleryとmyalbum-Pの"触媒"として、マライカシステムのTOMさんのxoops_block Smartyプラグインを使用しますので、ダウンロードし適切な場所(XOOPSのルートディレクトリ/class/smarty/plugins/)にインストールしておいてください。

    準備その2（各種設定）

    今回は、myalbumというディレクトリ名でインストール、 写真フォルダは/uploads/photos/、サムネイルフォルダは/uploads/thumbs/、と仮定して説明します。 皆さんの環境に読み替えて設定してください。

    まず今回のギャラリー用カテゴリを作成します。 とりあえず名称は“slideshow”とでもしておきましょう。 スライドショーさせたい写真や画像をこのカテゴリに登録してください。

    前回作成しました、slideshow.htmlを 
    <{xoops_block mod="myalbum" func="b_myalbum_topnews_show" opt="myalbum,5,50,1,0" assign="slideshow"}>

<script type="text/javascript">
	function startGallery() {
		var main_img = new gallery($('main_img'), {
			timed: true,
			showArrows: false,
			showCarousel: false,
			showInfopane: false,
			embedLinks: false,
			delay: 10000,
			fadeDuration: 2000
		});
		document.gallery = main_img;
	}
	window.onDomReady(startGallery);
</script>

<div id="main_img">
	<{foreach item=photo key=count from=$slideshow.photo}>
		<div class="imageElement">
			<img src="<{$xoops_url}>/uploads/photos/<{$photo.lid}>.<{$photo.ext}>" class="full" alt="" />
		</div>
	<{/foreach}>
</div>
    として保存します。


    個人個人で環境が異なると思いますので説明を補足する必要がありますね。

    上記の1行目
    <{xoops_block mod="myalbum" func="b_myalbum_topnews_show" opt="myalbum,5,50,1,0" assign="slideshow"}>
    が、xoops block smarty pluginを使ってmyalbumのブロック：「最新の画像（画像付）」を利用し、こういう設定で表示しますよ、というものです。

    このプラグインの使用ルールが
    引用：
    <{xoops_block mod="モジュールディレクトリ名"
    func="ブロック関数名"
    opt="関数の引数（必要に応じて）"
    assign="テンプレートアサイン名"}>
    というものです。

    myalbumモジュールのb_myalbum_topnews_showという関数を使うというところまでは分かると思いますが、myalbumのオプションが分かり辛いので説明を加えますと、左から、
    1. モジュールディレクトリ名(myalbum)
    2. 表示画像数(5)
    3. titleテキストの文字数(50)
    4. カテゴリid(1)
    5. サブカテゴリを含めるかどうか？(0)
    ですので、これを各自の環境に合わせて設定を行って下さい。

    もう後は保存して、トップページを見てみるだけ。

    どうですか、myalbumでアップロードしたファイルがスライドショーされてますか？

    あとがき

    これでmyalbumへの投稿権限さえあれば、テーマヘッダ画像をコントロールできるようになりました。 このGallery + myalbum + xoops block smartyプラグイン( + pico )を使ったやり方を覚えると、かなり応用が利くようになります。

    TOMさんのxoops block smartyプラグイン、ホントに便利です。また今回の内容では触れてませんが、GIJOEさんのpicoでsmartyが使えることのすばらしさ。も〜涙モノです。

    JonDesign (Jonathan Schemoul)さんに加え、お二人のXOOPS牽引者への感謝と、冒頭で触れた２，３の使い方をまた後日ご紹介することをお約束して、疲れたので今日はこれでおしまい...。
    ]]>         SmoothGalleryをXOOPSで使う（champagne_goldへのスライドショー設定方法） http://demo.2bcool.net/modules/news/index.php?page=article&storyid=30 champlange_goldなどの新作テーマ5日連続リリースの際、アーカイブ内におまけ画像をふんだんに入れ込んだのですが、その写真を実際にテーマに当てはめた状態をプレゼンしたいなぁと思い、また手っ取り早くそれを実現するため、Smooth SlideshowというAjaxなスライドショースクリプトを利用してプレゼンテーマを作成しました。 実際にこのサイトのテーマ選択内にあるxxx_slideshowがこれなのですが、これを選択できるようにしたとたん「ダウンロードに無いんですけど〜」「やり方教えて〜」という反響が結構ありましたので、まずこのスクリプトの設置方法及びこれらテーマで行っているオートスライドショーの設定方法を紹介します。 Thu, 26 Apr 2007 02:38:27 +0900 http://demo.2bcool.net/modules/news/index.php?page=article&storyid=30 カスタマイズ＆運用TIPS ところでみなさんはSmoothGalleryをご存知でしたか？とってもクールなギャラリースクリプトです。まだ試したことがなければ是非サイトを訪れて、Showcaseをのぞいてみて下さい。
    配布サイトはこちら↓
    JonDesign's (Javascript) SmoothGallery: Mootools Mojo for Images | What is it ?

    ちなみにchanpagne_goldなどで使っているのは実はこのスクリプトの前身SmoothSlideshowです。これらのスライドショープレゼンテーマを作成し始めた時はまだSmoothGalleryの存在を知らず...
    今回のレポートは、実はSmoothGalleryをきちんと理解するために自分でやってみたので、その結果報告であったりします。

    さてさて、XOOPSで使うには？ですが、何も難しいことはなく、いたって簡単なのですが、リクエストにお応えしてchampagne_goldを元にやってみることにしましょう。

    ファイルをダウンロードして準備をする

    1. 弊社提供のテーマセット、champagne_goldをダウンロード・解凍し、themesディレクトリに配置します。（※2重にならないように注意してください）
    2. SmoothGalleryを解凍、XOOPSのルートディレクトリに配置します。
      かなり高機能なギャラリースクリプトですので、単にテーマ内だけでなく、XOOPS上の静的コンテンツや、XOOPSから切り離した 単独HTMLページなどから利用したい場合もあるだろうと思いますので、今回はココに配置することをお勧めします。 ちなみにこのSmoothGalleryの自動サムネイル作成の機能を使うためにcacheディレクトリをこのディレクトリ内に、パーミッション777で作成しておいたほうがいいです。
    3. theme.htmlにSmoothGalleryのjsファイル、cssファイルへのリンクパスを記入します。
    3に関しては、head内であればどこでもいいですが、一応最適な箇所としては、
    <link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_url}>/SmoothGallery/css/jd.gallery.css" />
    をprint.cssの宣言の後ろに、
    <script src="<{$xoops_url}>/SmoothGallery/scripts/mootools.js" type="text/javascript"></script>
<script src="<{$xoops_url}>/SmoothGallery/scripts/jd.gallery.js" type="text/javascript"></script>
    を
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    の後ろに入れてください。

    これで準備完了です。

    後はSmoothGallery/demo.htmlを参考にSmoothGalleryのルールを把握し、ギャラリーやスライドショーを作成しましょう。
    と、もちろんこんな投げっぱなしの書き方をすると、また批判を浴びそうなので...これでは終われませんね。

    では、このサイトのデモと同様に、ヘッダの画像スペースをスライドショーパネルとして機能させてみましょう。

    各種ファイルの作成・編集（１）- slideshow.htmlをつくる

    少しソースの量があるので、またこのスライドショー自体をメンテすることもふえるでしょうし、theme.html内で作業をあまりしたくないですね。なので、slideshow.htmlという別ファイルを作成して下さい。（配置場所はtheme.htmlと同じ階層に） とりあえず中身はおまじないだと思って、下記としてみてください。 
    <script type="text/javascript">
	function startGallery() {
		var main_img = new gallery($('main_img'), {
			timed: true,
			showArrows: false,
			showCarousel: false,
			showInfopane: false,
			embedLinks: false,
			delay: 10000,
			fadeDuration: 2000
		});
		document.gallery = main_img;
	}
	window.onDomReady(startGallery);
</script>
<div id="main_img">
	<div class="imageElement">
		<img src="<{$xoops_imageurl}>images/main_img.jpg" class="full" alt="" />
	</div>
	<div class="imageElement">
		<img src="<{$xoops_imageurl}>images/main_img_02.jpg" class="full" alt="" />
	</div>
	<div class="imageElement">
		<img src="<{$xoops_imageurl}>images/main_img_03.jpg" class="full" alt="" />
	</div>
</div>
    とりあえず今回は例ですから、テーマセット内に入っている2枚をローテーションするような設定です。
    説明すべきポイントはいくつかありますが、まずこのテーマの該当部分は、本当に雰囲気を出すためだけのもので、写真を説明するだとかいう趣旨ではありませんので、とにかくSmartGalleryの標準機能を隠します。
    その設定が
    	timed: true,
	showArrows: false,
	showCarousel: false,
	showInfopane: false,
	embedLinks: false,
	delay: 10000,
	fadeDuration: 2000
    の部分です。

    function startGallery のオプション設定

    1. timed が、オートスライドにするかどうか？
    2. showArrows が、次へや前へ、のクリックが出来るようにするかどうか？
    3. showCarousel が、サムネイル一覧表示部を使うかどうか？
    4. showInfopane が、タイトルや説明文を使うかどうか？
    5. embedLinks が、元画像へのリンクをするかどうか？
    6. delay が、一枚の画像の表示時間（ミリセカンド）
    7. fadeDuration が画像のクロスフェードの時間（〃）
    この様にSmartGalleryは、用意するファイル側からかなりのオプション設定を渡すことができるため、本体スクリプトに手を入れることなく思い通りの効果を得ることが出来ます。ですので、一回設置してしまえば、picoでも、myalbumでも、カスタムブロックでも、いろいろなところからギャラリーをつくれてしまうわけです。


    各種ファイルの作成・編集（２）- theme.htmlとstyle.cssの調整

    スライドショー用のファイルが出来たので、theme.html側でそれを読み込まなければなりません。 theme.htmlの53行目（ヘッダに先ほどのJS,cssへのリンクを挿入後）付近 
    <div id="main_img"><span class="hidden"><{$xoops_pagetitle}></span></div>
    を 
    <{include file="$xoops_rootpath/themes/$xoops_theme/slideshow.html"}>
    とします。
    ちなみにtheme編集をする方は、この書き方は覚えておくとずいぶん作業が楽になりますよ。コピペでテーマディレクトリ名称を変えても、theme.htmlから切り離したリンクファイルへの設定部分をいちいち変更しなくてすみますので...。（defaultテーマを見ると意味が分かるはず）

    さらに、style.css149行目〜 
    	#main_img {
		display:block;
		background:url(images/main_img.jpg) no-repeat;
		height:132px;
		border-top:6px solid #E6E5C0;
		border-bottom:6px solid #E6E5C0;
	}
    を 
    	#main_img {
		z-index:5;
		display: none;
		height:132px;
		border-top:6px solid #E6E5C0;
		border-bottom:6px solid #E6E5C0;
	}
    として設定完了です！

    どうです？予想通りの結果が得られましたか？

    あとがき

    もちろんスライドさせるのは、単なる写真だけでなくともOKですよね。この写真をあなたのサイトのキャッチコピーやサービスメッセージを画像に載せれば、とっても魅力的なプレゼンテーションが行えるはずです。 是非あなたのサイトをもっとCOOLにしてみてください！

    さてさて、このSmoothGallery、せっかくXOOPSで使うのであればもっと賢い使い方しないともったいないと思いませんか？ちまちまHTMLで画像を指定して...ってやっていても、利便性が高まったともいえないし、それは単なるサイト運営者がサイトをかっこよく見せられた、という事で終わって今います。つまりCMS的でもないし、コミュニティ的でもありません。次回は、SmoothGalleryとmyalbum-P、そしてマライカシステムTOMさんのxoops_block Smartyプラグインを使った新しいギャラリー表現方法を紹介しようと思います。これはすこし難易度高めなのですが、時間が出来たらレポート書きます。しばしお待ちを...。

    どんなことをするかは、下のボタンを押してみて下さい。
    （表示されている写真はmyalbum-Pと連動してるんですが、見ただけじゃわかんないですよねぇ...。）
    ]]>         ５日連続シリーズ第５弾：champagne_gold http://demo.2bcool.net/modules/news/index.php?page=article&storyid=29 5日連続シリーズも最終日。ラストは「champagne_gold」です。当たり障りのないsilverなどとは違い、このgoldは多少全体の色やテイストのバランスが少しシビアに映ります。 Sun, 15 Apr 2007 00:00:00 +0900 http://demo.2bcool.net/modules/news/index.php?page=article&storyid=29 XOOPS THEME 5日連続シリーズも最終日。ラストは「champagne_gold」です。当たり障りのないsilverなどとは違い、このgoldは多少全体の色やテイストのバランスが少しシビアに映ります。理美容関係やブライダル、生花、ジュエリーなどにはぴったりのテイストだと思います。これをベースにさらにヘッダー画像部を大きくしたり、写真の代わりにフラッシュを挿入することで、このような業種として表現したい、“センス”や“雰囲気”を十分に伝えられるサイトになるはずです。

    -------------------------------------------------------

    例えば、スライドショースクリプトをこのヘッダー画像部に適応させると、それだけでサイトの質が１段アップしたように見えます。
    （下記ボタンをクリックして、スライドショーをお試しください。役7秒ごとにヘッダ画像が切り替わります）



    ※このスライドショーはプレゼン用に作成したものであり、スクリプトがテーマセットに含有されているわけではありません。
    このテーマは、JonDesign's (Javascript) Smooth SlideShow Library v2.1というものを利用して作成しました。久しぶりにこちらサイトを訪れたらsmooth gallery に進化しているようですね。
    JonDesign's (Javascript) SmoothGallery: Mootools Mojo for Images | What is it ?]]>         ５日連続シリーズ第４弾：bluish_pearl http://demo.2bcool.net/modules/news/index.php?page=article&storyid=28 5日連続シリーズ第４弾は「bluish_pearl」です。「premium_silver」などとベースは同じですが、誠実さを感じさせる色使いにしています。ヘッダの写真スペースには、スローガンなどを絡めたグラフィックを配置するのがベストでしょう。 Sat, 14 Apr 2007 15:27:14 +0900 http://demo.2bcool.net/modules/news/index.php?page=article&storyid=28 XOOPS THEME 5日連続シリーズ第４弾は「bluish_pearl」です。「premium_silver」などとベースは同じですが、誠実さを感じさせる色使いにしています。ヘッダの写真スペースには、スローガンなどを絡めたグラフィックを配置するのがベストでしょう。今までと同じくこのヘッダ写真スペース用のバリエーション写真も十数枚アーカイブ内に収めていますので、テーマ改造の手始めにお使い頂ければと思います。
    ------------------------------------------------
    これら写真をテーマに組み込んだ状態を手っ取り早くプレゼンするためだけのスライドショーテーマを用意しました。下のボタンを押して、ヘッダー画像のスライドショーをご覧頂くことができます。（役7秒ごとにヘッダ画像が切り替わります）



    ※このスライドショーはプレゼン用に作成したものであり、スクリプトがテーマセットに含有されているわけではありません。]]>         ５日連続シリーズ第３弾：greens http://demo.2bcool.net/modules/news/index.php?page=article&storyid=27 5日連続シリーズ第３弾は「greens」です。「premium_silver」「pink_silver」とベースは同じですが、少しだけ親しみやすさや癒しを感じる雰囲気に仕上げました。ヘッダの写真スペースにも、植物や風景といった自然を感じさせるものがベストマッチします。 Fri, 13 Apr 2007 00:41:10 +0900 http://demo.2bcool.net/modules/news/index.php?page=article&storyid=27 XOOPS THEME 5日連続シリーズ第３弾は「greens」です。「premium_silver」「pink_silver」とベースは同じですが、少しだけ親しみやすさや癒しを感じる雰囲気に仕上げました。ヘッダの写真スペースにも、植物や風景といった自然を感じさせるものがベストマッチします。ネイチャー素材以外でも、スポーツ系やリゾート系などにもかなりハマルと思います。今までと同じくこのヘッダ写真スペース用のバリエーション写真も十数枚アーカイブ内に収めていますので、テーマ改造の手始めにお使い頂ければと思います。
    ------------------------------------------------
    これら写真をテーマに組み込んだ状態を手っ取り早くプレゼンするためだけのスライドショーテーマを用意しました。下のボタンを押して、ヘッダー画像のスライドショーをご覧頂くことができます。（役7秒ごとにヘッダ画像が切り替わります）



    ※このスライドショーはプレゼン用に作成したものであり、スクリプトがテーマセットに含有されているわけではありません。]]>         ５日連続シリーズ第２弾：pink_silverを公開 http://demo.2bcool.net/modules/news/index.php?page=article&storyid=26 5日連続シリーズ第２弾は「pink_silver」です。第1弾は「premium_silver」同様、シンプル・軽量、そして全体的に品位や洗練、品格、高品質を意識したデザインです。 Thu, 12 Apr 2007 00:00:00 +0900 http://demo.2bcool.net/modules/news/index.php?page=article&storyid=26 XOOPS THEME 5日連続シリーズ第２弾は「pink_silver」です。第1弾は「premium_silver」同様、シンプル・軽量、そして全体的に品位や洗練、品格、高品質を意識したデザインです。ヘッダの写真スペースをうまく活用されれば、使う方のオリジナリティを充分に引き出せると確信しています。このヘッダ写真スペース用のバリエーション写真も十数枚アーカイブ内に収めていますので、テーマ改造の手始めにお使い頂ければと思います。
    ------------------------------------------------
    これら写真をテーマに組み込んだ状態を手っ取り早くプレゼンするためだけのスライドショーテーマを用意しました。下のボタンを押して、ヘッダー画像のスライドショーをご覧頂くことができます。（役7秒ごとにヘッダ画像が切り替わります）



    ※このスライドショーはプレゼン用に作成したものであり、スクリプトがテーマセットに含有されているわけではありません。]]>         新作テーマリリース（premium_silver) http://demo.2bcool.net/modules/news/index.php?page=article&storyid=25 旧作品よりのデザインコンセプト引継ぎテーマの刷新を一先ず終了しましたが、もちろんそれで終わりではありません！このサイト内で稼動チェックを行っておりましたので、すでにご覧頂いているとは思われますが、シンプルな2カラム構成のテーマを5色連続リリースします。 Wed, 11 Apr 2007 19:04:00 +0900 http://demo.2bcool.net/modules/news/index.php?page=article&storyid=25 XOOPS THEME 旧作品よりのデザインコンセプト引継ぎテーマの刷新を一先ず終了しましたが、もちろんそれで終わりではありません！このサイト内で稼動チェックを行っておりましたので、すでにご覧頂いているとは思われますが、シンプルな2カラム構成のテーマを5色連続リリースします。第1弾は「premium_silver」。
    シンプル化・軽量化の目的もあり、過度な装飾は極力省いていますが、それでも全体的に品位や洗練、品格、高品質といったニュアンスを醸すようデザインしました。（ブライダル、レストラン、洋菓子、カフェ、アパレルなどを意識。）

    ヘッダの写真スペースをうまく活用されれば、使う方のオリジナリティを充分に引き出せると確信しています。このヘッダ写真スペース用のバリエーション写真も十数枚アーカイブ内に収めていますので、テーマ改造の手始めにお使い頂ければと思います。

    ------------------------------------------------
    これら写真をテーマに組み込んだ状態を手っ取り早くプレゼンするためだけのスライドショーテーマを用意しました。下のボタンを押して、ヘッダー画像のスライドショーをご覧頂くことができます。（役7秒ごとにヘッダ画像が切り替わります）



    ※このスライドショーはプレゼン用に作成したものであり、スクリプトがテーマセットに含有されているわけではありません。]]>         旧テーマの配布完全終了のお知らせ http://demo.2bcool.net/modules/news/index.php?page=article&storyid=24 black2リリース後、gray2、natural2と旧テーマからのデザインコンセプト引継ぎテーマを公開し、個人的にこれは残したい...と思っていたテーマのソース改変はひとまず終了とさせていただきました。 またこれに伴い、旧配布テーマは完全に配布終了といたしました。 旧作品の中のダウンロード数の多いものは、いずれかたちを変え再リリースしたいと考えますが、時期などはお約束できません。あらかじめご了承下さい。 Wed, 11 Apr 2007 18:27:50 +0900 http://demo.2bcool.net/modules/news/index.php?page=article&storyid=24 INFORMATION またこれに伴い、旧配布テーマは完全に配布終了といたしました。
    旧作品の中のダウンロード数の多いものは、いずれかたちを変え再リリースしたいと考えますが、時期などはお約束できません。あらかじめご了承下さい。]]>