html5slidesを使ってMovable Type 6のウェブサイトまたはブログでプレゼンテーションが出来るテンプレートです。簡単なプレゼン作成やウェブでのプレゼン資料公開に最適です。
「Blog」と一致するもの
Movable Type 6のアイテムをFlexSlider 2でカルーセル(覚書)
レスポンシブデザインで利用出来るスライダーFlexSlider 2を使って、Movable Type 6のアイテムでカルーセルを作る。以下、覚書
FlexSlider 2から一式をダウンロード
zipを解凍
今回はベーシックなカルーセル「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 で!
明日(11月16日)はオープンソースカンファレンス2013 Fukuoka
MT福岡もグループとして参加します。ぜひお立ち寄り下さい。
![オープンソースカンファレンス2013 Fukuoka](/blog/images/osc2013.png)
- 会場
- 福岡ソフトリサーチパーク センタービル
- 日程
- 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](/blog/img/bootstrap_3_0_2.jpg)
これに伴い、以下のテーマのBootstrapをv3.0.1からv3.0.2にアップデートしました。
- Movable Type 6 テーマ(テンプレート) Bootstrap HTML5
-
- Movable Type 6 テーマ(テンプレート) Bootstrap HTML5 205
- Movable Type 6 テーマ(テンプレート) Bootstrap HTML5 206
- Movable Type 6 テーマ(テンプレート) Bootstrap HTML5 211
- Movable Type 6 テーマ(テンプレート) Bootstrap HTML5 212
- Movable Type 6 テーマ(テンプレート) Bootstrap HTML5 213
- Movable Type 6 テーマ(テンプレート) Bootstrap HTML5 214
- Movable Type 6 テーマ(テンプレート) Bootstrap HTML5 215
- Movable Type 6 テーマ(テンプレート) Bootstrap HTML5 216
- Movable Type 6 テーマ(テンプレート) Bootstrap HTML5 217
- Movable Type 6 テーマ(テンプレート) Bootstrap HTML5 218
よろしくお願いします。