本日、Movable Type 6 テーマ（テンプレート） Bootstrap HTML5をバージョン1.0より、バージョン1.1にアップデートいたしました。 主にパンくずやフォルダの部分ですが、変更した内容は以下のとおりです。
デモサイトは既にバージョンアップしたものに変更しています。
SYNCK GRAPHICAさんの【メールフォームCGI Jcode版】を利用してBootatrapテーマ用メールフォームの実装テストを行っています。
Movable Type 5までのテーマでは、5年ほど前のメールフォームCGIを使用していましたが、今回より現行のメールフォームに変更の予定で、すでにお問い合わせ部分のマークアップは完了しました。
ビジネス向けテーマにご期待ください。
覚書的にコードを保存・公開しているCode@Styleのテーマ変更に伴い、記事のURLが変わりました。
新URLにリダイレクトなど行っておりませんので、ブックマークなどされている方はお手数ですが変更をお願いいたします。
先日、v3.0.1へアップデートしたばかりですが、Bootstrap v3.0.2がリリースされています。
これに伴い、以下のテーマのBootstrapをv3.0.1からv3.0.2にアップデートしました。
よろしくお願いします。
Bootstrap v3.0.1がリリースされています。
これに伴い、以下のテーマのBootstrapをv3.0.0からv3.0.1にアップデートしました。
よろしくお願いします。
シックス・アパート プロフェッショナル・ネットワーク(ProNet)は、Movable Typeなどのシックス・アパート製品を利用したシステムの導入や構築を手がけるシステム・インテグレーション企業やウェブサイト構築企業などに向けたパートナー制度です。
よろしくお願いします。
先日、Font AwesomeのVersion 4.0.1がリリースされました。
これに伴いMovable Type 6 テーマ（テンプレート） Bootstrap HTML5 205・Movable Type 6 テーマ（テンプレート） Bootstrap HTML5 206のテーマをFont Awesome Version 4.0.1に対応させて、別のテーマとしてリリースしました。
211以降はFont Awesome 4.0.1になりますので、よろしくお願いします。
Bootstrapを利用したテーマ「スマートフォン・タブレット対応 Movable Type 6 テーマ（テンプレート） Bootstrap HTML5 205」をリリースしました。
前回の206と順序が逆のリリースとなりましたが、今後201までさかのぼりたいと思っています。
よろしくお願いします。
Movable Type 6 + Bootstrap 3 + FontAwesome でリニューアルした「はやさかクリニック」 のサイトが公開されました。
Movable Type 3 の頃からのお付き合いいただいており、Webにも詳しいオーナ様がレスポンシブWebデザインを希望されました。
今回リリースの「Movable Type 5（MTOS 5） テーマ（テンプレート） Bootstrap HTML5 101」「Movable Type 5（MTOS 5） テーマ（テンプレート） Bootstrap HTML5 102」より、以下の2点を変更しております。
スタイルシートのみの変更で対応できません。アップグレードの際はテーマ全てを変更して下さい。
カテゴリ配下のエントリーベースネームディレクトリのインデックス
category/sub-category/entry-basename/index拡張子となって一層使いやすくなりました。
もちろん、テーマインストール時に自由に変更していただくことも可能です。
Bootstrap 3.0 にアップグレードした、スマートフォン・タブレット対応テーマ「Movable Type 5（MTOS 5） テーマ（テンプレート） Bootstrap 101」をリリースしました。
もちろん、Font Awesome・google-code-prettifyも実装済です。
よろしくお願いします。
Movable Type 6.0 RC1がリリースされたのでBootstrap 06をベースにテーマを作成してみた。
Movable Type 6.0 RC1用のため、公開・配布はいたしません。Bootstrap 3 へのアップグレードなどを行い、Movable Type 6.0 公開後にリリースの予定です。
おなじみ素敵な日本語フォントを公開している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も必要なのだが、これは以下のサイトで変換して作成する。
.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;を指定すれば、あらキレイ！
以下のページを参考に、現在の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>&media=<mt:EntryAssets lastn="1" type="image"><mt:AssetURL encode_url="1"></mt:EntryAssets>&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を本日公開いたしました
Bootstrap + FontAwesome + Movable Type Open Source を利用して短期間で制作いたしました。
VW乗りの間では知らない人はいないアメリカ・カリフォルニア州のオレンジカウンティにあるGENE BERGのパーツや空冷VWを専門に扱うマニアックな自動車専門店です。
Facebookページも公開しておりますので、何卒よろしくお願いします。
BootstrapなどレスポンシブWebデザインのサイト構築の際に、Google マップを埋め込んでみたら小さい画面ではみ出してしまいます。（Googleさん、Yahoo!さん、お願いしますよ...）
埋め込みコードをレスポンシブWebデザインでも利用できるように変換してくれるサービス「Embed Responsively」
予めGoogle マップなどで取得したコードをペースト、ボタンを押すだけでコードを書きだしてくれますので簡単！
書き出されるコードはスタイルシートも一緒になっていますのでご注意を...
ブログのブログ記事をiPhoneで確認中にLivefyre Comments 3 のコメントフォームがiPhoneで横方向にはみ出ていた。
どうしたものかと悩み、Facebook commentやDisqusを入れてみたけれども、シックリこない。
iPhone縦持ちの場合だけだったので、以下の様にCSSで調整した。
@media (max-width: 480px) {
.fyre .fyre-widget {
width: 96% !important;
}
}
右側の余白が少し大きくなったけど、とりあえずはこれで...
デザインをリニューアル後、ブログ記事570件程度で再構築時間1分をきることができなかったので、環境変数EntriesPerRebuildの値を大きくしてみた。
以下のように、再構築時間が59秒になった。
Bootstrapを採用したために、htmlのdivが複雑になっているので致し方ないのだが、どうしてもリニューアル前よりも短時間で再構築したい。
思い立ってシステムテンプレート以外の 「PHPのインクルードとして処理する」としていたウェブサイトのモジュールを全てウェブサイトのインデックステンプレートに各々作り替え、mt:Include部分全てを<?php include ~ に変更してみた。
もちろん、システムテンプレートはモジュールを読み込ませず、モジュール部分は追加しました。
変更したのは以下の部分
例えばこんな感じ
<mt:BlogParentWebsite>
<$mt:include module="バナーヘッダー" blog_id="$website_id"$>
</mt:BlogParentWebsite>を
<?php include($_SERVER['DOCUMENT_ROOT']."/include/banner_header.php");?>すると再構築時間が38秒になった！
今日もう一度やってみた。
かなり楽になりました！
表題の通り、テーマ詳細のページにも各種ソーシャルボタンが付きました。
「送信」や「ポケットに保存」など、ご利用ください。
またTwitter、Facebook で感想などいただくと幸いデス。
よろしくお願いします。
4月で期限が切れていたProNet SOHOに再加入しました。
ProNet SOHOは、個人やSOHO で活動するウェブデザイナーおよびエンジニアの皆様を対象としたパートナー支援制度です。
ProNet SOHO （SOHO・個人） | Six Apart
フッターのロゴも復活！
今後ともよろしくお願いいたします。