最近よく使ったMovable Typeのテンプレートタグ #1

Posted by specterant on 2013.05.27

最近Movable Typeでゴニョゴニョすることが多々ありまして、
よく使ったテンプレートタグをコピペできるようにメモです。

<!-- [特定ブログのテンプレートモジュールをインクルード] -->
<$mt:Include module="テンプレートモジュール名" blog_id="ブログID"$>

<!-- [親ウェブサイトのサイト名を取得] -->
<mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite>

<!-- [全てのブログエントリータイトルとパーマリンクを取得] -->
<mt:Entries include_blogs="all"><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></mt:Entries>

<!-- [最新エントリー(1件のみ)を取得] -->
<mt:Entries lastn="1"><$mt:EntryTitle$></mt:Entries>

<!-- [最新エントリー(2件目以降)を取得] -->
<mt:Entries offset="1"><$mt:EntryTitle$></mt:Entries>

<!-- [サムネイル画像のURLを取得し、幅を指定(100px)] -->
<mt:EntryAssets type="image"$><img src="<$mt:AssetThumbnailURL width="100"$>" /></mt:EntryAssets>
他にもありますがとりあえず…
困ったときには、下記テンプレートタグリファレンスを参照です。

テンプレートタグリファレンス

No Comments

Movable Typeで子カテゴリーのみ取得する方法

Posted by specterant on 2013.04.23

他にいい方法があると思うけど取り敢えず取得できたのでメモしときます。
あまり使用頻度は無いと思いますが、いざという時のために。

<mt:EntryCategories>
	<mt:HasParentCategory>
		<mt:HasSubCategories>
			<a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a>
		</mt:HasSubCategories>
	</mt:HasParentCategory>
</mt:EntryCategories>

【2013.04.30追記】
取得出来たと思ったのですが、この記述だと孫カテゴリーまでなら問題なさそうですが、
ひ孫までいくと取得出来ないですね…。

う〜ん…Movable Typeで子カテゴリーのみ取得するのはムズいですね。
カテゴリーを限定すれば簡単なのですが、カテゴリーが増えた時いちいちテンプレート弄らないといけないのがなぁ〜って思う訳です。
とりあえず、現時点では限定する方法しか思いつきません…。後日調べてみます…。

No Comments

slideToggle()メソッドのバグについて

Posted by specterant on 2013.04.11

jQueryのslideToggle()メソッドを使用した時に、
IE8でmarginの設定が消えてしまうバグに遭遇しました。
そこで、このバグの回避方法の備忘録です。

「margin」じゃなく、「padding」で書く。
どうしても、「padding」で書けない時は、親要素に「overflow: hidden;」を設定する。
その他にも色々と回避方法があるみたいですが、
上記のどちらかが簡単かと思います。

下記ページを参考にさせていただきました。
[JQuery覚書]IE8でSlidetoggle()のmarginが消えるバグの回避方法 – ponnao-clip

No Comments

EC-CUBEでおすすめ商品ブロックに大きめな画像を使う方法

Posted by specterant on 2012.07.31

通常、おすすめ商品ブロックで設定されている画像は
「一覧-メイン画像 [130×130]」が使用され、リサイズをかけて表示されます。

で、130×130px以上のサイズで表示したい時は、
まぁ、設定すれば表示はされますが、画像が荒れます…はい。
そう…美しくないです。

そんな訳で、「詳細-メイン画像 [260×260]」を使用してみます。
変更箇所は「/data/Smarty/templates/default/frontparts/bloc/recommend.tpl」の32行目あたりのimgタグ部分です。

//変更前
<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->

//変更後(※「main_list_image」の「_list」を削除)
<!--{$arrProduct.main_image|sfNoImageMainList|h}-->
このように変更すれば、「詳細-メイン画像 [260×260]」を使用してくれます。

260×260px以上にしたいんだよね〜って時は、テンプレートだけでは実現出来ないので、
「/data/class_extends/SC_Product_Ex.php」に下記を追加します。
function lists(&$objQuery) {
	$col = <<< __EOS__
								product_id
								,product_code_min
								,product_code_max
								,name
								,comment1
								,comment2
								,comment3
								,main_list_comment
								,main_image
								,main_list_image
								,main_large_image
								,price01_min
								,price01_max
								,price02_min
								,price02_max
								,stock_min
								,stock_max
								,stock_unlimited_min
								,stock_unlimited_max
								,deliv_date_id
								,status
								,del_flg
								,update_date
								__EOS__;
	$res = $objQuery->select($col, $this->alldtlSQL());
	return $res;
}
そして、またまた「/data/Smarty/templates/default/frontparts/bloc/recommend.tpl」
32行目あたりのimgタグ部分を下記のように変更すれば、「詳細-メイン拡大画像[500×500]」を使用してくれます。
//変更前
<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->

//変更後(※「main_list_image」の「list」を「large」に変更)
<!--{$arrProduct.main_large_image|sfNoImageMainList|h}-->
ちなみに、リサイズ指定しなければ、240pxでリサイズします。
また、EC-CUBE 2.12.1で検証しました。

5 Comments

jQueryのfindメソッド

Posted by specterant on 2012.07.23

findメソッドは、指定した要素の子要素を、引数で指定した要素に合致したものを取得します。
例えば、ulタグのliタグに背景色を追加しちゃうみたいなことが出来ます。

/********************************
//書式
********************************/
$('セレクタ').find('取得したい子要素');
/********************************
//そんな訳で、記述例
********************************/
$('ul').find('li').css('background-color', 'green');

/********************************
//HTMLの記述
********************************/
<ul>
<li>liタグ</li>
<li>liタグ</li>
<li>liタグ</li>
</ul>

//jQueryで下記のように変更される。
<ul>
<li style="background-color: green;">liタグ</li>
<li style="background-color: green;">liタグ</li>
<li style="background-color: green;">liタグ</li>
</ul>
ちなみに、findメソッドを利用した方が、高速化するみたいです。
//findメソッドを利用しない場合
$('ul li');

//findメソッドを利用する場合
$('ul').find('li');

No Comments

EC-CUBEで商品カテゴリを全て表示させる方法

Posted by specterant on 2012.07.20

タイトル通り、全て表示させる方法です。
通常、親カテゴリページに遷移したら、
子カテゴリが表示される設定になっています。
常に、子カテゴリも表示させたいんだよ〜って時のカスタムです。

はい。そんな訳で、変更箇所は「/data/Smarty/templates/default/frontparts/bloc/category.tpl」です。
※ちなみに、EC-CUBE 2.12.1で検証しています。

/* //////////////////////////////////////////////////////////////////////////////
// 【1】と【2】を削除
////////////////////////////////////////////////////////////////////////////// */
<script type="text/javascript">//<![CDATA[
$(function(){
	$('#category_area li.level1:last').css('border-bottom', 'none');
});
//]]></script>
<div class="block_outer">
	<div id="category_area">
		<div class="block_body">
			<h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_bloc_category.gif" alt="商品カテゴリ" /></h2>
			<!--{strip}-->
			<ul id="categorytree">
				<!--{assign var=preLev value=1}-->
				<!--{assign var=firstdone value=0}-->
				<!--{section name=cnt loop=$arrTree}-->
				<!--{* 表示フラグがTRUEなら表示 *}-->
				<!--{if $arrTree[cnt].display == 1}--> // →→→→→→→→→→→→→→→→【1】
				<!--{assign var=level value=`$arrTree[cnt].level`}-->
				<!--{assign var=levdiff value=`$level-$preLev`}-->
				<!--{if $levdiff > 0}-->
				<ul>
				<!--{elseif $levdiff == 0 && $firstdone == 1}-->
				</li>
				<!--{elseif $levdiff < 0}-->
				<!--{section name=d loop=`$levdiff*-1`}-->
				</li>
				</ul>
				<!--{/section}-->
				</li>
				<!--{/if}-->
				<li class="level<!--{$level}--><!--{if in_array($arrTree[cnt].category_id, $tpl_category_id)}--> onmark<!--{/if}-->">
				<p><a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$arrTree[cnt].category_id}-->"<!--{if in_array($arrTree[cnt].category_id, $tpl_category_id)}--> class="onlink"<!--{/if}-->><!--{$arrTree[cnt].category_name|h}-->(<!--{$arrTree[cnt].product_count|default:0}-->)</a></p>
				<!--{if $firstdone == 0}--><!--{assign var=firstdone value=1}--><!--{/if}-->
				<!--{assign var=preLev value=`$level`}-->
				<!--{/if}--> // →→→→→→→→→→→→→→→→【2】
				<!--{* セクションの最後に閉じタグを追加 *}-->
				<!--{if $smarty.section.cnt.last}-->
				<!--{if $preLev-1 > 0}-->
				<!--{section name=d loop=`$preLev-1`}-->
				</li>
				</ul>
				<!--{/section}-->
				</li>
				<!--{else}-->
				</li>
				<!--{/if}-->
				<!--{/if}-->
				<!--{/section}-->
			</ul>
			<!--{/strip}-->
		</div>
	</div>
</div>
ちと、分かりづらいので、
【1】と【2】をピックアップしました。
// <!--{* 表示フラグがTRUEなら表示 *}-->の下部分の記述を削除
<!--{if $arrTree[cnt].display == 1}--> // →→→→→→→→→→→→→→→→【1】

// <!--{* セクションの最後に閉じタグを追加 *}-->の上部分の記述を削除
<!--{/if}--> // →→→→→→→→→→→→→→→→【2】
まぁ〜、上記の2箇所を削除すれば、全て表示されます。

No Comments

EC-CUBEでパンくずリストを設置してみる

Posted by specterant on 2012.07.18

2.4.4と2.11以降ではカスタマイズが違っているので、2.12.1で実験してみました。
そんな訳で、私用コピペのためのメモです。
変更箇所は下記データです。

・/data/class_extends/page_extends/products/LC_Page_Products_List_Ex.php
・/data/class_extends/page_extends/products/LC_Page_Products_Detail_Ex.php

/* //////////////////////////////////////////////////////////////////////////////
// [/data/class_extends/page_extends/products/LC_Page_Products_List_Ex.php]
////////////////////////////////////////////////////////////////////////////// */
function process()
{
	parent::process();
	$this->action(); //追加
}


// 下記追加
function action()
{
	parent::action();
	$objDb = new SC_Helper_DB_Ex();
	if($this->arrForm['category_id']) {
		$arrCatId = $objDb->sfGetParents("dtb_category", "parent_category_id", "category_id", $this->arrForm['category_id']);
		$TopicPath = '<a href="../">' . HOME . '</a> &gt; ';
		foreach($arrCatId as $key => $val) {
			$arrCatName = $objDb->sfGetCat($val);
			if($val != $this->arrForm['category_id']) {
				$TopicPath .= '<a href="./list.php?category_id=' .$val. '">'. $arrCatName['name'] . '</a> &gt; ';
			}
			else {
				$TopicPath .= $arrCatName['name'];
			}
		}
	}
	else {
		$TopicPath = '<a href="../">' . HOME . '</a> &gt; ' . $this->arrForm['name'] . " の検索結果";
	}
	$this->TopicPath = $TopicPath;
}
/* //////////////////////////////////////////////////////////////////////////////
// [/data/class_extends/page_extends/products/LC_Page_Products_Detail_Ex.php]
////////////////////////////////////////////////////////////////////////////// */
function process()
{
	parent::process();
	$this->action(); //追加
}


// 下記追加
function action()
{
	parent::action();
	$objDb = new SC_Helper_DB_Ex();
	$arrCategory_id = $objDb->sfGetCategoryId( $this->arrProduct['product_id'] );
	$arrCatId = $objDb->sfGetParents( "dtb_category", "parent_category_id", "category_id", $arrCategory_id[0] );
	$TopicPath = '<a href="../">'.HOME.'</a> &gt; ';
	foreach ( $arrCatId as $key => $val ) {
		$arrCatName = $objDb->sfGetCat( $val );
		$TopicPath .= '<a href="./list.php?category_id='.$val.'">'.$arrCatName['name'].'</a>';
		if ( $val != $arrCategory_id[0] ) {
			$TopicPath .= ' &gt; ';
		}
	}
	$this->TopicPath = $TopicPath.' &gt; '.$this->arrProduct['name'];
}
あとは、テンプレートデータに下記を記述すれば、
パンくずリストが表示されます。
<!--{$TopicPath}-->

下記ページを参考にさせていただきました。
EC-CUBE 開発コミュニティ – フォーラム

No Comments

EC-CUBEで商品一覧ページで横並びレイアウトの時などに使えるカスタム

Posted by specterant on 2012.07.17

最近EC-CUBE 2.12.1がリリースされました。
私は、2.4.4を触ってからは、全くでして、
そろそろ、最新版も触っとかないとなぁ〜ってことで、
色々調査している最中です。

2.4.4の時、簡単なカスタムをしたのですが、
数年の月日が経ちどこを触ったのか分からなくなってしまいました。
これでは、今後また、同じことを調べることになってしまい、
時間の無駄になるのでメモすることにしました。

そんな訳で、横並びレイアウトの時などに使えるカスタムの私用コピペ。
変更箇所は「/data/Smarty/templates/default/products/list.tpl」です。

//最後の商品または3つ目の商品の後にコードを追加
<!--{if $smarty.foreach.arrProducts.last || $smarty.foreach.arrProducts.iteration % 3 === 0}-->
コードを記述
<!--{/if}-->

ちなみに、2.12.1で検証しました。

下記ページを参考にさせていただきました。
EC-CUBE 開発コミュニティ – フォーラム

No Comments

text-shadowプロパティについて

Posted by specterant on 2012.06.26

CSSでテキストに影をつけられるtext-shadowプロパティについてのメモです。
現在、text-shadowプロパティが機能するブラウザについて調べた結果、以下のようです…。

・Safari 3〜
・Google Chrome 2〜
・Firefox 3〜
・Opera 9.6〜

やはり、IEはダメなんですね…。
ダメでも、IEに対応させたいのであれば、下記を参考していただけたらと。

IEでCSS3のドロップシャドウを使いたい
asamuzaK.jp : IE9で(ついでにIE7、IE8でも)text-shadow

※現在、検証してません…。今度検証してみます。検証したらまたご報告します。>自分…

そんな訳で、text-shadowプロパティの基本的な使い方を、これまた、私用でコピペできるようにメモです。

//ちなみに各オプションはデフォルト値を記述しています。
セレクタ {
	text-shadow: <X方向への距離> <Y方向への距離> <影のぼかし半径> <影のぼかし色>;
}

//<影のぼかし色>をカラーネームで指定してもOK(例えば、redとかblueなど)
セレクタ {
	text-shadow: <X方向への距離> <Y方向への距離> <影のぼかし半径> <影のぼかし色>;
}

//また、<影のぼかし色>をRGBAカラーモデルで指定してもOK(例えば、rgba(255, 255, 255, 0.5)みたいに)
セレクタ {
	text-shadow: <X方向への距離> <Y方向への距離> <影のぼかし半径> rgba(<影のぼかし色>);
}

//カンマ「,」で複数の影をつけることも可能です。
セレクタ {
	text-shadow: <影のぼかし色> <X方向への距離> <Y方向への距離> <影のぼかし半径>, 
				 <影のぼかし色> <X方向への距離> <Y方向への距離> <影のぼかし半径>, 
				 <影のぼかし色> <X方向への距離> <Y方向への距離> <影のぼかし半径>;
}

//ちなみに<影のぼかし色>は一番最初に記述してもOK
セレクタ {
	text-shadow: <影のぼかし色> <X方向への距離> <Y方向への距離> <影のぼかし半径>;
}

そして、サンプルコード。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>text-shadow test</title>
<style>
	* {
		margin: 0;
		padding: 20px;
		font-size: 16px;
		font-family: Helvetica;
	}
	#text-shadow1 {
		text-shadow: 5px 5px 5px #000;
	}
	#text-shadow2 {
		text-shadow: #000 5px 5px 5px;
	}
	#text-shadow3 {
		text-shadow: 5px 5px 5px blue;
	}
	#text-shadow4 {
		text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
	}
	#text-shadow5 {
		text-shadow:
			-5px -5px 0 #ff0000, /*--- 赤(一番上)---*/
			5px -5px 0 #0000ff,  /*--- 青(二番目)---*/
			-5px 5px 0 #00ff00,  /*--- 緑(三番目)---*/
			5px 5px 0 #ffff00;   /*--- 黄(一番下)---*/
	}
</style>
</head>
<body>
	<div id="text-shadow1">text-shadowプロパティのサンプル1</div>
	<div id="text-shadow2">text-shadowプロパティのサンプル2</div>
	<div id="text-shadow3">text-shadowプロパティのサンプル3</div>
	<div id="text-shadow4">text-shadowプロパティのサンプル4</div>
	<div id="text-shadow5">text-shadowプロパティのサンプル5</div>
</body>
</html>
ちなみに、私が検証し機能したブラウザは以下です。

【Mac】
・Safari 3.2.1、4.0.5、5.1.7
・Google Chrome 19.0.1084.56
・Firefox 3.6、13.0.1
・Opera 12.00

※Safari 3.2.1は、複数設定出来ませんでした。ちなみに、一つ目の設定のみ機能してました。


【Windows】
・Safari 5.1.7
・Google Chrome 19.0.1084.56
・Firefox 3.6.20、12.0
・Opera 11.64



詳しくは、下記の参考にさせていただいたサイトを見ていただけたらと。

参考にさせていただいたサイト
text-shadow-CSS3リファレンス
CSS3 text-shadow box-shadow の使い方 | CSS Lecture
text-shadow|プロパティ|CSS HappyLife ZERO

No Comments

FancyBoxの設定メモ

Posted by specterant on 2012.05.31

たまにFancyBoxを使用するのですが、
設定する時に、オプションを忘れてしまうので、
私用でコピペできるようにメモです。

//ちなみに各オプションはデフォルト値を記述しています。
$("適用したい要素").fancybox({ 
	'width': 560,
	'height': 340,
	'margin': 20,
	'padding': 10,
	'scrolling': 'auto',
	'centerOnScroll': false,
	'autoScale': true,
	'overlayColor': '#666',
	'overlayOpacity': 0.3,
	'titleShow': true
});
詳しくは、下記の参考にさせていただいたサイトを見ていただけたらと。

参考にさせていただいたサイト
Fancyboxで設定できるオプションまとめ|JavaScript|グラビカ学習帳~グラビティ・ワークスの備忘録と知識の共有と蓄積
Fancybox – Fancy jQuery lightbox alternative

※ちなみに、バージョン2から商用利用する場合、有料みたいです。

No Comments