テスト

EntryTitleやEntryBodyに「”」や「’」があった場合のエスケープ処理

仮にEntryTitleに下記の様な入力がされ、画像のALT等に入れた場合HTMLのはき出され方

「これは"テスト"です。」

MTのテンプレートはこの様に書きますが

<img src="hogehoge.jpg alt="<$mt:EntryTitle>" />

実際にHTMLにはき出されると下記になります。

<img src="hogehoge.jpg" alt="これは"タイトル"です。 />

これは、エスケープ処理をされていない影響でおかしな事になってます。

<mt:setVarBlock name="regex0">/["']/g</mt:setVarBlock>
<mt:setVarBlock name="regex1">＊</mt:setVarBlock>
<img src="hogehoge.jpg" alt="<$mt:entryTitle regex_replace="$regex0","$regex1"$>" />

<img src="hogehoge.jpg" alt="これは＊テスト＊です。" />

「"」が「＊」に置き換えられる事によりエラーを回避する事ができます。


参考URL
http://www.mtcms.jp/movabletype-blog/tech/201104222143.html

カテゴリを設定せずに記事をプレビューしてエラーが出る場合

カテゴリ別けしている記事で<$mt:CategoryArchiveLink>を使って一覧へバック等を行っている場合に私がよくやってしまうドツボ（＾＾；


パンくず
×間違い
<a href="<$mt:CategoryArchiveLink>"><$mt:EntryCategory></a>

カテゴリ登録した場合は、問題なく動くのですが、選択していないとプレビュー時にエラーがでてしまいます。
 
○正しい
<div id="wrap_pankuzu">
<div id="pankuzu">
<p>
<a href="<mt:BlogParentWebsite><$mt:WebsiteURL$></mt:BlogParentWebsite>">ホーム</a> ＞
<a href="<$mt:BlogRelativeURL $>"><$mt:BlogName></a> ＞
<mt:if tag="EntryCategories">
<mt:entrycategories type="primary"><!-- カテゴリ有り -->
<a href="<mt:TopLevelCategories><$mt:CategoryArchiveLink></mt:TopLevelCategories>"><$mt:EntryCategory></a> ＞
</mt:entrycategories>
<mt:Else><!-- カテゴリ無し -->
</mt:if>
<$mt:EntryTitle></p>
</div><mt:Ignore> //pankuzu </mt:Ignore>
</div><mt:Ignore> //wrap_pankuzu </mt:Ignore>



記事一覧へボタン
こちらもパンくずと同じなのですがカテゴリが設定してないとエラーがでてしまいます。

○正しい
<p>
<mt:if tag="EntryCategories">
<mt:entrycategories type="primary"><!-- カテゴリ有り　カテゴリ一覧 -->
<a href="<$mt:BlogRelativeURL $><mt:TopLevelCategories><$mt:CategoryBasename></mt:TopLevelCategories>"></mt:entrycategories>
<mt:Else><!-- カテゴリ無し　記事一覧 -->
<a href="<$mt:BlogURL>">
</mt:if>
<img src="/images/back_btn.jpg" alt="一覧へ" class="fade_over" /></a></p>


あと<$mt:CategoryArchiveLink>等のファンクションタグを使う場合に
ブロックタグを入れ忘れても動いてしまう事があるのでエラーがわからず悩んでしまうことがあるんですよね～

PDFファイルをアップロードした時にアイコンを表示させる

PDFファイルにリンクをはってある横にPDFマークが入っていることありますよね

アレを自動で表示させる方法です。

<script type="text/javascript">
//<![CDATA[
    $(function(){
        $('#contents').find("a[href$='.pdf']").append('<img style="vertical-align:middle;margin-left:2px;" src="/images/pdf.gif" alt="PDFファイル"/>');
    });
//]]>
</script>

#contents・・・このID内にあるリンクに対して、PDFであれば表示されます。

画像一枚で簡単ホバー

マウスオーバーした際のホバー処理です。
画像にclassを与えることで半調にする処理ができます。

<script type="text/javascript">
    $(function(){
        $('.fade_over').hover(function(){
            $(this).stop().animate({opacity:'0.5'},0);
            },function(){
            $(this).stop().animate({opacity:'1'},0);
        });
    });
</script>

<a href="#"><img src="####" alt="" class="fade_over" /></a>

 opacitの数値で不透明度が変わります。
0.0…完全に透明　0%
0.5…半調　50%
1.0…完全に不透明 100%

opacitの初期値は1.0です。