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

Movable Type 5テーマ(テンプレート) Bootstrap HTML5の変更点

今回リリースの「Movable Type 5(MTOS 5) テーマ(テンプレート) Bootstrap HTML5 101」「Movable Type 5(MTOS 5) テーマ(テンプレート) Bootstrap HTML5 102」より、以下の2点を変更しております。

  • Bootstrapをバージョンアップして3.0.0に
  • ブログ記事のアーカイブマッピングをカテゴリ配下に

Bootstrap 2.3から3.0へのアップグレードについて

スタイルシートのみの変更で対応できません。アップグレードの際はテーマ全てを変更して下さい。

参考:Getting started · Bootstrap Migrating from 2.x to 3.0

ブログ記事のアーカイブマッピングについて

yyyy/mm/entryーbasename.拡張子
Bootstrap HTML5 テーマ 01から10まで
category/sub-category/entryーbasename/index.拡張子
Bootstrap HTML5 テーマ 101以降

カテゴリ配下のエントリーベースネームディレクトリのインデックス

category/sub-category/entry-basename/index拡張子

となって一層使いやすくなりました。

もちろん、テーマインストール時に自由に変更していただくことも可能です。

Bootstrap 3.0を採用した「Movable Type 5テーマ Bootstrap 101」をリリース

Bootstrap 3.0 にアップグレードした、スマートフォン・タブレット対応テーマ「Movable Type 5(MTOS 5) テーマ(テンプレート) Bootstrap 101」をリリースしました。

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

もちろん、Font Awesome・google-code-prettifyも実装済です。

よろしくお願いします。

Movable Type 6.0 RC1用 Bootstrapテーマ作成中

Movable Type 6.0 RC1がリリースされたのでBootstrap 06をベースにテーマを作成してみた。

ウェブサイトのメインページ
Movable Type 6.0 RC1用 Bootstrapテーマ ウェブサイトのメインページ
ウェブサイトの記事
Movable Type 6.0 RC1用 Bootstrapテーマ ウェブサイトの記事
サイトマップ
Movable Type 6.0 RC1用 Bootstrapテーマ サイトマップ

Movable Type 6.0 RC1用のため、公開・配布はいたしません。Bootstrap 3 へのアップグレードなどを行い、Movable Type 6.0 公開後にリリースの予定です。

Movable TypeにPinterestのPin It buttonを付ける

以下のページを参考に、現在のPin It buttonのコードに対応したものを書いてみた

Pinterest Image URL - Movable Type Forums

ボタンの掲載はブログ記事だけ、最後にアップロードした画像をPinしてもらうことにした。

標準で提供されるコード

<a href="//pinterest.com/pin/create/button/?url=「掲載ページのURL」&media=「画像のURL」&description=「概要」" data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>

Movable Typeのテンプレートタグで記述

<a href="http://pinterest.com/pin/create/button/?url=<mt:EntryPermalink>&amp;media=<mt:EntryAssets lastn="1" type="image"><mt:AssetURL encode_url="1"></mt:EntryAssets>&amp;description=<$mt:EntryTitle encode_html="1" strip="%20"$>" data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" alt="Pin it"></a>

9月15日追記:ブログ記事の概要からブログ記事のタイトルに変更しました。

GENE BERG JAPANさんのサイトにも付けたので、Boardを作ってみた

GENE BERG JAPAN - My Board

Bootstrap・MTOSで構築したGENE BERG JAPANを公開いたしました

予てからリニューアル作業を行っておりましたGENE BERG JAPANを本日公開いたしました

Bootstrap + FontAwesome + Movable Type Open Source を利用して短期間で制作いたしました。

GENE BERG JAPAN

VW乗りの間では知らない人はいないアメリカ・カリフォルニア州のオレンジカウンティにあるGENE BERGのパーツや空冷VWを専門に扱うマニアックな自動車専門店です。

Facebookページも公開しておりますので、何卒よろしくお願いします。

mtde.infoの変数系解説を掲載します

本日から少しずつmtde.infoの変数系解説をCode@Styleでご紹介いたします。

mtde.infoの変数系解説

以下の様にまだたくさんの有用な情報がありますので、出来る限り掲載するつもりです。

mtde.infoのカテゴリ

よろしくお願いします。

2014年1月23日追記:Code@Styleは閉鎖いたしました。ありがとうございました。

Movable Typeのリッチテキストエディタにbootstrap.cssとカスタマイズ用CSSを適用させる

サイトをMTOSで構築することになった。

サイトオーナー自身で更新作業になるため、なるべく簡単に出来るようAnotherCustomFieldsプラグインを使おうかとも思ったけれども、MT標準の「定型文」を使うことにした。

リッチテキストエディタにはオリジナルのスタイルシートを適用できるので、以下のようにリッチテキスト用のrich-text.cssを設定。

リッチテキストエディタにCSSを設定

読み込ませるスタイルシートは1つしか設定できないので、Bootstrapなどを利用する場合にやりにくい。そこでrich-text.cssに@importでbootstrap.min.cssとカスタマイズ用のcustom.cssの2つを読みこませる。

@import url("<$mt:Link template="bootstrap_min_css"$>");
@import url("<$mt:Link template="custom_css"$>");

完成した定型文

スタイルを変えたい場合には、カスタマイズ用のスタイルシート本体だけを弄ればOK!

MTDDC Meetup KYUSHU 2013 ライトニングトークのスライド

半年前のお話ですが、MTDDC Meetup KYUSHU 2013でライトニングトークに参加しました。

またまた見事に失敗したのですが、その時に「MT5で作るスライドについて」のスライドを作成しています。 ブログでも積極的にお知らせしておりませんでしたので、ご覧に合った方は少ないと思いまして、改めて公開URLをお知らせします。

Powered by Movable Type 5.2.3 ばい!

スライドで使用したテンプレートは無料配布しております。

よろしくお願いします。

BootstrapでのMovable Typeのコメントキャプチャを行儀よく

通常、会社案内や企業サイトの構築の際には装備することはあまりありませんが、テーマとしてリリースする場合にはコメントやトラックバックは必須です。

ところが、Bootstrapで作ったコメントフォームにMovable Typeのコメントキャプチャをそのまま入れてしまうとレイアウトがおかしくなってしまいます。

覚書(Code@Style)に掲載していますが、こちらでも紹介します

以下、Bootstrap 2.3での解説です。Bootstrap 3.0.0では利用できません。「Bootstrap 3.0でのMovable Typeのコメントキャプチャ」にて別途解説しています。

一般的にブログでは横並びのフォームを利用しますのでBootstrapコンポーネントを使用した場合はform-horizontalを用い、以下の様なマークアップになります。

<form class="form-horizontal">
<div class="control-group">
<label class="control-label">ラベル</label>
<div class="controls">
<input type="text" class="span3" placeholder="入力欄">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox">チェックボックス
</label>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn">Submit</button>
</div>
</form>

Bootstrap 横並びのフォーム

フォーム内に

<div id="comments-open-captcha"></div>

と記述するとキャプチャが表示されますが、このままじゃスタイルをあてにくいので、<div class="captcha"></div>で囲います。

<div class="captcha">
<div id="comments-open-captcha"></div>
</div>

コメントフォーム全体のコードは以下の通りです。

<form class="well form-horizontal" method="post" action="<$mt:CGIPath$><$mt:CommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">
<input type="hidden" name="static" value="1">
<input type="hidden" name="entry_id" value="<$mt:EntryID$>">
<input type="hidden" name="__lang" value="<$mt:BlogLanguage$>">
<input type="hidden" name="parent_id" value="<$mt:CommentParentID$>" id="comment-parent-id">
<input type="hidden" name="armor" value="1">
<input type="hidden" name="preview" value="">
<input type="hidden" name="sid" value="">
<div id="comments-open-data">
<div id="comment-form-name" class="control-group">
<label for="comment-author" class="control-label">名前</label>
<div class="controls">
<input type="text" class="span3" id="comment-author" name="author" size="30" tabindex="1" accesskey="n" value="" onfocus="mtCommentFormOnFocus()" placeholder="お名前">
</div>
</div>
<div id="comment-form-email" class="control-group">
<label for="comment-email" class="control-label">電子メール</label>
<div class="controls">
<input type="email" class="span4" id="comment-email" name="email" size="30" tabindex="2" accesskey="m" value="" onfocus="mtCommentFormOnFocus()" placeholder="電子メールアドレス">
</div>
</div>
<div id="comment-form-url" class="control-group">
<label for="comment-url" class="control-label">URL</label>
<div class="controls">
<input type="url" class="span4" id="comment-url" name="url" size="30" tabindex="3" accesskey="u" value="" onfocus="mtCommentFormOnFocus()" placeholder="ウェブサイトのURL">
</div>
</div>
<div id="comment-form-remember-me" class="control-group">
<label for="comment-bake-cookie" class="control-label">ログイン情報を記憶</label>
<div class="controls">
<input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="mtRememberMeOnClick(this)" onkeypress="mtRememberMeOnClick(this)" value="1" tabindex="4" accesskey="r">
</div>
</div>
</div>
<div id="comment-form-reply" style="display:none" class="control-group">
<label for="comment-reply" id="comment-reply-label" class="control-label"></label>
<div class="controls">
<input type="checkbox" id="comment-reply" name="comment_reply" value="" onclick="mtSetCommentParentID()" onkeypress="mtSetCommentParentID()" tabindex="5" accesskey="c">
</div>
</div>
<div id="comments-open-text" class="control-group">
<label for="comment-text" class="control-label">コメント
<mt:IfAllowCommentHTML>(スタイル用のHTMLタグを使えます)</mt:IfAllowCommentHTML></label>
<div class="controls">
<textarea id="comment-text" class="span4" name="text" rows="8" cols="50" onfocus="mtCommentFormOnFocus()" tabindex="6" accesskey="t" placeholder="コメントをどうぞ!"></textarea>
</div>
</div>
<div class="captcha">
<div id="comments-open-captcha"></div>
</div>
<div id="comments-open-footer" class="form-actions">
<input type="submit" class="btn" name="preview_button" id="comment-preview" value="確認" onclick="this.form.preview.value='1';" onkeypress="this.form.preview.value='1';" tabindex="7" accesskey="v">
<input type="submit" class="btn" name="post" id="comment-submit" value="投稿" tabindex="8" accesskey="s">
</div>
</form>

あとはCSSで調整。(これが非常に難しかった...)

.captcha .label {
    min-height: 1.2em;
    width: 160px;
    background-color: transparent;
    color: #333333;
    text-align: right;
    text-shadow: none;
}
.captcha .label , .captcha img {
    display: block;
    float:left;
    margin-right: 10px;
}
.field {
    float:left;
}
#captcha_code {
    clear: both;
    margin-top: 10px;
    margin-bottom: 10px;
}
.captcha p {
    clear: both;
}

図のようにコメントキャプチャも行儀よく横並びに表示が可能です。

完成したコメントキャプチャ

iPhoneで横方向にはみ出た Livefyre Comments 3 のコメントフォームをCSSで調整

ブログのブログ記事をiPhoneで確認中にLivefyre Comments 3 のコメントフォームがiPhoneで横方向にはみ出ていた。

どうしたものかと悩み、Facebook commentやDisqusを入れてみたけれども、シックリこない。

iPhone縦持ちの場合だけだったので、以下の様にCSSで調整した。

@media (max-width: 480px) {
.fyre .fyre-widget {
	width: 96% !important;
}
}
Livefyre Comments 3のコメントフォーム

右側の余白が少し大きくなったけど、とりあえずはこれで...

ブログの再構築時間が最速で38秒になった

デザインをリニューアル後、ブログ記事570件程度で再構築時間1分をきることができなかったので、環境変数EntriesPerRebuildの値を大きくしてみた。

以下のように、再構築時間が59秒になった。

再構築59秒

Bootstrapを採用したために、htmlのdivが複雑になっているので致し方ないのだが、どうしてもリニューアル前よりも短時間で再構築したい。

思い立ってシステムテンプレート以外の 「PHPのインクルードとして処理する」としていたウェブサイトのモジュールを全てウェブサイトのインデックステンプレートに各々作り替え、mt:Include部分全てを<?php include ~ に変更してみた。

もちろん、システムテンプレートはモジュールを読み込ませず、モジュール部分は追加しました。

変更したのは以下の部分

  • HTMLヘッダーの一部
  • バナーヘッダー
  • フッターのリンク
  • バナーフッター
  • アクセス解析

例えばこんな感じ

<mt:BlogParentWebsite>
<$mt:include module="バナーヘッダー" blog_id="$website_id"$>
</mt:BlogParentWebsite>

<?php include($_SERVER['DOCUMENT_ROOT']."/include/banner_header.php");?>

すると再構築時間が38秒になった!

再構築38秒

今日もう一度やってみた。

再構築完了画面 39秒

かなり楽になりました!

Movable Type 6.0 ベータ 1をインストールしてみた

タイトルの通り、MacのローカルにMovable Type 6.0 ベータ 1 をインストールしてみた。

キャプチャを撮りましたので掲載します。

おなじみの「Movable Typeへようこそ」。今までと変わりなく進みます。

Movable Typeへようこそ

システムチェック

システムチェック

データベースの設定

データベースの設定

データベースの設定完了

データベースの設定完了

メールの設定

メールの設定

構成ファイルの設定完了

構成ファイルの設定完了

アカウントの作成

アカウントの作成

最初のウェブサイトの作成。Rainier 1.1が選択されています。

最初のウェブサイトの作成

インストール完了

インストール完了

ユーザーダッシュボード

ユーザーダッシュボード

ウェブサイトに記事を書いてみる

ウェブサイトに記事を書いてみる

ウェブサイト

ウェブサイト

ウェブサイトの記事

ウェブサイトの記事

以上です。

少しずつ弄ってみます!

Movable Type 6.0 ベータのテスト開始です

Movable Type 6 では、新しいAPIを通じて、さまざまな言語による機能実装やデータ操作が可能となります。APIを実際に利用したユーザーモードアプリ「Loupe」では、スマートフォンからMovable Typeの各種操作がスピーディに行えます。

また、ウェブサイトの機能を見なおし、ブログ用の記事を記述できるようになりました。Movable Type 5の特徴である「構造的なウェブサイト管理」はもちろん、シンプルなブログも最短ステップで作成可能となります。

Movable Type 6 ベータテストを開始します

ウェブサイトとブログに分離したことで非常にわかりづらくなっていたこともありますので、大変嬉しい機能追加となっています。

Movable Type 6.0 ベータ1

ロゴもスッキリとした物に変わっていますね。

また、GPL での提供は終了しますが、Movable Type 自体は Perl で作られていることもあって、これまで通りソースコードはいつでもどなたでも閲覧可能です。GitHub による開発版の公開も継続して行います。商用版、もしくは個人無償版のライセンスを保有する必要がありますが、GitHub のレポジトリはそのまま使っていただけますし、フィードバックも受けつけます。Six Apart は引き続き Movable Type の成長のための投資を続けます。これからもオープンな体制で開発を続け、今後も皆様からのご支援をいただき、よりよいプロダクトに成長していきたいと思います。

Movable Type 6 の新しいライセンスについて

それでは今からMacのローカルに beta 1 のインストールを行なってみます。

ウェブサイトリニューアル時の旧バージョンテンプレートについてのお願い

アットスタイルでは7月10日前後でのウェブサイトリニューアルを予定しています。

リニューアル予定のデザイン

それに伴いまして以下の旧バージョンのテンプレートを整理いたします。

無料テンプレート

リニュール後もご購入・ダウンロードしていただけるようにページは残す予定でございますが、探しにくくなると思われます。

ご購入・ダウンロードご希望の方は、お早めのお手配をお願いいたします。

スマートフォン・タブレット対応の Movable Type 5テーマ Bootstrap 「07」「08」をリリース

Bootstrapを利用したスマートフォン・タブレット対応の新しいテーマ「Movable Type 5(MTOS 5) テーマ(テンプレート) Bootstrap 07」「Movable Type 5(MTOS 5) テーマ(テンプレート) Bootstrap 08」をリリースしました。

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

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

ウェブサイト名をナビゲーションバー上部に移動し長いウェブサイト名が表示可能になりました。また、全幅のフッター採用しています。

よろしくお願いします。

カルーセル(画像スライド)実装の Movable Type 5テーマ Bootstrap 「05」「06」をリリース

Bootstrap標準のカルーセル(画像スライド)を実装したスマートフォン・タブレット対応テーマ Movable Type 5(MTOS 5)テーマ(テンプレート)Bootstrapをリリースしました。

カルーセル部分のキャプションはウェブページにて管理。テーマのインストール時に自動的に作成されます。簡単に編集できます。

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

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

よろしくお願いします。