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

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

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

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

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

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

Movable Type 6・Bootatrapテーマ用メールフォーム実装テスト中です

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

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

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

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

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

先日、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

よろしくお願いします。

Bootstrapをv3.0.0からv3.0.1にアップデートしました

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

よろしくお願いします。

シックス・アパート プロフェッショナル・ネットワーク(ProNet)に加入しました

シックス・アパート プロフェッショナル・ネットワーク(ProNet)は、Movable Typeなどのシックス・アパート製品を利用したシステムの導入や構築を手がけるシステム・インテグレーション企業やウェブサイト構築企業などに向けたパートナー制度です。

ProNet (法人) | Six Apart

ProNet アットスタイル

よろしくお願いします。

Font Awesome 4.0.1に対応したMovable Type 6用テーマをリリースしています

先日、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になりますので、よろしくお願いします。

Movable Type 6 テーマ(テンプレート) Bootstrap HTML5 205 をリリースしました

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までさかのぼりたいと思っています。

よろしくお願いします。

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 公開後にリリースの予定です。

M+ FONTSをWebフォントで使う

おなじみ素敵な日本語フォントを公開しているM+ FONTS

M+ FONTS

ライセンスも「フリー」と謳われており、Webフォントとしても利用できる。

These fonts are free software.
Unlimited permission is granted to use, copy, and distribute them, with or without modification, either commercially or noncommercially.
THESE FONTS ARE PROVIDED "AS IS" WITHOUT WARRANTY.

これらのフォントはフリー(自由な)ソフトウエアです。
あらゆる改変の有無に関わらず、また商業的な利用であっても、自由にご利用、複製、再配布することができますが、全て無保証とさせていただきます。

ということなので、早速使ってみた。

http://mplus-fonts.sourceforge.jp/webfonts/からお好みのフォントをダウンロード。今回はフラットデザインでの利用なので細めのmplus-1p-light.ttfを選んでみた。

インターネットエクスプローラー用に.eotも必要なのだが、これは以下のサイトで変換して作成する。

ttf2eot

.ttfファイルを選択して【Convert to .eot】ボタンをクリックするだけで完了する。

後は、フォントを適当なディレクトリに放り込みCSSに以下を追加記述する。(パスは適宜変更)

/*IE*/
@font-face {
font-family: mplus-1p-light;
src: url("mplus-1p-light.eot");
}
/* Firefox, Opera, Safari */
@font-face {
font-family:mplus-1p-light;
src:url("mplus-1p-light.ttf") format("truetype")
}

注意:Firefoxなどで適用できないこともあるので、必ずIE用の.eotを先に記述します。

使いたいところでfont-family: 'mplus-1p-light' , sans-serif;を指定すれば、あらキレイ!

Webフォントで表示

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ページも公開しておりますので、何卒よろしくお願いします。

Google マップ・YouTubeなどの埋め込みをレスポンシブにするEmbed Responsively

BootstrapなどレスポンシブWebデザインのサイト構築の際に、Google マップを埋め込んでみたら小さい画面ではみ出してしまいます。(Googleさん、Yahoo!さん、お願いしますよ...)

埋め込みコードをレスポンシブWebデザインでも利用できるように変換してくれるサービス「Embed Responsively

Embed Responsively

予めGoogle マップなどで取得したコードをペースト、ボタンを押すだけでコードを書きだしてくれますので簡単!

書き出されるコードはスタイルシートも一緒になっていますのでご注意を...

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秒

かなり楽になりました!