Web & IT Memo: mt

ラベル mt の投稿を表示しています。すべての投稿を表示

2015年12月9日

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

ラベル: mt

仮に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

2015年12月3日

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

ラベル: mt

カテゴリ別けしている記事で<$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>等のファンクションタグを使う場合に
ブロックタグを入れ忘れても動いてしまう事があるのでエラーがわからず悩んでしまうことがあるんですよね～

2015年7月22日

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

ラベル: js, mt

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であれば表示されます。

画像一枚で簡単ホバー

ラベル: js, mt

マウスオーバーした際のホバー処理です。
画像に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です。

座標投稿でGoogleMapを表示させる

ラベル: CustomField, js, mt

MTでGoogleMapを表示させるには、通常エディタで埋め込みソースをいれますが

カスタムフィールドを使って、指定サイズのマップを表示させる方法です。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
/* 地図の初期化 */
function initialize() {

/* 緯度・経度：日本, 表参道駅（東京）*/
var latlng=new google.maps.LatLng( カスタムフィールド名 );

/* 地図のオプション設定 */
var myOptions = {
    zoom: 15, /*初期のズームレベル */
    center: latlng, /* 地図の中心点 */
    mapTypeId: google.maps.MapTypeId.ROADMAP /* 地図タイプ */
};

/* 地図オブジェクト */
var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);

/* ★マーカーオブジェクト */
var marker = new google.maps.Marker({
    position: latlng, /* マーカーを立てる場所の緯度・経度 */
    map: map, /*マーカーを配置する地図オブジェクト */
    title: 'マーカー名'
});
}

/* ロード時に初期化 */
google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map_canvas"style="width : 600px; height : 400px;"></div>

これで横600ピクセル、縦400ピクセルのGoogleMapが表示されます。
座標指定した位置にマーカーが表示され、そこを中心で指定サイズで表示されます。

2015年7月10日

画像サムネイルを書き出す方法

ラベル: CustomField, mt

カスタムフィールドで画像を指定した際にサムネイルを書き出す方法です。

横幅150pxのサムネイル

<MT:ImageAssets>
<img src="<$MT:AssetThumbnailURL width="150"$>" alt="<$MTEntryTitle$>" />
<MT:ImageAssets>

正方形のサムネイル

<MT:ImageAssets>
<img src="<$MT:AssetThumbnailURL width="90" square="1"$>" alt="<$MT:EentryTitle$>" />
</MT:ImageAssets>

縦か横が100pxのサムネイルを書き出す

<MT:ImageAssets>
<MT:SetVarBlock name="photo_width"><$MT:AssetProperty property="image_width"$></MT:SetVarBlock>
<MT:SetVarBlock name="photo_height"><$MT:AssetProperty property="image_height"$></mt:SetVarBlock>
<MT:If name="photo_width" gt="$photo_height"$>
    <MT:SetVar name="photo_height" op="/" value="$photo_width">
    <MT:SetVar name="photo_height" op="*" value="100">
    <img src="<$MT:AssetThumbnailURL width="100"$>" width="100" height="<$MT:Var name="photo_height" op="+" value="0.5" sprintf="%d"$>" alt="" />
<MT:Else>
    <MT:SetVar name="photo_width" op="/" value="$photo_height">
    <MT:SetVar name="photo_width" op="*" value="100">
    <img src="<$mt:AssetThumbnailURL height="100"$>" width="<$mt:Var name="photo_width" op="+" value="0.5" sprintf="%d"$>" height="100" alt="" />
</MT:If>
</MT:ImageAssets>

画像の横幅が500px以下ならそのまま表示
画像の横幅が500px以上なら縮小して表示

<MT:ImageAssets>
<MTSetVarBlock name="imageWidth"><MT:AssetProperty property="image_width"></MT:SetVarBlock>
<MT:If name="imageWidth" gt="500"><MT:SetVar name="imageWidth" value="500"></MT:If>
<img src="<$MT:AssetThumbnailURL width="$imageWidth"$>" alt="<$MT:EntryTitle$>" />
<MT:ImageAssets>

ライトボックスでサムネイル

<MT:ImageAssets>
<a href="<$MT:AssetThumbnailURL$>" rel="lightbox[photo]"><img src="<$MT:AssetThumbnailURL width="90" square="1"$>" alt="<$MT:EentryTitle$>F /></a>
</MT:ImageAssets>

※元画像の横幅（縦幅）を指定したい場合は2行目 href="<$MT:AssetThumbnailURL$>" にwidth(height)を指定する。

2015年6月25日

カスタムフィールドで画像を表示

ラベル: CustomField, mt

何にもせずに、画像のカスタムフィールドを設定すると下記になってしまいます。

HTML

<mt:If tag="カスタム名">
イメージ01: <mt:カスタム名>
</mt:If>

表示

イメージ01：カスタムでアップしたファイル名
リンクになってしまいます。

 

画像を表示させるには、下記の記載にしないといけません。

HTML

<MTIf tag="カスタム名">
<MTカスタム名Asset>
<$MTAssetThumbnailLink width="200"$>
</MTカスタム名Asset>
</MTIf>

これの場合は、画像をサムネールで200ｐｘで表示し、元画像サイズへのリンクを貼った状態です。
リンクが不要な場合は、下記の記載にすればリンクされずに表示できます。

HTML

<MTIf tag="カスタム名">
<MTカスタム名Asset>
<p><img src="<$MTAssetThumbnailURL width="960" $>" /></p>
</MTカスタム名Asset>
</MTIf>

2013年9月26日

レンタルサーバって、何処が一番いいのだろうか？

ラベル: mt, Server

MovableTypeやWordPressでのサイト作成をする場合、
どうしてもプロバイダのWebスペースではDBが作成できないとかの制限があり
レンタルサーバが必要となります。

皆さんは、何処のレンタルサーバを使ってますか？

1私は、仕事で多くのサイトを運営する場合は、
まずは15日間【無料】お試し利用から！大容量200.71GBレンタルサーバー『HETEML』を使っていますね

あとは、さくらインターネットやカゴヤ・インターネットとかも使いますが
マルチドメインも出来るし、DBの数や容量は、他に負けないと思います。

ちょっぴり料金は、高いと思いますが複数サイトの運営をする場合にはもってこいだと思います。

まずは15日間は無料で試せるから触って見ては、どうでしょうか？

png対策（IE6）

ラベル: html, IE6, js, mt, png

IE6でpngを使うと透明部分が青く表示されて、透けてみえません。

hackなどで対応させる方法があるのですが、
他とバッティングしてうまく行かない場合もあります。
それでも透明処理をしたい場合にこれを使います。

続きを読む →

2013年8月30日

Movable Typeでsitemap.xmlを自動出力するための手順（変更）

ラベル: mt

以前に作っていた物が何かおかしかったので変更しました。

デザイン>>テンプレート>>インデックステンプレート
インデックステンプレートを作成
テンプレート名、sitemap
下記の「インデックステンプレートに貼り付ける内容」を挿入
テンプレートの設定>>出力ファイル名>>sitemap.xmlと入力
保存⇒再構築を行なう

続きを読む →

2013年8月8日

prototype版のLightboxを使っている方、注意！！

ラベル: js, mt

IE9以降でprototype.js版のlightboxが機能しないことがあります。

その対処方として、２つの方法があります。

jQuery版のlightboxに変更する
prototype.jsを最新版に変更する。

どちらが楽かと言うとprototypeを最新に変更する方ですね
※prototype.jsのダウンロードはこちらから。

個人的には、他のJSの絡みを考えるとjQuery版にすることをオススメします。

Movable Typeでsitemap.xmlを自動出力するための手順（変更）

ラベル: mt

以前に作っていた物が何かおかしかったので変更しました。

デザイン>>テンプレート>>インデックステンプレート
インデックステンプレートを作成
テンプレート名、sitemap
下記の「インデックステンプレートに貼り付ける内容」を挿入
テンプレートの設定>>出力ファイル名>>sitemap.xmlと入力
保存⇒再構築を行なう

続きを読む →

2013年7月11日

MTの記事でサムネールを使った時のLightbox

ラベル: js, mt

MTでエントリーなどで画像を配置する際にサムネールを使う場合があります。

通常は、サムネールで配置した場合、クリックした時点で次ページ扱いで画像が読み込まれます。
戻るには、ブラウザの戻るボタンを押す必要があり、間違ってサイトを閉じてしまうこともあります。

それを解消するのがJQuery版Lightboxというモノです。

詳しくは、上記を参照してください。

私的メモ

ログインして確認する　→　ログイン
JQuery版Lightbox

2013年6月27日

ページャその後

ラベル: mt

今までは、PageButeを使っていたのですが
動的には対応してないので調べてみるとありましたね

<MTEntries>
　・
　・
　・
</MTEntries>

続きを読む →

2013年6月21日

JSでお手軽ホバー（hover）

ラベル: mt

CSSだけでも出来るのだけど面倒な時は、これでいいかな？

hoverする画像に「xxxx_off.gif」と「xxxx_on.gif」の２種類の画像を準備する
あとJSを読み込み普通にリンクするだけ

続きを読む →

2013年6月14日

サイトマップ

ラベル: mt

<ul>
<li><a href="/">トップページ</a></li>
<mt:IfArchiveTypeEnabled archive_type="Page">
<ul><mt:TopLevelFolders sort_by="user_custom"><mt:Pages tag="NOT nolist">
<li>
<a href="<$mt:PagePermalink$>"><$mt:PageTitle remove_html="1"$></a>
</li>

<MTIfFolder>
<MTSubFolders sort_by="user_custom">
<mt:Pages tag="NOT nolist">
<li style="margin-left:20px;"><a href="<$mt:PagePermalink$>"><$mt:PageTitle remove_html="1"$></a></li>
</mt:Pages>
</MTSubFolders>
</MTIfFolder>

</mt:Pages></mt:TopLevelFolders></ul>
</mt:IfArchiveTypeEnabled>

</ul>

グローバルナビ等をアクティブ化

ラベル: js, mt

これは、MTでのグローバルナビ等をアクティブ化を行う為の設定です。

「jquery.min.js」は、必要なので読み込みます。

「メインインデックス」にアクティブは不要なので
<mt:Unless name="main_index">であるかの分岐
ウェーブページかの分岐
<mt:If name="archive_class" eq="page-archive">～
ブログかの分岐
<mt:Else>
</mt:If>の閉じ
</mt:Unless>の閉じ

HTML側は、
<ul>
<li><a id="フォルダーパス名" href="リンク先">リンク</li>
</ul>

CSS

<script type="text/javascript" src="/js/jquery.min.js"></script>
<mt:Unless name="main_index">
<mt:If name="archive_class" eq="page-archive">
<script type="text/javascript">
    $(function(){
        $('a#'+'<$mt:FolderPath$>').addClass("here");
    });
</script>
<mt:Else>
<script type="text/javascript">
    $(function(){
        $('a#'+'blog<$MTBlogID$>').addClass("here");
    });
</script>
</mt:If>
</mt:Unless>

HTML

<ul>
<li><a id="フォルダーパス名" href="リンク先">リンク</li>
</ul>

2013年6月11日

MovableType 5.2.6の提供開始

ラベル: mt

MovableTypeがマイナーバージョンアップしましたね

今回は、下記の様な点が変わったみたいですよ
http://www.movabletype.jp/blog/movable_type_526.html

スマートフォン用に最適化された管理画面

狭いスマートフォンの画面の中で、利用頻度の高い機能だけをコンパクトなメニューにまとめて、見やすく操作しやすく最適化された管理画面。
従来のフル機能の管理画面へ随時切り替えることも可能。

◆スマートフォン用ページ作成テンプレート

スマートフォンだけでじゃなく各デバイスに対して最適化された画面表示する

「レスポンシブWebデザイン」のデザインテンプレート「Eiger」を新たに提供。

MTOSも5.2.6がダウンロード出来るみたいです。
http://www.movabletype.jp/opensource/mtosdl.html

仕事では、AnotherCustomFieldsを使う事があるので
まだ以前のバージョン5.2.3での構築になると思うのですが
時間があれば、プラグインが使えるか検証するために入れてみます。

2013年5月29日

ここ再開したら登録してみようかな

ラベル: mt, Server

今、MTをメインで使っているので正直WordPressが・・・

これからは、WordPressも使っていきたいと思うのだけど、勉強用にサーバを準備するのも・・・

そこで見つけたのがココ

freeweb

現在、登録できない状態ですが回復を待って、登録してみよう

追記

こっちが良い感じなので登録した

wkey.me
https://wkey.me/index.php
無料で広告無し！WordPressも設置できるレンタルサーバー『wkey.me』
http://ichitaso.com/wordpress/free-web-server-wkeyme/

PHPメールフォーム　一部共通化

ラベル: mt, php

以前に書いた「PHPメールフォーム」も使えるのですが
「confirm.html」と「result.html」を共通化する為のモノです。

ウェブページ

お問い合わせフォームは、同じ様にウェブページで作成します。
この時にフォルダを作り「index.html」としておきます。
【注意】action="confirm.php" → action="confirm.html"
空ページに「confirm.html」と「resilt.html」を作成する
sendmailは、各「sendmail」フォルダ内に「○○○○.php」で作る

続きを読む →

登録: 投稿 (Atom)

2015年12月9日

2015年12月3日

2015年7月22日

2015年7月10日

カスタムフィールドで画像を指定した際にサムネイルを書き出す方法です。

横幅150pxのサムネイル

正方形のサムネイル

縦か横が100pxのサムネイルを書き出す

画像の横幅が500px以下ならそのまま表示画像の横幅が500px以上なら縮小して表示

ライトボックスでサムネイル

2015年6月25日

2013年9月26日

2013年8月30日

2013年8月8日

2013年7月11日

2013年6月27日

2013年6月21日

2013年6月14日

2013年6月11日

MovableTypeがマイナーバージョンアップしましたね

スマートフォン用に最適化された管理画面

◆スマートフォン用ページ作成テンプレート

2013年5月29日

無料で広告無し！WordPressも設置できるレンタルサーバー『wkey.me』http://ichitaso.com/wordpress/free-web-server-wkeyme/

ドメインって、早い者勝ちですよ！

画像の横幅が500px以下ならそのまま表示
画像の横幅が500px以上なら縮小して表示

無料で広告無し！WordPressも設置できるレンタルサーバー『wkey.me』
http://ichitaso.com/wordpress/free-web-server-wkeyme/