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

Movable Type 6 無料テーマ Bootstrap 01のナビゲーションバーをFixed navbarにカスタマイズする

Movable Type 6 無料テーマ Bootstrap 01」のナビゲーションバーを、Bootstrapのサンプルにも掲載されているFixed navbarにカスタマイズする方法をご紹介します。

Bootstrap サンプルのFixed navbar

バナーヘッダー(banner_header.mtml)を以下の内容に変更します

<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<header role="banner">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<$mt:Link template="メインページ"$>"><$mt:BlogName$></a>
</div>
<nav class="navbar-collapse collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href="<$mt:Link template="メインページ"$>">Home</a></li>
<mt:Pages tag="@about">
<li><a href="<$mt:PagePermalink$>"><$mt:PageTitle$></a></li>
</mt:Pages>
<mt:Pages tag="@ADD_TO_SITE_NAV">
<li><a href="<$mt:PagePermalink encode_html="1"$>"><$mt:PageTitle$></a></li>
</mt:Pages>
<li><a href="<$mt:Link template="最新記事のフィード"$>">Feed</a></li>
</ul>
</nav>
</header>
</div>
</div>
<div class="container">
<header class="blog-header" role="banner">
<h1 class="blog-title"><$mt:BlogName encode_html="1"$></h1>
<p class="lead blog-description"><$mt:BlogDescription$></p>
</header>
<div class="row">

custom_for_mt_css(custom_for_mt_css.mtml)に以下を追加します。

body {
    padding-top: 40px;
}

再構築し完成です。

Fixed navbar

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

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

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

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

オープングラフ(OGP)用の og_image.png

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

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

実際にシェアされた記事

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

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

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

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

@ADD_TO_SITE_NAV を指定

ナビゲーションに追加されたウェブページ

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

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

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

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

Font Awesome

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

「fonts」フォルダ

ダッシュボードから「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」をリリースしました。

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

Movable Type 6 無料テーマ Bootstrap 01
Movable Type 6 無料テーマ Bootstrap 01

プレゼンテーションテンプレートと同様に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 テーマのBootstrapをv3.0.2からv3.1.1にアップデートしました

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)に変更しています。よろしくお願いします。

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

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

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

WHATWG FAQ - 日本語訳 - HTML5.JP

Movable Typeのテンプレートタグ MTCanonicalLinklink 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>
出力例
Pagination

html5slidesプレゼンテーションテンプレートをGitHubに移動しました

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

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

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

よろしくお願いします。

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

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

Bootstrap
Bootstrap

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

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

よろしくお願いします。

Google AnalyticsをMovable Typeと連携

これまでアクセス解析には個人アカウントの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日がかりで完了。データは正しく取れている模様

MAMPを使ってMac OS X 10.9 Mavericks へMovable Typeをインストール(覚書)

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

Movable Type 6のGoogle Analytics連携を行ってみた

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

Google Analytics の連携

Google Analytics の連携

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

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

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

「ウェブサイトに記事をつくらない」場合に利用するサイトマップテンプレートを追加

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

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

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

Movable Type 6 テーマ(テンプレート) Bootstrap HTML5をバージョンアップしました

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

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

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

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

MTCafe Fukuoka 2013 Winter終了しました

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

MTCafe Fukuoka 2013 Winter

トフ

高山さん

尼口さん

松本さん

私

米家さん

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

当日のスライド