本日、CSS Nite in YAMAGATA Vol.2 が山形テルサで開催されました。
参加者は45名だったそうです（違ったら後で訂正します）。
一応、テーマから勝手に想像し、準備しておいたネタがあったのですが、
それを使うことなく、あっという間に終了。
やはりもう少し、全体のシナリオを打ち合わせしておくべきでした。
参加された皆さんには、消化不良な想いをさせて申し訳なかったです。
兎にも角にも、貴重な経験をさせていただきました。
ありがとうございました。
......買っちゃいました。
]]> 周囲の人たちが次々と iPhone に乗り換え、その話題で盛り上がる中、Flip mino HD
超小型でHD画質動画が撮影できるデジカムです。
[N]ネタフルさんの記事で知ったのですが、日本では手に入らないとか。入手された方のブログから、アメリカのAmazonで購入できるという情報はリサーチ済み。
国内で販売されているコンパクトデジカムも検討するも、デザインや価格面で納得いかないものばかり。
悩みに悩んだ末、Amazon.comに、Flip mino HDを注文。4日後に届きました。
いまは海外からの配送も早いんですね。
ということで、ガンガン撮影、使用中。レビュー等は、いつできるかな...。
]]>
当サイトは、レンタルサーバー『ヘテムル』を利用しています。
安価なサービスが数多くある中で、月額1,500円（年間18,000円）は、ちょっと割高。ですが、他社の同額プランに比べると、その機能は充実しており、いまもなお、新たなツールが開発、追加されています。
この他にも、動画や音楽配信、各種プログラム言語に対応。
個人ユーザーもガンガン使えるレンタルサーバーです。...どちらかといえば、クリエーター向けですが。ぜひ、お試しください。
先日の CSS Nite in Sendai でも取り上げられた HTML5 。
早速、当サイトの HOME と ABOUT だけ実験的に書き換えてみました。
ページ左上に「Coded in HTML5」と表示されているページです。
<header> 導入部やナビゲーションのグループ化を行います。
<nav> ナビゲーションとなるセクションを表します。
<section> 文書やアプリケーションにおける、一般的なセクションを表します。h1, h2, h3, h4, h5, h6 と共に用いることで、文書構造を表すことができます。
<article> blog エントリや新聞記事など、文書内で独立可能な部分を表します。
<aside> ページの主題とあまり関係のない内容を表します。
<footer> セクションのフッタを表します。フッタには作者に関する情報や、著作権情報などを含むことができます。
div の id 名に使っていた header や footer はそのまま変換。
そのほかも該当部分を置き換えていけば〜〜なんて考えていたが、
そう簡単な話ではありませんでした。
これらのタグはすべて"インライン要素"。
そのため必要に応じて"ブロック要素"に指定しなければなりません。
始めからブロック要素だったら、ソースコードがスッキリして、
もう少し使い勝手が良かったのに......という感じ。
HTML5 では、インライン、ブロック要素の定義を置き換える方向のようす。
それが影響しているのかもしれません。
作業はまだ終わりません。Interner Explorer 対策が残っています。
やっぱりという感じですが、IE は HTML5 の新タグを読み取らないのです。
ということで、以下の Javascript を head 内に追加してエレメントを定義します。
<!--[if IE]>
<script type="text/javascript" charset="utf-8">
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
</script>
<![endif]-->
ひとまず、今回の作業はここまで。
次は Blog 、Collection ページも HTML5 へ。
乞うご期待。
8月22日（土）、CSS Nite in SENDAI Vol.4 に参加。今回は『「Webのこれから」を考える』をテーマに、3つのセッションとパネルディスカッションが行われました。会場は、エル・パーク仙台。
]]> __ HTML5
- 前のめりでこんにちは！ HTML5 in 仙台
- Web制作者のための "a-blog cms"
- 〜ネットとリアル連動の可能性〜Webを軸としたコミュニケーションデザインのこれから
- パネルディスカッション『今後のWebはどう変化していくのか』
HTML4.01 の後継として進められてきた XHTML2 が終了。 当初の期待ほど普及しなかったらしい。そして、HTML5 が登場。紹介されたのは、
正直、HTML5 に切り替えるのはまだ先だと考えていましたが、これを機会に少しずつ勉強して、実用化できるようにしていこうと思います。
いまや、国産CMSとして有名な a-blog cms 。今回はWeb制作者のための〜というタイトルのとおり、管理画面までカスタマイズできる柔軟性には魅かれるものがあった。ちょっと後回しになるかもしれないけど、お試し版に挑戦してみようっと。
株式会社ワンパクの提供サイト『Are You Hot?』やレベルQとの共同プロジェクト『東京スイカ研究会』などの事例紹介。そこに映し出されている行為や時間すべてに、ものすごくリアルさを感じました。
今回のセッションも、非常に興味深い内容ばかりで勉強になりました。インターネットや雑誌などで情報収集していても、見返してみれば技術面ばかり。主宰の鷹野さんがおっしゃっていたように「テクノロジーばかり追い求めるのではなく、自分は何を目的に取り組んでいるのか」を冷静な目で見られるように心がけたいですね。
全セッション終了後、鷹野さんにごあいさつ。後日メールをいれさせてもらったら、mixi コミュニティができました。山形でCSS Nite を開催しましょう！
]]>自宅の無線LAN に LA FONERA 2.0（ラ・フォネラ2.0）
新機能や特徴などについては、いろんなところで紹介されているので割愛します。
ここで紹介するのは、ちょっと苦戦したセットアップ手順。
設定がうまくいかず、ヤキモキした人、多いんじゃないでしょうか。
__セットアップガイドに記載されているキャプチャ画面と異なり、疑問に思う。
__初期パスワードが不明でログインできずにイラつく。
__ログイン後は、セットアップガイドとは全然異なっていたので、ひとまず説明を無視
__登録ボタンを押しても FONログイン画面に移動しないという問題に直面する。
__FONマップに表示されない。ステータスも『Alian』のまま。
__同じ作業を繰り返し行うも、状況は変わらず。さらにイラつく。
以上が、LA FONERA 2.0 のセッティング完了までの手順。ここまでセットアップに労力を強いられようとは思いもしませんでした。ユーザーレビューでも書かれているように、ちょっと説明が不足しているようです。FON自体の機能はとっても魅力的だと思うので、マニュアル類は充実させてほしいですね。
]]>Movable Type 4.3 について | MovableType.jp
]]> このバージョンで改善された機能のひとつに「アイテム管理」があります。これまでブログ記事に画像を貼り付けるとソースコードに自動付加されていた <form> タグ。削除しても問題はありませんが、記事との関連性が失われるという代物。これが排除されるようになりました。
また、編集画面右上の表示オプションで「メタデータ - アイテム」を選択すると、右下に Assets 欄が出現。アイテムファイル名の一覧ですが、ロールオーバーによるサムネイル表示やアイテムの削除、新規に追加なども行え、操作性が向上しています。
『ver.4.3』で追加された機能や改善点については、小粋空間さんを参考にさせていただきました。» 小粋空間: Movable Type 4.3 リリース
その他の機能についても、徐々に確認していく予定です。
]]>
間寛平さんの挑戦が続く中、こちらも新たな企画で始まるようです。
2009年2月、沖縄県の首里城に到着し、約１年間にわたる全国縦断ウルトラジョギングを終えた『走る男』森脇健児さん。今度は、47都道府県をめぐり、地元のランナー100人と一緒に走るというプロジェクト。目標の全走行距離は4万キロだとか。
]]> そんな話を小耳にはさんだので、早速ホームページをチェック。そうしたらなんと、4月30日に山形県置賜地方をスタートし、そして本日5月2日、天童市で山形を制覇していました。結構、テレビやラジオでお知らせしていたようですが、まったく気づかず。走る男は、あっという間に走り去っていきましたとさ。おしまい。
2008年秋、山形市片谷地付近より撮影
魔界村、スペースインベーダーに続き、またゲームのお話。
今度は ロードランナーDS
さらに、チャンピオンシップロードランナーも収録されていますが、いまの私には到底先の話。時間をかけてコツコツ解いていこう。...なんて、のんきなことを考えていたら、パズルゲーム好きな妻が早々とロードランナー全50面をクリア。チャンピオンシップに挑んでいます。相当難しいらしい。
]]>いま私が採用しているのは、remove_html というグローバル・モディファイアを活用する方法です。プラグインは使いません。
]]> まず、カテゴリリストの作成。<01>About
<02>Works
<03>Contact
次に、このままでは <数字> が丸見えで格好悪い。非表示にしましょう。
テンプレート内にあるカテゴリ名を表示するタグに remove_html を追加
<$MTCategoryLabel remove_html="1"$>remove_html は、< 〜 > を HTMLタグと認識し、それを削除するモディファイア。設定することで、カテゴリ名の最初の数字を隠すことができます。
About
Works
Contact
比較的、簡単です。クライアント向けにプラグインを導入することが多いですが、カテゴリ名の追加や順番変更などの作業が少なければ、十分使える方法だと思います。
]]>
このシールがきっかけで、ウェブサイト構築が始まったんです。
]]> 最初は、ブログというものが広まりはじめたころ、無料ブログを借りて公開スタート。ところが、シール2枚目の表示が上手くいかず、泣く泣く断念。それからしばらく閉鎖状態でしたが、ドメインも新たに再開です。シールは全部で100枚程度ですが、コツコツアップしていきますのでご覧ください。
]]>
ウェブクリエーターなら、この１行を用いて何ができるか、おおよそ見当がつくはず。そうです、画像置換。テキストをブラウザの外へ追い出し、何もなくなったところに背景画像を表示するという有名なCSSテクニック。私もサイトのロゴマークやナビゲーションなどに使っています。ところが最近、「画像置換はなるべく使わないようにしよう」という話を耳にしました。
]]> どうやら、テキストを非表示にしてそれを読めなくすると、検索エンジンがスパムと見なす可能性があるかも...ということのよう。Googleのウェブマスター向けガイドラインに、ウェブサイトの品質に関する記述がありました。Avoid hidden text or hidden links. − 隠しテキストや隠しリンクを避ける
- Using white text on a white background − 白い背景に白い文字を使う
- Including text behind an image − イメージの後ろにテキストを含む
- Using CSS to hide text − テキストを隠すためにCSSを使用
- Setting the font size to 0 − フォントサイズを０に設定
これを見る限り、画像置換は「テキストを隠すためにCSSを使用」に該当します。ただ、この場合のSEOスパムとは、
「よく検索されるであろうキーワード」を文章にちりばめたり、意味も無く陳列させる事で検索上位に食いこもうとする。（Wikipediaより）
ということであり、ウェブクリエーターが使うCSSテクニックは、それに当てはまりません。幸い、これまで手掛けてきたウェブサイトは、スパムと認識されていないようです。少なくとも、意味のあるマークアップを心がけていますから。
それでは、今後どうするか。−「使います」。
CSSでウェブページのデザインを施す際、この方法を取り入れたほうがふさわしい場合があります。間違いなくスパムと見られるという状況なら話は別ですが、今はそうではない。「画像置換を使うとSEOに不利」と考えることも必要ですが、それを打ち消すくらいのSEO対策を投じるのも一つの考え方かと思います。
]]>
昨年から話題のネットブック。私は、日本エイサーの Aspire one を使っています。
ウェブサイト制作環境のひとつとして、主に WindowsXP / IE の表示チェック用と考え、昨年夏に購入。Eee PC 901 と悩んだ揚げ句、160GBのハードディスクとキーボードのピッチ幅が決め手となり、Aspire one をチョイスしました。
最近、デジカメで使っている xDピクチャーカード が挿せることを発見し、それ以降、画像データの取り込みに役立っています。
数年ぶりのWindowsXP操作は、若干戸惑いぎみ。Macintosh並みに使いこなせるようにいろいろとチャレンジしてみたいと思います。
先日、参加したCSS Niteビギナーズで、ちょっと話題にあがった小ネタ。
IE6を使って閲覧すると右上に『アナログ』って出るようにしようぜ。
と、twitter で hamashunさんがつぶやいたそう。
]]> ご存知のとおり、現在、地デジ非対応のテレビで番組をみると、右上にうっすらと「アナログ」と表示されます。2011年7月に迫ったアナログ放送終了を呼びかける周知のひとつ。これと同じようなことを Internet Explorer でやってみたらどうだろうってことらしい。試してみたい方は、CSS HappyLifeさんの記事を参考にしてください。
CSSハックを利用して、IE6 だけに「アナログ」と表示させる方法が紹介されています。
ウェブサイトを作成する際、ちょっと苦労するのが Internet Explorer 6 以下の表示調整。まだまだ IE6 、IE5 のシェアが高いようなので、無視することはできません。しかし、Firefox や Safari などのモダンブラウザと同じように CSS2 に対応した IE7、IE8 が発表されているのも事実。IE6 、IE5を否定するわけではありませんが、ユーザーにより快適な環境を勧めていくのもWebクリエーターとしての役割なんだと思います。
※当サイトはいまのところ、モダンブラウザ用に作っているので、IE6 以下で閲覧すると表示の不具合が発生します。また、アナログ表示も行いません。
]]>