2010年8月02日

MT DDC Tokyo テーマ編へ行ってきました

Posted by @Style : Entry 02:57 | Comment コメント (0) | Trackbacks トラックバック (0) 「MT DDC Tokyo テーマ編へ行ってきました:ブログ | アットスタイル」をはてなブックマークに追加 「MT DDC Tokyo テーマ編へ行ってきました | ブログ | アットスタイル」をdel.icio.usに追加 「MT DDC Tokyo テーマ編へ行ってきました | ブログ | アットスタイル」をTwitterでつぶやく

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は全く聞いてませんでした。すみません。舞い上がっちゃって私の後の方のもよく聞いてませんでした。

スピーカーのみなさま、シックス・アパートのみなさま、大変勉強になりました! ありがとうございました。

ページ先頭へ
2010年7月29日

HTML5のMovable Type 5テーマ完成しました

Posted by @Style : Entry 11:42 | Comment コメント (0) | Trackbacks トラックバック (0) 「HTML5のMovable Type 5テーマ完成しました:ブログ | アットスタイル」をはてなブックマークに追加 「HTML5のMovable Type 5テーマ完成しました | ブログ | アットスタイル」をdel.icio.usに追加 「HTML5のMovable Type 5テーマ完成しました | ブログ | アットスタイル」をTwitterでつぶやく

先日より作成しておりました「HTML5のMovable Type 5テーマ」が完成しました。

MT5テーマ

無料配布いたしますが、未だ配布用ページが完成しておりません。ご希望の方は「お問い合わせ」よりお知らせください。

7月30日追記:配布用ページを作成しました。「MovableType 5 無料テーマ HTML5

*利用規約は「MovableType 4.2 無料テンプレート 2Column HTML5」と同様です。お申込みの際に名前・電子メール・テンプレート利用予定ドメイン・住所・電話番号をお知らせください。

ページ先頭へ
2010年7月28日

HTML5のMovable Type 5テーマ作成中(その3)

Posted by @Style : Entry 00:56 | Comment コメント (0) | Trackbacks トラックバック (0) 「HTML5のMovable Type 5テーマ作成中(その3):ブログ | アットスタイル」をはてなブックマークに追加 「HTML5のMovable Type 5テーマ作成中(その3) | ブログ | アットスタイル」をdel.icio.usに追加 「HTML5のMovable Type 5テーマ作成中(その3) | ブログ | アットスタイル」をTwitterでつぶやく

極力装飾を入れずミニマルに徹底した。パイプやパンくず等CSSで表現できるものには画像を利用していない。前回お知らせした時には右サイドバーだったが、どうしてもバランスがとれない。左サイドバーに変更して、なんとか落ち着いた。

MT5テーマ

上部と下部のナビゲーションにはシークレットタグを用いてウェブページを追加することができる。現在ブログをひとつだけ作成しているが複数のブログで運営できる。

ウィジェットは以下のとおり

ウィジェットテンプレート

  • OpenID対応
  • カテゴリ
  • クリエイティブコモンズ
  • サイドバー フリーボックス
  • タグクラウド
  • フィード
  • フォト
  • ページリスト
  • 最近のコメント
  • 最近のトラックバック

「フォト」「最近のコメント」「最近のトラックバック」はウェブサイトのメインページとブログのメインページのみに表示できる。「ページリスト」は上部と下部のナビゲーションに追加した以外のウェブページを表示する。

ページ先頭へ
2010年7月23日

HTML5のMovable Type 5テーマ作成中(その2)

Posted by @Style : Entry 01:52 | Comment コメント (0) | Trackbacks トラックバック (0) 「HTML5のMovable Type 5テーマ作成中(その2):ブログ | アットスタイル」をはてなブックマークに追加 「HTML5のMovable Type 5テーマ作成中(その2) | ブログ | アットスタイル」をdel.icio.usに追加 「HTML5のMovable Type 5テーマ作成中(その2) | ブログ | アットスタイル」をTwitterでつぶやく

先日より作業を行っているHTML5のMovable Type 5テーマ」はこんな感じ。

HTML5でマークアップ中のMT5テーマ

現在、マークアップはほとんど終了した。テンプレートの構成はブログ向けとしたためにシンプルになった。

ウェブサイトテンプレート

インデックステンプレート
  • JavaScript
  • jquery.js
  • RSD
  • Site Map
  • slimbox2.css
  • slimbox2.js
  • スタイルシート
  • メインページ
  • リセットスタイルシート
  • 最新記事のフィード
アーカイブテンプレート
  • ウェブページ
テンプレートモジュール
  • HTMLヘッダー
  • カテゴリ
  • コメント
  • サイドバー
  • トラックバック
  • ナビゲーション
  • ナビゲーションリスト
  • バナーフッター
  • バナーヘッダー
  • ブログ記事の概要
  • ヘッダナビ
  • ヘッダナビリスト
システムテンプレート
  • コメントプレビュー
  • コメント完了
  • ダイナミックパブリッシングエラー
  • ポップアップ画像
  • 検索結果

ブログテンプレート

インデックステンプレート
  • JavaScript
  • RSD
  • メインページ
アーカイブテンプレート
  • ウェブページ
  • カテゴリ別ブログ記事リスト
  • ブログ記事
  • 月別ブログ記事リスト(不要?)
テンプレートモジュール
  • HTMLヘッダー
システムテンプレート
  • コメントプレビュー
  • コメント完了
  • ダイナミックパブリッシングエラー
  • ポップアップ画像

HTMLヘッダーは、ウェブサイトとブログで共通化できないこともないが、一部区別したいところがあったので別になっている。レイアウトや細かいデザインはこれから。

ページ先頭へ
2010年7月19日

HTML5のMovable Type 5テーマ作成中

Posted by @Style : Entry 01:21 | Comment コメント (0) | Trackbacks トラックバック (0) 「HTML5のMovable Type 5テーマ作成中:ブログ | アットスタイル」をはてなブックマークに追加 「HTML5のMovable Type 5テーマ作成中 | ブログ | アットスタイル」をdel.icio.usに追加 「HTML5のMovable Type 5テーマ作成中 | ブログ | アットスタイル」をTwitterでつぶやく

MovableType 5(MT5 MTOS5)テーマ1030 MovableType 4.2 無料テンプレート 2Column HTML5を元にして、HTML5でマークアップしたテーマを作成中

HTML5でマークアップ中のMT5テーマ

MovableType 5(MT5 MTOS5)テーマ1030 とは全くの別物。

まだ検索以外のシステムテンプレートとサイドバーには手をつけていない。なかなか進まないが今月中に完成させたい。

ページ先頭へ
2010年7月14日

zenback ベータテスト開始!

Posted by @Style : Entry 17:55 | Comment コメント (0) | Trackbacks トラックバック (1) 「zenback ベータテスト開始!:ブログ | アットスタイル」をはてなブックマークに追加 「zenback ベータテスト開始! | ブログ | アットスタイル」をdel.icio.usに追加 「zenback ベータテスト開始! | ブログ | アットスタイル」をTwitterでつぶやく

先日のニュースリリースで面白そうなのでベータテストに登録していた。

シックス・アパートが、ブログ/メディア向けの ソーシャルメディア相互連携ツール「zenback」を発表

zenback」とは?

zenbackは、ブログ記事のテンプレートにスクリプトコードを埋め込むことで利用できます。ブログの記事の下や横に、

  • その記事に関係する自分のブログ記事
  • その記事に関係する他のzenbackユーザーのブログ記事
  • その記事についての最新のTwitterのつぶやき
  • その記事についてのはてなブックマーク
  • その記事の最新のアクセス元(リファラ)

を表示します。

zenbackによって、今までは1つ1つ独立している印象だった「ブログ」が、他のブログや他のサービスとゆるやかにつながり、大きなソーシャルの輪となっていきます。

このブログの個別ページに実装してみました。

記事のすぐ下にテンプレートタグで表示している「関連記事」は新しいものから拾ってきますが、zenbackではランダムに古い記事からも(件数は指定できる)表示されているようです。

気になったらzenbackベータテストへお申込み!

ページ先頭へ
2010年7月03日

MovableType 4.2 2Column HTML5の解説(サイドバー)

Posted by @Style : Entry 01:28 | Comment コメント (0) | Trackbacks トラックバック (0) 「MovableType 4.2 2Column HTML5の解説(サイドバー):ブログ | アットスタイル」をはてなブックマークに追加 「MovableType 4.2 2Column HTML5の解説(サイドバー) | ブログ | アットスタイル」をdel.icio.usに追加 「MovableType 4.2 2Column HTML5の解説(サイドバー) | ブログ | アットスタイル」をTwitterでつぶやく

昨日までの「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: " ┗ ";
}
ページ先頭へ
2010年7月02日

MovableType 4.2 2Column HTML5の解説(コメントフォーム)

Posted by @Style : Entry 00:36 | Comment コメント (0) | Trackbacks トラックバック (0) 「MovableType 4.2 2Column HTML5の解説(コメントフォーム):ブログ | アットスタイル」をはてなブックマークに追加 「MovableType 4.2 2Column HTML5の解説(コメントフォーム) | ブログ | アットスタイル」をdel.icio.usに追加 「MovableType 4.2 2Column HTML5の解説(コメントフォーム) | ブログ | アットスタイル」をTwitterでつぶやく

昨日の「MovableType 4.2 無料テンプレート 2Column HTML5」の簡単な解説でコメントフォームについてやり残していましたので続きです。

コメントフォームでinput要素type属性の値に新しく加えられたemailurlを利用した。

<label for="comment-email">電子メール</label>
<input type="email" value="">

<label for="comment-url">URL</label>
<input type="url" value="" >
現在実装できているのはOperaだけらしいが、コメント時に妥当なメールアドレスやURLを記述しないでボタンをクリックすると、以下のようにエラー表示してくれる。

電子メールのエラー

URLのエラー

ページ先頭へ
2010年7月01日

MovableType 4.2 2Column HTML5の解説(ブログ記事)

Posted by @Style : Entry 01:26 | Comment コメント (0) | Trackbacks トラックバック (0) 「MovableType 4.2 2Column HTML5の解説(ブログ記事):ブログ | アットスタイル」をはてなブックマークに追加 「MovableType 4.2 2Column HTML5の解説(ブログ記事) | ブログ | アットスタイル」をdel.icio.usに追加 「MovableType 4.2 2Column HTML5の解説(ブログ記事) | ブログ | アットスタイル」をTwitterでつぶやく

引き続き、「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>
ページ先頭へ
2010年6月30日

MovableType 4.2 2Column HTML5の解説(幅の調整)

Posted by @Style : Entry 00:22 | Comment コメント (0) | Trackbacks トラックバック (0) 「MovableType 4.2 2Column HTML5の解説(幅の調整):ブログ | アットスタイル」をはてなブックマークに追加 「MovableType 4.2 2Column HTML5の解説(幅の調整) | ブログ | アットスタイル」をdel.icio.usに追加 「MovableType 4.2 2Column HTML5の解説(幅の調整) | ブログ | アットスタイル」をTwitterでつぶやく

ユーザーの方から「MovableType 4.2 無料テンプレート 2Column HTML5」でコンテナの幅を調整したいというご要望がありましたので、予定を変更してCSSでの調整を解説します。

コンテナやカラムの幅の調整方法

Layout部分36行め以降のheader#brandingdiv#contentfooter#copyで全体の幅を指定し、div#maindiv#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 .innerpadding-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

Movable Type 5用テーマ

Movable Type 4.2用テンプレート

ページ先頭へ