MT DDC Tokyo テーマ編へ行ってきました
Posted by @Style : 
02:57
| 
コメント (0)
| 
トラックバック (0)
MT4LP5以来2年ちょっと、久しぶりにMTのイベントの参加しました。MT DDCは参加したことがなかったのですが、今回「テーマ編」ということで参加させていただきました。
朝6時過ぎに出発して、飛行機が少し遅れたおかげで、会場についたのが12時過ぎ（熊本からは遠いよね～）。すでにかなりの方が入室されてるようでした。会場のドア付近にOscarさんとlinkerのcremaさんを発見。その隣に座らせていただきました。
内容は
- Movable Type 5 成長するプラットフォーム
- 金子順さん (シックス・アパート株式会社)
- Movable Type 5.1の予定実装の解説。かなり使いやすくなりそうです。Movable Type 5.1は来年の初めころのリリースだそうで、今からワクワクしております。
- テーマ機能を使って、便利にテンプレートを管理しよう
- 森和恵さん
- DreamWeaverでのテンプレートの編集方法。DreamWeaverを購入したばかりなのであまり理解していませんが、DreamWeaverのテンプレート機能を利用して効率的にモジュールなどの編集ができるようです。
- ウェブサイト／ブログを組み合わせたサイトのテーマ化
- 藤本壱さん
- ウェブサイトとブログ間でのデータのやり取りのを効率的に行うノウハウ満載。一括で登録しておく方法、勉強になりました！
- 仕事に役立てるテーマ
- 蒲生トシヒロ (Dakiny)さん
- テーマを利用する際の注意点など。これからテーマをつくってみようと思っている方がなかなか気づきにくいところを細かく解説。
- テーマを使った手間いらずなサイト制作
- 荒木勇次郎さん
- yamlの書き方。これだけのボリュームと詳細さはすごい。私も手描きでyamlを作成していますので、スライドの配布が待ちどうしい。公開されたようです。エクスポート系のプラグインも使ってみたい。
- ライトニングトーク
- 飛び入りでHTML5のテーマを宣伝させていただきました。そのため私より前のLTは全く聞いてませんでした。すみません。舞い上がっちゃって私の後の方のもよく聞いてませんでした。
スピーカーのみなさま、シックス・アパートのみなさま、大変勉強になりました！ ありがとうございました。
HTML5のMovable Type 5テーマ完成しました
Posted by @Style : 11:42
| コメント (0)
| トラックバック (0)
先日より作成しておりました「HTML5のMovable Type 5テーマ」が完成しました。
無料配布いたしますが、未だ配布用ページが完成しておりません。ご希望の方は「お問い合わせ」よりお知らせください。
7月30日追記：配布用ページを作成しました。「MovableType 5 無料テーマ HTML5」
＊利用規約は「MovableType 4.2 無料テンプレート 2Column HTML5」と同様です。お申込みの際に名前・電子メール・テンプレート利用予定ドメイン・住所・電話番号をお知らせください。
HTML5のMovable Type 5テーマ作成中（その3）
Posted by @Style : 00:56
| コメント (0)
| トラックバック (0)
極力装飾を入れずミニマルに徹底した。パイプやパンくず等CSSで表現できるものには画像を利用していない。前回お知らせした時には右サイドバーだったが、どうしてもバランスがとれない。左サイドバーに変更して、なんとか落ち着いた。
上部と下部のナビゲーションにはシークレットタグを用いてウェブページを追加することができる。現在ブログをひとつだけ作成しているが複数のブログで運営できる。
ウィジェットは以下のとおり
ウィジェットテンプレート
- OpenID対応
- カテゴリ
- クリエイティブコモンズ
- サイドバー フリーボックス
- タグクラウド
- フィード
- フォト
- ページリスト
- 最近のコメント
- 最近のトラックバック
「フォト」「最近のコメント」「最近のトラックバック」はウェブサイトのメインページとブログのメインページのみに表示できる。「ページリスト」は上部と下部のナビゲーションに追加した以外のウェブページを表示する。
HTML5のMovable Type 5テーマ作成中（その2）
Posted by @Style : 01:52
| コメント (0)
| トラックバック (0)
先日より作業を行っている「HTML5のMovable Type 5テーマ」はこんな感じ。
現在、マークアップはほとんど終了した。テンプレートの構成はブログ向けとしたためにシンプルになった。
ウェブサイトテンプレート
- インデックステンプレート
-
- JavaScript
- jquery.js
- RSD
- Site Map
- slimbox2.css
- slimbox2.js
- スタイルシート
- メインページ
- リセットスタイルシート
- 最新記事のフィード
- アーカイブテンプレート
-
- ウェブページ
- テンプレートモジュール
-
- HTMLヘッダー
- カテゴリ
- コメント
- サイドバー
- トラックバック
- ナビゲーション
- ナビゲーションリスト
- バナーフッター
- バナーヘッダー
- ブログ記事の概要
- ヘッダナビ
- ヘッダナビリスト
- システムテンプレート
-
- コメントプレビュー
- コメント完了
- ダイナミックパブリッシングエラー
- ポップアップ画像
- 検索結果
ブログテンプレート
- インデックステンプレート
-
- JavaScript
- RSD
- メインページ
- アーカイブテンプレート
-
- ウェブページ
- カテゴリ別ブログ記事リスト
- ブログ記事
- 月別ブログ記事リスト（不要？）
- テンプレートモジュール
-
- HTMLヘッダー
- システムテンプレート
-
- コメントプレビュー
- コメント完了
- ダイナミックパブリッシングエラー
- ポップアップ画像
HTMLヘッダーは、ウェブサイトとブログで共通化できないこともないが、一部区別したいところがあったので別になっている。レイアウトや細かいデザインはこれから。
HTML5のMovable Type 5テーマ作成中
Posted by @Style : 01:21
| コメント (0)
| トラックバック (0)
MovableType 5（MT5 MTOS5）テーマ1030 とMovableType 4.2 無料テンプレート 2Column HTML5を元にして、HTML5でマークアップしたテーマを作成中
MovableType 5（MT5 MTOS5）テーマ1030 とは全くの別物。
まだ検索以外のシステムテンプレートとサイドバーには手をつけていない。なかなか進まないが今月中に完成させたい。
zenback ベータテスト開始！
Posted by @Style : 17:55
| コメント (0)
| トラックバック (1)
先日のニュースリリースで面白そうなのでベータテストに登録していた。
シックス・アパートが、ブログ／メディア向けの ソーシャルメディア相互連携ツール「zenback」を発表
「zenback」とは？
zenbackは、ブログ記事のテンプレートにスクリプトコードを埋め込むことで利用できます。ブログの記事の下や横に、
- その記事に関係する自分のブログ記事
- その記事に関係する他のzenbackユーザーのブログ記事
- その記事についての最新のTwitterのつぶやき
- その記事についてのはてなブックマーク
- その記事の最新のアクセス元（リファラ）
を表示します。
zenbackによって、今までは１つ１つ独立している印象だった「ブログ」が、他のブログや他のサービスとゆるやかにつながり、大きなソーシャルの輪となっていきます。
このブログの個別ページに実装してみました。
記事のすぐ下にテンプレートタグで表示している「関連記事」は新しいものから拾ってきますが、zenbackではランダムに古い記事からも（件数は指定できる）表示されているようです。
気になったらzenbackベータテストへお申込み！
MovableType 4.2 2Column HTML5の解説（サイドバー）
Posted by @Style : 01:28
| コメント (0)
| トラックバック (0)
昨日までの「MovableType 4.2 無料テンプレート 2Column HTML5」の簡単な解説でメインカラムがほぼ終了しましたので、本日はサイドバーについて解説します。
グローバルナビゲーションを設けておらず、主となるナビゲーションをカテゴリとしてnav要素でマークアップした。＊ブログにより違うかもしれない。
TrackBackとPoweredをaside要素、その他をsection要素でマークアップした。
また、ブログ記事リストなどと同様に「Recent Entries」と「Archives」はul要素ではなくol要素でリスト化した。
<nav>
<h2>Categories</h2>
<ul>
<li>カテゴリー</li>
</ul>
</nav>
<section>
<h2>Recent Entries</h2>
<ol>
<li>ブログ記事</li>
</ol>
</section>
<section>
<h2>Archives</h2>
<ol>
<li>月別アーカイブ</li>
</ol>
</section>
<section>
<h2>Tags</h2>
<ul>
<li>タグ</li>
</ul>
</section>
<section>
<h2>Comments</h2>
<ol>
<li>ブログ記事タイトル</a>
<div><span>コメント投稿者 投稿月日</span></div>
</li>
</ol>
</section>
<aside>
<h2>TrackBacks</h2>
<ol>
<li>ブログ記事タイトル</a>
<div><span>送信者</span></div></li>
</ol>
</aside>
<section>
<h2>Photo</h2>
<ol>
<li>サムネイル</li>
</ol>
</section>
<section>
<h2>Feed</h2>
<ul>
<li>Atom</li>
</ul>
</section>
<aside>
<h2>Powered by </h2>
<ul>
<li>Movable Type</li>
<li>@Style</li>
</ul>
</aside>
<section>
<h2>Search</h2>
<ul>
<li>検索フォーム</li>
</ul>
</section>コメントとトラックバックの「┗」はCSSの:before擬似要素で表示した。
div.comment-author span:before , div.ping-name span:before {
content: " ┗ ";
}MovableType 4.2 2Column HTML5の解説（コメントフォーム）
Posted by @Style : 00:36
| コメント (0)
| トラックバック (0)
昨日の「MovableType 4.2 無料テンプレート 2Column HTML5」の簡単な解説でコメントフォームについてやり残していましたので続きです。
コメントフォームでinput要素type属性の値に新しく加えられたemailとurlを利用した。
<label for="comment-email">電子メール</label>
<input type="email" value="">
<label for="comment-url">URL</label>
<input type="url" value="" >
MovableType 4.2 2Column HTML5の解説（ブログ記事）
Posted by @Style : 01:26
| コメント (0)
| トラックバック (0)
引き続き、「MovableType 4.2 無料テンプレート 2Column HTML5」の簡単な解説です。
ブログ記事について
ブログ記事リストではないのでol要素でリスト化する必要はない。divで余白の調整、ブログ記事全体をarticleとする。前々回の解説のように「ブログ記事のタイトル」と「メタデータ」をheader要素とした。
＊余白の調整もarticle要素に任せて良いかもしれない。
タグ・トラックバック・コメントはセクションを分けた。それぞれのタイトルをheader要素でマークアップ。
他のブログから受けたトラックバックの内容はaside要素とした。コメントごとにarticle。コメントとトラックバック時刻はメタデータと同様にtime要素とした。
コメントフォームも解説すると長くなるので次回に。
<article>
<header>
<h2>ブログ記事のタイトル</h2>
<ul>
<li>メタデータ</li>
</ul>
</header>
ブログ記事の本文
ブログ記事の続き
<section>
<h3>タグ:</h3>
<ul>
<li>エントリータグ</li>
</ul>
</section>
<section>
<header>
<h3>トラックバック</h3>
<p>トラックバックURL</p>
</header>
<aside>
<h4><$MTPingBlogName$> -
<a href="<$MTPingURL$>"><$MTPingTitle$></a> (<a href="#ping-<$MTPingID$>">
<time datetime="<$MTPingDate format_name="iso8601"$>"><$MTPingDate format="%x %k時%M分"$></time></a>)</h4>
<p><$MTPingExcerpt$> <a href="<$MTPingURL$>">続きを読む</a></p>
</aside>
</section>
<section>
<header>
<h3>コメント</h3>
</header>
<article>
<header>
<h4><$mt:CommentAuthorLink$><time pubdate="pubdate" datetime="<$mt:CommentDate format_name="iso8601"$>"><$mt:CommentDate$></time></h4>
</header>
コメント本文
</article>
<h3>コメントする</h3>
コメントフォーム
</section>
</article>
MovableType 4.2 2Column HTML5の解説（幅の調整）
Posted by @Style : 00:22
| コメント (0)
| トラックバック (0)
ユーザーの方から「MovableType 4.2 無料テンプレート 2Column HTML5」でコンテナの幅を調整したいというご要望がありましたので、予定を変更してCSSでの調整を解説します。
コンテナやカラムの幅の調整方法
Layout部分36行め以降のheader#branding・div#content・footer#copyで全体の幅を指定し、div#mainとdiv#subでカラムの幅を調節します。＊ノーマルな状態ではメインコンテンツには468pxのバナーがぴったりと入るように設計されています。
740pxの幅を960pxに広げ、メインコンテンツに640pxが入るように調整する例
640px+20px+20px（div#main .innerの左右padding）=680px（div#main）
960px（全体の幅）-680px（上記数値）-2px（IE用調整）=278px（div#sub）
サイドバーが48px増えてるが、このままではアイテムのサムネイルが横に3つ入らずおかしな余白ができる。3つ並べるには240px必要となるのでdiv#sub .innerのpadding-leftを2px減らす。
header#branding {
color: #333333;
background-color: #ffffff;
text-align: left;
margin-left: auto;
margin-right: auto;
width: 960px;
overflow: hidden;
}
div#content {
font-size: 100%;
color: #333333;
background-color: #ffffff;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 960px;
}
div#main {
font-size: 80%;
color: #333333;
background-color: #ffffff;
text-align: left;
padding-bottom: 20px;
width: 680px;
float: left;
}
div#sub {
font-size: 100%;
color: #333333;
background-color: #ffffff;
text-align: left;
margin-bottom: 20px;
width: 278px;
float: right;
}
footer#copy {
font-size: 100%;
color: #333333;
background-color: #ffffff;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 960px;
clear: both;
}/* サイドバー余白調整 */
div#sub .inner {
line-height:1.5;
padding-left: 18px;
padding-right: 20px;
}Buy Now
