タグ「Template」が付けられているもの

Movable Type 6 無料テーマ Bootstrap 01にog:imageを設定する

「Movable Type 6 無料テーマ Bootstrap 01」は、幾つかのOGPが自動的に出力されますが、テーマインストール時にog:imageの設定を行って下さい。

まずブログ全体のog:imageを設定します。手動でFTPする方法とMovable Typeのアイテムを利用する方法があります。

og:imageをFTPアップロードする方法

「blogimg」フォルダの中にあるオープングラフ(OGP)用の og_image.png を参考に画像を作成して上書きします。
公開するディレクトリへ「blogimg」フォルダごとアップロードします。

og:imageをMovable Typeのアイテムとしてアップロードする方法

サイドメニューから [アイテム] - [新規] を選択します。
[ファイルを選択] ボタンをクリックして、画像をアップロードします。
アイテム一覧から、アップロードした画像アイテムを選択して、[アクション] - [タグを追加] を行います。
表示されたポップアップウィンドウに、@SITE_ICON を指定します。

記事アーカイブでは、記事に関連付けされた画像アイテムが、優先的に利用されます。複数の画像アイテムが存在する場合は、最新の画像アイテムが採用されます。

Movable Type 6 無料テーマ Bootstrap 01に新しいナビゲーションメニューを追加する

「Movable Type 6 無料テーマ Bootstrap 01」はRainierやApexと同様にウェブページをナビゲーションメニューに追加することが出来ます。

今回のカスタマイズは、その方法をご紹介します。

サイドメニューから [ウェブページ] - [新規] を選択します。
「タイトル」「本文」「続き」に内容を入力し、タグとして @ADD_TO_SITE_NAV を指定し、ウェブページを公開します。
再構築します。

ナビゲーションに「タイトル」がそのまま表示されるのでご注意下さい。

Movable Type 6 無料テーマ Bootstrap 01にFont Awesomeのアイコンを追加する

「Movable Type 6 無料テーマ Bootstrap 01」はシンプルに使っていただきたかったのでFont Awesomeのアイコンを実装しておりません。簡単に追加することが出来ますのでご紹介します。

Font Awesomeのサイトから一式をダウンロードします。

ダウンロードしたファイルを解凍し、「fonts」フォルダをMovable Typeで指定した「ブログURL」直下へアップロードします。

ダッシュボードから「HTMLヘッダー」（html_head.mtml）を開き、Custom styles for Movable Typeの下辺りに次の様に記述します。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">

テンプレートや記事のお好きな場所に以下の記述を追加して、アイコンを表示できます。

<i class="fa fa-アイコンの名前"></i>

例えば上部ナビゲーションバーにホームアイコンを追加する場合は「バナーヘッダー」モジュール（banner_header.mtml）を開き、5行目の記述

<a href="<$mt:BlogURL$>" class="blog-nav-item">Home</a>

を、以下のように書き換えます。

<a href="<$mt:BlogURL$>" class="blog-nav-item"><i class="fa fa-home"></i> Home</a>

Movable Type 6 無料テーマ Bootstrap 01をアップデートしました

先日リリースしました「Movable Type 6 無料テーマ Bootstrap 01」の「記事」テンプレートと「記事の概要」モジュールを修正しました。

どちらにもmicroformats 2の記述を一部追加しています。

よろしくお願いします。

Movable Type 6 無料テーマ Bootstrap 01をリリースしました

先日より作成を行っていた「Movable Type 6 無料テーマ Bootstrap 01」をリリースしました。

大画面では2カラム（右サイドバー）スマートフォンなどの小さい画面では1カラムで表示出来るBootstrap謹製のBlog templateをベースに Movable Type 標準のテーマ「Rainier」で実装されたオープングラフ(Open Graph Protocol)や Microdata、構造化データ、ページネーションを加味し、レスポンシブデザインのテーマに仕上げました。

プレゼンテーションテンプレートと同様にGitHubからのダウンロードをお願いいたします。

ご利用下さい。

Bootstrap謹製ブログテンプレートを利用したMovable Type 6用のテーマ作成中

Bootstrapには入門用に幾つかの基本テンプレートが用意されている。

Build on the basic template above with Bootstrap's many components. See also Customizing Bootstrap for tips on maintaining your own Bootstrap variants.

Getting started · Bootstrap

この中にブログ用のテンプレートもある。

The official example template of creating a blog with Bootstrap.

このテンプレートを使ってMovable Type 6用のテーマ作成中。現在のところ、メインページと記事のページは完成。

作成中のテーマ — Bootstrap謹製ブログテンプレートを利用したMovable Type 6用のテーマ

公開には、もう少し時間がかかると思います。

Movable Type 6 ベーステーマのBootstrapをv3.1.0からv3.1.1にアップデートしました

先日のBootstrap アップデートに続き、以下のテーマのBootstrapをv3.1.0からv3.1.1にアップデートしました。

スマートフォン・タブレット端末対応ビジネス向けMovable Type 6 テーマ（テンプレート） Bootstrap HTML5

よろしくお願いします。

Movable Type テーマのBootstrapをv3.0.2からv3.1.1にアップデートしました

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

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

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

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

MTCanonicalLinkの出力から終端スラッシュを取り除く

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

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

WHATWG FAQ - 日本語訳 - HTML5.JP

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

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

Movable Typeの検索結果ページ送りをBootstrapのPaginationでマークアップする（覚書）

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>