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

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

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

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

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

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

MTCafe Fukuoka 2013 Winter まもなく定員

MTCafe Fukuoka 2013 Winter ~Movable Typeの"今"と"可能性"を知るセミナー~ の定員30名がまもなく一杯となりそうです。

概要

日時
2013年12月7日 13時 から 17時30分
定員
30人
受付期間
2013年11月16日 0時 から 2013年12月6日 12時
参加費
500円
場所
OnRAMP セミナールーム
福岡県福岡市天神1-10-24 天神セントラルプレイス 2F
http://onramp.jp/

私も登壇させていただくかもしれません。

お申し込みは Zusaar で!

Zusaarで申し込み!

懇親会は別途Zusaarで参加表明お願いします。

MTCafe Fukuoka 2013 Winter

Movable Type 6のアイテムをFlexSlider 2でカルーセル(覚書)

レスポンシブデザインで利用出来るスライダーFlexSlider 2を使って、Movable Type 6のアイテムでカルーセルを作る。以下、覚書

FlexSlider 2から一式をダウンロード

FlexSlider 2

zipを解凍

解凍後のfolder

今回はベーシックなカルーセル「Basic Carousel」を使用する。どれも基本的にはulでマークアップしてJavascriptとCSSを読み込ませるとOK

Movable Type 6での利用が前提なので、ちょっとゴニョゴニョ

fontsフォルダはルートにアップロード

CSSの出力先変更を可能にするため、flexslider.cssを以下のように変更

修正前26行目

@font-face {
    font-family: 'flexslider-icon';
    src:url('fonts/flexslider-icon.eot');
    src:url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
        url('fonts/flexslider-icon.woff') format('woff'),
        url('fonts/flexslider-icon.ttf') format('truetype'),
        url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
    font-weight: normal;
    font-style: normal;
}

修正後26行目

@font-face {
    font-family: 'flexslider-icon';
    src:url('<$mt:WebsiteURL$>fonts/flexslider-icon.eot');
    src:url('<$mt:WebsiteURL$>fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
        url('<$mt:WebsiteURL$>fonts/flexslider-icon.woff') format('woff'),
        url('<$mt:WebsiteURL$>fonts/flexslider-icon.ttf') format('truetype'),
        url('<$mt:WebsiteURL$>fonts/flexslider-icon.svg#flexslider-icon') format('svg');
    font-weight: normal;
    font-style: normal;
}

インデックステンプレートにflexslider_cssとして作成する

同様に、インデックステンプレートにjquery.flexslider-min.jsをjquery_flexslider_min_jsとして作成する

ウェブサイトのメインページに追加記述する

CSSへのリンク

<link rel="stylesheet" href="<$mt:Link template="flexslider_css"$>">

画像リスト

<div class="flexslider carousel">
<ul class="slides">
<$mt:Setvar name="counter" value="0"$>
<mt:Entries lastn="0" include_blogs="children" include_with_website="1">
<mt:EntryAssets type="image" lastn="1">
<$mt:Setvar name="counter" op="++"$>
<mt:SetVarBlock name="EntDate"><$mt:EntryDate format_name="iso8601"$></mt:SetVarBlock>
<mt:SetVarBlock name="EntryLink[$counter]"><$mt:EntryPermalink$></mt:SetVarBlock>
<mt:SetVarBlock name="ImageCode[$counter]"><img src="<$mt:AssetThumbnailURL height="200" square="1"$>" alt="<$mt:EntryTitle$>" title="「<$mt:EntryTitle$>」on「<$mt:BlogName$>」" width="200" height="200"></mt:SetVarBlock>
</mt:EntryAssets>
<mt:SetHashVar name="Compare"><mt:SetVarBlock name="$EntDate"><a href="<mt:GetVar name="EntryLink[$counter]">"><mt:GetVar name="ImageCode[$counter]"></a></mt:SetVarBlock></mt:SetHashVar>
</mt:Entries>
<mt:Setvar name="CountB" value="0"><mt:If name="counter" ge="1">
<mt:Loop name="Compare" sort_by="key reverse"><mt:If name="CountB" lt="10"><mt:Setvar name="CountB" op="++">
<li><mt:GetVar name="__value__"></li></mt:If>
</mt:Loop>
</ul>
</mt:If>
</div>

Javascript

<script src="<$mt:Link template="jquery_flexslider_min_js"$>"></script>
<script>
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5
  });
});
</script>

完成

完成したカルーセル

注意

  • 200pxのため、変更する場合は200の箇所を書き換える
  • itemWidth: 210,は200+5+5

MTCafe Fukuoka 2013 Winter を開催します

2013年10月にメジャーバージョンアップしたばかりのMovable Type 6の最新情報、そしてMTとECサイト、そのブランティング、MTの活用事例などの講演を行います。

30名と少数での開催なのでお早めに!

概要

日時
2013年12月7日 13時 から 17時30分
定員
30人
受付期間
2013年11月16日 0時 から 2013年12月6日 12時
参加費
500円
場所
OnRAMP セミナールーム
福岡県福岡市天神1-10-24 天神セントラルプレイス 2F
http://onramp.jp/

プログラム(予定)

13:00
ご挨拶
13:20
ゲストセッション(シックス・アパート株式会社 Movable Type リードエンジニア 高山様)
14:20
ゲストセッション(株式会社ネットコンシェルジェ 代表 尼口様)
15:20
ゲストセッション(調整中)
16:20
MT福岡よりセッション
17:20
抽選会 & ご挨拶

18時より別会場にて、懇親会を企画しております。

お申し込みは Zusaar で!

Zusaarで申し込み!

MTCafe Fukuoka 2013 Winter

明日(11月16日)はオープンソースカンファレンス2013 Fukuoka

MT福岡もグループとして参加します。ぜひお立ち寄り下さい。

オープンソースカンファレンス2013 Fukuoka
オープンソースカンファレンス2013 Fukuoka
会場
福岡ソフトリサーチパーク センタービル
日程
2013年11月16日(土) 10:00~18:00 (展示は16:00まで)
費用
無料
内容
オープンソースに関する最新情報の提供
  • 展示 - オープンソースコミュニティ、企業・団体による展示
  • セミナー - オープンソースの最新情報を提供
主催
オープンソースカンファレンス実行委員会
共催
公益財団法人 九州先端科学技術研究所
協賛
株式会社 福岡ソフトリサーチパーク
企画運営
株式会社びぎねっと

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

Amazon Kindle Paperwhite(ニューモデル)を購入

Amazon Kindle Paperwhite(ニューモデル)がイイらしいので買ってみた。

Amazon Kindle Paperwhite
Amazon Kindle Paperwhite(ニューモデル)

まだKindle本体から書籍を購入していないが、手持ちの資料や書籍を「パーソナル・ドキュメント」にメール添付で送ってKibdle本体へ配信してみた。

Movable Type関連では、PDFの「Movable Type 5 Webサイト制作ガイド Volume 2」は、かなり文字が小さく読めなかった、多少文字が大きいiPhone用を入れた。

MTAppjQueryのドキュメントには、Kindle用のmobiファイルが同梱されていたのでこれを入れてみた。文字サイズをコントロールできるので快適に読むことが出来る。

また眠れない夜が...

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 6 にアップグレードしました

後回しにしていたこのサイトとブログをMovable Type 6 にアップグレードしました。

Movable Type 6 のダッシュボード
Movable Type 6 にアップグレード

折角なのでGoogle Apps のドメインメールアカウントで Analystを設定しようかと思い作ってみましたが、表示が遅くなりそうで思案中...

Movable Type 6 がリリースされました

Movable Type 6 をリリース ―日米で出荷開始―

2013年10月16日(現地時間)、米ニューヨークで開かれた Movable Type Idea Exchange にて、Movable Type 6 の出荷開始を発表し、正式リリースの運びとなりました。日本でも、本日より出荷を開始しています。

Movable Type 6 をリリース ―日米で出荷開始― | Movable Type

シックス・アパートから「Movable Type 6」 が正式リリースされました。

このバージョンからMTOS(Movable Type Open Source)が廃止され、ライセンス体系も変わっています。新たに「Movable Type 開発者」ライセンスも設けられています。

Movable Type 6 をリリース
Movable Type 6 をリリース ―日米で出荷開始―

Movable Type 6.0 RC2用 Bootstrap 3のテーマ完成

Movable Type 6.0 RC1用 Bootstrap 2.3テーマを少しいじって、Movable Type 6.0 RC2用 Bootstrap 3のテーマが完成しました。

Movable Type 6.0 RC2用 Bootstrap 3テーマ
Movable Type 6.0 RC2用 Bootstrap 3テーマ

Movable Type 6.0 RC2用のため、公開・配布はいたしません。Movable Type 6.0 公開後にリリースの予定です。

MTDDC Meetup HOKKAIDO 2013 間もなく締め切り

Get Restarted with "Movable Type"!

MTDDC Meetup HOKKAIDO 2013は、北海道内で活躍するMovable Typeを活用した開発者やWebデザイナー、あるいはWebサイト制作会社などと、Movable Typeに興味関心はあるが触れたことのない開発者やWebデザイナー、IT/Webに関連する企業や一般企業Web担当者の結びつきを強め、新たな情報交換や交流の場を提供することに加え、北海道の地からMovable Typeの特徴を活かしたIT/Web施策を発信していきたいというコンセプトのもと開催されます。

北海道の有志によるMTDDC Meetup HOKKAIDO 2013。申込み期限が2013年9月30日 12:30となっているようです。

MTDDC Meetup HOKKAIDO 2013

参加申込はPeaTixにて

日程
2013年10月5日(土) 12:30~18:30
場所
北農健保会館
札幌市中央区北4条西7丁目1−4
参加費
一般:1,000円・学生:500円
定員
100名
懇親会
19:00~21:00(参加費4,000円)

翌日にはハッカソンも!

MT:Fukuokaも協賛しています。

Movable Type 6 RC1 のウェブサイトに MT4.2用テンプレートセットをインストール

Movable Type 6 ではウェブサイトに記事を書けるようになったので、ひょっとしたらMT4.2用のテンプレートセットプラグインがそのまま利用できるのではないかと思い試してみた。

pluginsデレクトリへ販売中のテンプレートセット736をアップロード。(ローカルでのテストのためhtdocs内のmt/pluginsフォルダ)

pluginsデレクトリ

ウェブサイトのテーマ一覧に表示されるので「適用」ボタンをクリックし、再構築する

テーマ一覧

ウェブサイトを見てみる

ウェブサイト

ここまで上手く行ったので実際に記事をインポートしてみたがエラー発生。モジュール「ブログ記事の概要」が無い。「記事の概要」となっているモジュールの名前を変更する。

記事の概要

「記事の概要」モジュールの名前の前に「ブログ」を追加して「ブログ記事の概要」にする。

「ブログ記事の概要」にする

再構築して完成!

完成

この方法は、新たに追加されたMT6の機能を使わないことになりますので、オススメはしません。

Bootstrap 3.0でのMovable Typeのコメントキャプチャ

Bootstrap 3.0ではinput要素・select要素・textarea要素の幅が、標準で100%になった。

Requires custom widths

Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.

コメントキャプチャでレイアウトが崩れてしまったので、CSSを以下のように変更

#comments-open-captcha {
    margin-top: 20px;
}
.captcha .label, .captcha img {
    display: block;
    float: left;
    margin-right: 10px;
}
.captcha .label {
    width: 80px;
    min-height: 1.2em;
    background-color: rgba(0, 0, 0, 0);
    color: #333333;
    text-align: left;
    text-shadow: none;
}
.field {
    float: left;
}
#captcha_code {
    clear: both;
    margin-top: 10px;
    margin-bottom: 10px;
}
.captcha p {
    clear: both;
}
Bootstrap 3.0でのコメントフォーム
Bootstrap 3.0でのコメントフォーム