Bootstrap v3.1.1がリリースされています。

これに伴い、以下のテーマのBootstrapをv3.0.2からv3.1.1にアップデートしました。

スマートフォン・タブレット端末対応 Movable Type 6 テーマ(テンプレート) Bootstrap HTML5

スマートフォン・タブレット端末対応 Movable Type 6 テーマ(テンプレート) Bootstrap HTML5

jQueryはGoole Codeからcode.jquery.comの最新(1.11.0)に変更しています。よろしくお願いします。

Posted

空要素は /> で閉じるのですか? それとも > で閉じるのですか?

HTML の空要素(たとえば、br, img, input 要素)に終端スラッシュをいれる必要はありません。<br />の代わりに<br> と書けば良いだけです。これは HTML4 と同じです。しかし、XHTML1 の利用が広まっているため、かなり多くのページで、終端スラッシュが使われています。

WHATWG FAQ - 日本語訳 - HTML5.JP

Movable Typeのテンプレートタグ MTCanonicalLinklink rel="canonical"としてURLが出力される。link要素の終端スラッシュが少し気持ち悪いので置換を使って削除した。

<$mt:CanonicalLink replace=" /",""$>

終端スラッシュなし

Posted

BootstrapでのPaginationは以下のようにマークアップを行う

<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>

Movable Type テンプレートタグで書き換える

<div class="pagination">
<ul>
 
<mt:IfPreviousResults>
<li><a href="<$mt:PreviousLink$>" rel="prev" onclick="return swapContent(-1);">&laquo;</a></li>
</mt:IfPreviousResults>
 
<mt:PagerBlock>
<mt:IfCurrentPage>
<li class="active"><a href="#"><$mt:Var name="__value__"$></a></li><mt:Else><li><a href="<$mt:PagerLink$>"><$mt:Var name="__value__"$></a></li>
</mt:IfCurrentPage>
</mt:PagerBlock>
 
<mt:IfMoreResults>
<li><a href="<$mt:NextLink$>" rel="next" onclick="return swapContent();">&raquo;</a></li>
</mt:IfMoreResults>
 
</ul>
</div>
出力例
Pagination
Posted

当サイトよりダウンロードして頂いていたhtml5slidesプレゼンテーションテンプレートをGitHubに移動しました。

現在、それぞれのページの「ダウンロード」ボタンはGitHubのリポジトリにリンクしています。

html5slidesプレゼンテーションテンプレート
GitHub上のhtml5slidesプレゼンテーションテンプレート

よろしくお願いします。

Posted

Bootstrap v3.1.0がリリースされています。

Bootstrap
Bootstrap

これに伴い、以下のテーマのBootstrapをv3.0.3からv3.1.0にアップデートしました。

前回通りBootstrap CDNを利用、html5shiv.js・respond.min.jsもCDNに変更しています。

よろしくお願いします。

Posted

これまでアクセス解析には個人アカウントのGoogle AnalyticsとResearch Artisan Liteを使ってきた。

Movable Type 6からはダッシュボードやloupeでアクセス解析表示できるので、Google Analytics の連携 : Movable Type 6 ドキュメントを参考にGoogle Appsのドメインアカウントで設定した。

Google Analytics の連携

はじめの「ページ上部のナビゲージョンから [システム]、ウェブサイトあるいはブログ を選択する」をGoogle API Consoleで探しMovable Typeのダッシュボードと気づくまでに時間がかかったり、GoogleのUIが変わっているので少々迷う

サイトで利用しているMovable Typeの設定は簡単に終了したが、デモ用のテーマなど385個ものブログのトラッキングコード張替えは大変。2日がかりで完了。データは正しく取れている模様

Posted

Mavericksへのアップデートに伴いローカルの開発環境も入れ替えしたかったが途中でエラーが発生し、放置していた。休暇中にMovable Typeを動かす設定ができたので覚書

インストールの手順

Mac App StoreからXcodeをインストールする

Command Line Developer Toolsをインストール

xcode-select --install

MAMPのダウンロードとインストール

MacPortsのダウンロードとインストール

MacPortsの初期化

echo 'export PATH=$PATH:/opt/local/bin:/opt/local/sbin/' >> ~/.bashrc
echo 'export MANPATH=$MANPATH:/opt/local/man' >> ~/.bashrc
echo 'source ~/.bashrc' >> ~/.bash_profile
sudo port -d selfupdate
sudo port -d sync

ImageMagickなどのインストール(*ここ、1時間くらいかかります!)

sudo port install ImageMagick +perl

ImageMagickのインストールでエラー発生したがGDで代用するつもりで、そのまま次に

PerlのパスをMacPortsのインストールディレクトリへ変更

cd /usr/bin/
sudo mv perl perl.bak
sudo ln -s /opt/local/bin/perl /usr/bin/perl

DB関連モジュールのインストール

sudo port install p5-dbi
sudo port install p5-dbd-mysql
sudo port install p5-dbd-sqlite
sudo port install p5-dbd-sqlite2

オプションモジュールのインストール

sudo port install p5-gd
sudo port install p5-crypt-dsa
sudo port install p5-archive-zip
sudo port install p5-xml-atom
sudo port install p5-mail-sendmail

FTPクライアントを使って.htaccessを追加

Options +ExecCGI
AddType application/x-httpd-cgi .cgi .pl
MAMP
Posted

Google Analytics のユーザープロファイルを設定すると、ダッシュボードの [サイト情報] にウェブサイト / ブログのアクセス統計グラフを表示する事ができます。

Google Analytics の連携

Google Analytics の連携

Google AnalyticsのUIが変わっていたので少し迷ったけれども、Google側で設定。Movable TypeでClient IDとClient secret を入力してみるとエラーが出たので「Authorized Redirect URIs」を正しく設定するとエラーが消えて設定完了。

バナーフッターモジュールに<$mt:StatsSnippet$>を追加。意外と簡単でした

当サイトで販売しているMT6テーマのバナーフッターモジュールには<$mt:StatsSnippet$>を記述していますので、上記設定を行い再構築すればすぐにデーターを取ることが出来ます。

Posted

Movable Type 6よりウェブサイトに記事を作成できるます。アットスタイルのテーマは、記事がある前提でテーマを作成しておりましたが、Movable Type 5からアップグレードされたサイトなどではウェブサイトに記事はありません。このような構成のサイトに利用できるサイトマップテンプレート(sitemap.mtml)を追加いたしました。

ウェブサイトに記事がない

サイト構成によって選択利用してください。

Posted

FontAwesomev4.0.3がリリースされています。

FontAwesome
FontAwesome

これに伴い、Movable Type テーマのFontAwesomeをv4.0.1からv4.0.3にアップデートしました。

アップデートしたテーマは以下のとおりです。

  • Movable Type 6用テーマ211以降
  • Movable Type 5用テーマ105以降

よろしくお願いします。

Posted

本日、Movable Type 6 テーマ(テンプレート) Bootstrap HTML5をバージョン1.0より、バージョン1.1にアップデートいたしました。 主にパンくずやフォルダの部分ですが、変更した内容は以下のとおりです。

ウェブサイト
  • ウェブページのパンくずリストにフォルダを表示可能に
  • サイドバーのウェブページリストを階層表示可能に
  • サイドバーのカテゴリリストを一階層下げる
  • サイトマップのウェブページリストを階層表示可能に
  • 記事の投稿者情報(メタ)部分のマークアップ修正
ブログ
  • ウェブページのパンくずリストにフォルダを表示可能に
  • 記事の投稿者情報(メタ)部分のマークアップ修正

デモサイトは既にバージョンアップしたものに変更しています。

スマートフォン・タブレット端末対応 Movable Type 6 テーマ(テンプレート) Bootstrap HTML5
スマートフォン・タブレット端末対応 Movable Type 6 テーマ(テンプレート) Bootstrap HTML5
Posted

MTCafe Fukuoka 2013 Winter ~Movable Typeの"今"と"可能性"を知るセミナー~無事終了しました。たくさん方のご参加ありがとうございました!

MTCafe Fukuoka 2013 Winter

トフ

高山さん

尼口さん

松本さん

私

米家さん

私も少しだけお話させていただきました。当日のスライドは公開しています。

当日のスライド

Posted

SYNCK GRAPHICAさんの【メールフォームCGI Jcode版】を利用してBootatrapテーマ用メールフォームの実装テストを行っています。

Movable Type 5までのテーマでは、5年ほど前のメールフォームCGIを使用していましたが、今回より現行のメールフォームに変更の予定で、すでにお問い合わせ部分のマークアップは完了しました。

お問い合わせフォーム
Bootatrapテーマでのお問い合わせフォーム

ビジネス向けテーマにご期待ください。

Posted

MTCafe Fukuoka 2013 Winter ~Movable Typeの"今"と"可能性"を知るセミナー~ の定員30名がまもなく一杯となりそうです。

概要

日時
2013年12月7日 13時 から 17時30分
定員
30人
受付期間
2013年11月16日 0時 から 2013年12月6日 12時
参加費
500円
場所
OnRAMP セミナールーム
福岡県福岡市天神1-10-24 天神セントラルプレイス 2F
http://onramp.jp/

私も登壇させていただくかもしれません。

お申し込みは Zusaar で!

Zusaarで申し込み!

懇親会は別途Zusaarで参加表明お願いします。

MTCafe Fukuoka 2013 Winter

Posted

レスポンシブデザインで利用出来るスライダーFlexSlider 2を使って、Movable Type 6のアイテムでカルーセルを作る。以下、覚書

FlexSlider 2から一式をダウンロード

FlexSlider 2

zipを解凍

解凍後のfolder

今回はベーシックなカルーセル「Basic Carousel」を使用する。どれも基本的にはulでマークアップしてJavascriptとCSSを読み込ませるとOK

Movable Type 6での利用が前提なので、ちょっとゴニョゴニョ

fontsフォルダはルートにアップロード

CSSの出力先変更を可能にするため、flexslider.cssを以下のように変更

修正前26行目

@font-face {
    font-family: 'flexslider-icon';
    src:url('fonts/flexslider-icon.eot');
    src:url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
        url('fonts/flexslider-icon.woff') format('woff'),
        url('fonts/flexslider-icon.ttf') format('truetype'),
        url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
    font-weight: normal;
    font-style: normal;
}

修正後26行目

@font-face {
    font-family: 'flexslider-icon';
    src:url('<$mt:WebsiteURL$>fonts/flexslider-icon.eot');
    src:url('<$mt:WebsiteURL$>fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
        url('<$mt:WebsiteURL$>fonts/flexslider-icon.woff') format('woff'),
        url('<$mt:WebsiteURL$>fonts/flexslider-icon.ttf') format('truetype'),
        url('<$mt:WebsiteURL$>fonts/flexslider-icon.svg#flexslider-icon') format('svg');
    font-weight: normal;
    font-style: normal;
}

インデックステンプレートにflexslider_cssとして作成する

同様に、インデックステンプレートにjquery.flexslider-min.jsをjquery_flexslider_min_jsとして作成する

ウェブサイトのメインページに追加記述する

CSSへのリンク

<link rel="stylesheet" href="<$mt:Link template="flexslider_css"$>">

画像リスト

<div class="flexslider carousel">
<ul class="slides">
<$mt:Setvar name="counter" value="0"$>
<mt:Entries lastn="0" include_blogs="children" include_with_website="1">
<mt:EntryAssets type="image" lastn="1">
<$mt:Setvar name="counter" op="++"$>
<mt:SetVarBlock name="EntDate"><$mt:EntryDate format_name="iso8601"$></mt:SetVarBlock>
<mt:SetVarBlock name="EntryLink[$counter]"><$mt:EntryPermalink$></mt:SetVarBlock>
<mt:SetVarBlock name="ImageCode[$counter]"><img src="<$mt:AssetThumbnailURL height="200" square="1"$>" alt="<$mt:EntryTitle$>" title="「<$mt:EntryTitle$>」on「<$mt:BlogName$>」" width="200" height="200"></mt:SetVarBlock>
</mt:EntryAssets>
<mt:SetHashVar name="Compare"><mt:SetVarBlock name="$EntDate"><a href="<mt:GetVar name="EntryLink[$counter]">"><mt:GetVar name="ImageCode[$counter]"></a></mt:SetVarBlock></mt:SetHashVar>
</mt:Entries>
<mt:Setvar name="CountB" value="0"><mt:If name="counter" ge="1">
<mt:Loop name="Compare" sort_by="key reverse"><mt:If name="CountB" lt="10"><mt:Setvar name="CountB" op="++">
<li><mt:GetVar name="__value__"></li></mt:If>
</mt:Loop>
</ul>
</mt:If>
</div>

Javascript

<script src="<$mt:Link template="jquery_flexslider_min_js"$>"></script>
<script>
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5
  });
});
</script>

完成

完成したカルーセル

注意

  • 200pxのため、変更する場合は200の箇所を書き換える
  • itemWidth: 210,は200+5+5
Posted

2013年10月にメジャーバージョンアップしたばかりのMovable Type 6の最新情報、そしてMTとECサイト、そのブランティング、MTの活用事例などの講演を行います。

30名と少数での開催なのでお早めに!

概要

日時
2013年12月7日 13時 から 17時30分
定員
30人
受付期間
2013年11月16日 0時 から 2013年12月6日 12時
参加費
500円
場所
OnRAMP セミナールーム
福岡県福岡市天神1-10-24 天神セントラルプレイス 2F
http://onramp.jp/

プログラム(予定)

13:00
ご挨拶
13:20
ゲストセッション(シックス・アパート株式会社 Movable Type リードエンジニア 高山様)
14:20
ゲストセッション(株式会社ネットコンシェルジェ 代表 尼口様)
15:20
ゲストセッション(調整中)
16:20
MT福岡よりセッション
17:20
抽選会 & ご挨拶

18時より別会場にて、懇親会を企画しております。

お申し込みは Zusaar で!

Zusaarで申し込み!

MTCafe Fukuoka 2013 Winter

Posted

先日、v3.0.1へアップデートしたばかりですが、Bootstrap v3.0.2がリリースされています。

Bootstrap
Bootstrap

これに伴い、以下のテーマのBootstrapをv3.0.1からv3.0.2にアップデートしました。

Movable Type 6 テーマ(テンプレート) Bootstrap HTML5
Movable Type 5(MTOS 5)テーマ(テンプレート) Bootstrap HTML5

よろしくお願いします。

Posted

Bootstrap v3.0.1がリリースされています。

Bootstrap
Bootstrap

これに伴い、以下のテーマのBootstrapをv3.0.0からv3.0.1にアップデートしました。

Movable Type 6 テーマ(テンプレート) Bootstrap HTML5
Movable Type 5(MTOS 5)テーマ(テンプレート) Bootstrap HTML5

よろしくお願いします。

Posted

先日、Font AwesomeのVersion 4.0.1がリリースされました。

Font Awesome
Font Awesome

これに伴いMovable Type 6 テーマ(テンプレート) Bootstrap HTML5 205Movable Type 6 テーマ(テンプレート) Bootstrap HTML5 206のテーマをFont Awesome Version 4.0.1に対応させて、別のテーマとしてリリースしました。

211以降はFont Awesome 4.0.1になりますので、よろしくお願いします。

Posted

Bootstrapを利用したテーマ「スマートフォン・タブレット対応 Movable Type 6 テーマ(テンプレート) Bootstrap HTML5 205」をリリースしました。

スマートフォン・タブレット対応 Movable Type Movable Type 6 用テーマ(テンプレート) Bootstrap HTML5 205
スマートフォン・タブレット対応 Movable Type Movable Type 6 用テーマ(テンプレート) Bootstrap HTML5 205

前回の206と順序が逆のリリースとなりましたが、今後201までさかのぼりたいと思っています。

よろしくお願いします。

Posted