ブログ | アットスタイル http://atstyle.biz/blog/ アットスタイルのWebmasterがHTML・CSS・アクセシビリティ・Movable Type 等、気になる事について色々と・・・ ja Copyright 2010 Thu, 02 Sep 2010 01:57:57 +0900 http://www.movabletype.org/?v=4.27-ja http://blogs.law.harvard.edu/tech/rss ブログのタイトルを変更してサイトに統合しました 元々このブログは「Webmaster@Style」として別のドメインで開始しました。その後atstyle.bizへ移動したのですがタイトルがそのままになっておりました。

本日タイトルを「ブログ」としてサイトに統合しました。（Google Analyticsのコードも慌てて追加）

また、ブログ記事の「Twitterでコメントする」ボタンを「Twitterでつぶやく」とし、@atstyleを外しました。

今後もサイトのリニューアルは続きますが、HTM 5にできるのはいつ頃でしょうか...

]]> http://atstyle.biz/blog/archives/2010/09/02_0157.php http://atstyle.biz/blog/archives/2010/09/02_0157.php 400@Style Web Thu, 02 Sep 2010 01:57:57 +0900 最強のファイル共有 DropboxとWindows Live Syncとquanpを使う 仕事で複数のPCやMacを利用している。問題になるのがデータの共有。

AirMac ExtremeベースステーションにHDDを接続、AirMac Discとして利用出来るようにしているが、これが使いにくい。Windowsから繋がらない場合もありAirMac Extremeベースステーションの再起動が必要となる。これでは使えないので、Dropboxを使うようになった。

Dropboxは多くの方が利用されているので既におなじみ。
ところがWindowsにはApache HTTP ServerをインストールしてありDocumentRootを「Dドライブ」の「mysite」フォルダとしている。テンプレートを含むこのサイトのデータなど全てがmysiteフォルダ内にあり、My Dropboxで利用しにくいし、無料（2GB）では多くのデータを共有できない。

そこでWindows Live Syncを利用するようになった。容量無制限（フォルダ内のファイル数は20000未満だが複数のフォルダが作成できる）。クライアントソフトをインストールしてフォルダを指定するだけで登録している全てのデバイスでデータが同期される。

現在はWindows PC 1台・Mac mini・MacBookの3台でデータを同期ている。さらに各マシンは外付けHDDにバックアップも行っているので6箇所にデータがあることになる。バックアップ体制も万全で、どのマシンからも仕事ができる。

Windows Live Syncは共有フォルダーを使い外部へデータを渡すこともできるが、少し手続きが面倒なので、テーマの送信などにはquanpを利用する。メールアドレスがわかればiPhoneからでもファイルを送信できる。

準備はできても、なかなかMacに移行できないでいる...

]]> http://atstyle.biz/blog/archives/2010/08/28_0111.php http://atstyle.biz/blog/archives/2010/08/28_0111.php 500Variety Sat, 28 Aug 2010 01:11:23 +0900 文書型をHTML5に変更した 先週より仕事の合間に少しずつ、ブログ以外のページをHTML5に変更した。

まずは文書型を<!DOCTYPE html>とし、html5.jsを読み込ませたりxml:lang属性などを削除した程度で、セクショニングなどは手を入れていない。

新しいテーマも作らないといけないので、完成までにかなりの時間がかかると思う。

]]> http://atstyle.biz/blog/archives/2010/08/18_0128.php http://atstyle.biz/blog/archives/2010/08/18_0128.php 400@Style Web Wed, 18 Aug 2010 01:28:06 +0900 第一弾のサイトリニューアル完了 本日、第一弾のリニューアルが完了しました。

ブログ以外の階層構造変更により、ほとんどのURLが変わっていますが、.htaccessにてパーマネントリダイレクトを行っておりますので影響はありません。

＊各ページをブックマーク・リンクされている方は、できましたらURLの変更をお願いいたします。

お手数をおかけいたしますが、よろしくお願い致します。

]]> http://atstyle.biz/blog/archives/2010/08/12_1707.php http://atstyle.biz/blog/archives/2010/08/12_1707.php 400@Style Web Thu, 12 Aug 2010 17:07:43 +0900 只今、サイトリニューアル中 先日からアットスタイルのリニューアルを行っています。

本日、文字コードをShift_JISからUTF-8に変更したところです。（2005年オープン当初からメールフォームCGIの都合でブログ以外はShift_JIS...）

今後の方針は

  1. フラットになってしまった階層を適切に
  2. できればHTML5
  3. さらに、できればMovable Type 5で...

ご迷惑をおかけいたしますが、よろしくお願い致します。

]]> http://atstyle.biz/blog/archives/2010/08/07_0229.php http://atstyle.biz/blog/archives/2010/08/07_0229.php 400@Style Web Sat, 07 Aug 2010 02:29:54 +0900 MT DDC Tokyo テーマ編へ行ってきました 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は全く聞いてませんでした。すみません。舞い上がっちゃって私の後の方のもよく聞いてませんでした。

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

]]> http://atstyle.biz/blog/archives/2010/08/02_0257.php http://atstyle.biz/blog/archives/2010/08/02_0257.php 100MovableType Mon, 02 Aug 2010 02:57:14 +0900 HTML5のMovable Type 5テーマ完成しました 先日より作成しておりました「HTML5のMovable Type 5テーマ」が完成しました。

MT5テーマ

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

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

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

]]> http://atstyle.biz/blog/archives/2010/07/29_1142.php http://atstyle.biz/blog/archives/2010/07/29_1142.php 100MovableType Thu, 29 Jul 2010 11:42:55 +0900 HTML5のMovable Type 5テーマ作成中（その3） 極力装飾を入れずミニマルに徹底した。パイプやパンくず等CSSで表現できるものには画像を利用していない。前回お知らせした時には右サイドバーだったが、どうしてもバランスがとれない。左サイドバーに変更して、なんとか落ち着いた。

MT5テーマ

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

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

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

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

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

]]> http://atstyle.biz/blog/archives/2010/07/28_0056.php http://atstyle.biz/blog/archives/2010/07/28_0056.php 100MovableType Wed, 28 Jul 2010 00:56:37 +0900 HTML5のMovable Type 5テーマ作成中（その2） 先日より作業を行っている「HTML5のMovable Type 5テーマ」はこんな感じ。

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

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

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

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

ブログテンプレート

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

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

]]> http://atstyle.biz/blog/archives/2010/07/23_0152.php http://atstyle.biz/blog/archives/2010/07/23_0152.php 100MovableType Fri, 23 Jul 2010 01:52:14 +0900 MT5テーマを5,000円オフのキャンペーン 少し遅くなりましたが、毎年行っておりますキャンペーンを本日より8月20日まで行ないます。今年は「MT5テーマを5,000円オフ」の30,000円でご提供します。

Movable Type 5用テーマ

この機会にぜひMT5へアップグレード！

]]> http://atstyle.biz/blog/archives/2010/07/21_0133.php http://atstyle.biz/blog/archives/2010/07/21_0133.php 400@Style Web Wed, 21 Jul 2010 01:33:10 +0900 HTML5のMovable Type 5テーマ作成中 MovableType 5（MT5 MTOS5）テーマ1030 とMovableType 4.2 無料テンプレート 2Column HTML5を元にして、HTML5でマークアップしたテーマを作成中

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

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

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

]]> http://atstyle.biz/blog/archives/2010/07/19_0121.php http://atstyle.biz/blog/archives/2010/07/19_0121.php 100MovableType Mon, 19 Jul 2010 01:21:53 +0900 zenback ベータテスト開始！ 先日のニュースリリースで面白そうなのでベータテストに登録していた。

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

「zenback」とは？

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

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

を表示します。

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

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

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

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

]]> http://atstyle.biz/blog/archives/2010/07/14_1755.php http://atstyle.biz/blog/archives/2010/07/14_1755.php 100MovableType Wed, 14 Jul 2010 17:55:17 +0900 iPhone 4 Bumper(ブラック)が到着 一緒に注文したiPhone 4 Dockも「納期は5~7営業日」となっていたのですが28日に分割発送、30日に到着。本日、iPhone 4 Bumperが届きました。

ぴったりフォフィットし、開口部やボタンの作りは「さすが」と思わせるものがありますね。

iPhone 4 Bumper

普段は裸で使って、車（eKワゴン）での充電時にダッシュボード下の「プチごみ箱」に放りこむので、その時だけ装着の予定。

]]> http://atstyle.biz/blog/archives/2010/07/04_2340.php http://atstyle.biz/blog/archives/2010/07/04_2340.php 500Variety Sun, 04 Jul 2010 23:40:33 +0900 MovableType 4.2 2Column HTML5の解説（サイドバー） 昨日までの「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: " ┗ ";
}
]]> http://atstyle.biz/blog/archives/2010/07/03_0128.php http://atstyle.biz/blog/archives/2010/07/03_0128.php 100MovableType Sat, 03 Jul 2010 01:28:50 +0900 MovableType 4.2 2Column HTML5の解説（コメントフォーム） 昨日の「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="" >
現在実装できているのはOperaだけらしいが、コメント時に妥当なメールアドレスやURLを記述しないでボタンをクリックすると、以下のようにエラー表示してくれる。

電子メールのエラー

URLのエラー

]]> http://atstyle.biz/blog/archives/2010/07/02_0036.php http://atstyle.biz/blog/archives/2010/07/02_0036.php 100MovableType Fri, 02 Jul 2010 00:36:25 +0900