2015年7月22日

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





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日

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

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


横幅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日

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

何にもせずに、画像のカスタムフィールドを設定すると下記になってしまいます。
 
HTML
<mt:If tag="カスタム名">
イメージ01: <mt:カスタム名>
</mt:If>
表示
イメージ01:カスタムでアップしたファイル名
リンクになってしまいます。
 
画像を表示させるには、下記の記載にしないといけません。
 
HTML 
<MTIf tag="カスタム名">
<MTカスタム名Asset>
<$MTAssetThumbnailLink width="200"$>
</MTカスタム名Asset>
</MTIf>
これの場合は、画像をサムネールで200pxで表示し、元画像サイズへのリンクを貼った状態です。
リンクが不要な場合は、下記の記載にすればリンクされずに表示できます。

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

2013年9月26日

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

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

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

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

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

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

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

png対策(IE6)

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

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

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