レイアウト

HTML5で組まれたブログのベースに使えそうな一式

MT underHatにヒッソリとMovable Type 5 のテーマを追加しました。

MT underHat テーマ 002 のキャプチャ
MT underHat テーマ 002 - カンバス | MT underHat

今回追加したテーマもHTML5使ってるんですが、HTML5のマークアップで一番悩みそうなアウトライン関係は敢えてあまり使わずに、分かりやすい部分だけ新要素を使ったりした感じでマークアップしています。

何と言うか、StrictっぽいHTML5 じゃなく Transitional みたいな感じって言えばイメージが伝わるかな。
入門用というか。
実際、ガッツリきっちりやっても、今後どうなるか分かりませんし、今は取りあえず触れてみるとかで良い気がしてます。
なので、触れやすい感じを目指してみました。

【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1

HTML5版の新規でサイトを作るのに使えそうな一式です。
今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。

今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。

社内のマークアップエンジニアとかって書いたら、これどうなのよ?とか話してた頃がちょっと懐かしくなった。
コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な?話まではしないからなぁ・・・

それはさておき、中身のご説明などを続きにて。

新規でサイトを作るのに使えそうなの一式。Ver 3

随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。

中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。
それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。

新規でサイトを作るのに使えそうなの一式。Ver 2

新しいdigiper staff blogが始まりました。

タイトルまんま、ピクトグラムを扱ってるサイト。社員ブログに型は無いので書きたいのを自由に書けるんです。
何気に、同じ職種なので負けないように頑張ります。っていう宣戦布告。

さて、以前公開した新規でサイトを作るのに使えそうなの一式。(あの人のパクりじゃないんだからっ!)を自分も使ったりしてたのですが、なんだかいけてない部分が目立ってきたので、修正してみました。
Ver2って言うのは、区別したいだけでたぶん中身はそこまで変わってません。

むしろ人によっては前のが相性が良いかもしれませんので、お好きなのを使ってもらえると幸いです。

えっと、ダウンロードは以下よりお願いします。

ちなみにダウンロードしたファイルのindex.htmlを開くと以下のようになってます。

【動画】 10分くらいで作るお手軽2カラム

GIGAZINEさんで紹介されていた「カムタジア スタジオ」を試してみたくて、ボクが実際に2カラムレイアウトのサンプルを組んでいる画面キャプチャを作ってみました。

これといった編集を行わずにやったのに、とっても素晴らしい出来でびっくりです。

複数ページを組むのに使えそうな感じ

「SBMに追加」ボタンは、自分の記事ブックマークしてもらえたかなぁ?どんなコメント付いたかなぁ?というチェックをするのに一番手っ取り早く見れる気がするので付けてるかな。後は、SBMの存在をチョットだけ意識してもらうとか?

さて、1ページもののサンプルやらテンプレートはいっぱい有るけど、実際のサイトで1ページしかないサイトはごく一部だと思う。
なので、複数ページが詰まったサンプルを作ってみました。

yuga.js 0.6.0がリリースされたのもあり、次はもうちょっとしっかりしたデザインで、yugaを使ってより実際のサイトに近いのでも作れたらいいなーとか妄想中です。

そんな訳で、取りあえず今回のサンプルのご説明みたいなことをば。

クリーンな水平分割が出来そうな2カラムサンプル

2カラムなサンプルです。
海外で流行気味?ということで、「クリーンな水平分割」が出来そうなサンプルです。

どんなもんか見たい方・欲しい方は以下よりどうぞ。

この辺で知りました↓
POLAR BEAR BLOG: 「クリーンな水平分割」がウェブデザインの最新流行?

新規でサイトを作るのに使えそうなの一式。(あの人のパクりじゃないんだからっ!)

08年6月4日追記:
コレの新しいの作りました。

11月7日追記:
contens.cssの56行と60行目の#contents部分でスペルミスしておました。
ごめんなさい...

現在は修正版になっております。
修正後のcontents.css
---

SO905iがやば過ぎる件。JOGですよ!じょぐ!!!すげー待ってた。アナタを心から待っていた。

さて、一行駄文はお終い。本題です。
毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。

んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。

以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。
どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう可能性が大きいです。はい。

コレはかなり社内向けというか、仕事で最初に使うのに使えそうな感じにしているので、incとかあったりもしますが、SSIとか使わない場合は不要です。

まぁ何はともあれ、以下よりDL出来ます。

3カラムサンプル18種

本題の前にお知らせ。RSSの登録先をこっちにしてくれるとうれしいです。近々ディレクトリ整理したいので。
http://feeds.feedburner.jp/csshappylife

では、本題に。

2カラムサンプル13種で宣言しておいて、放置してましたが重い腰を動かしてようやっと作りました。

というか、エントリー自体も時間が空いてしまい、申し訳ない限りでございます。。。
一度気が抜けると、中々書こうって思えないっすね。

今回は3カラムですが、ネガティブマージンを使ったサンプルが多い感じです。
殆ど経験が無い中作っていたので、なんか楽しくなってました。

個人的にはふいに思いついた、15番のサンプルとかが使えるかも知れないとか思ってます。
広告って載せたいけど、センターの位置をずらしたくない時とか有ると思うのです。

フロートボックスが並んだ時の右端のがカラム落ちしない方法みたいなのとIEのコメントバグ

タイトルが長い…

サイトやブログの価値を調べる10の指標とツール|前向きストラテジー
10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか?ボクはしっかりバテてダレてます。あんまり仕事してま…(加藤さまに給与減らされるので自重しました)

さて、そんな訳で本題ですが、下記みたいなレイアウトの時のお話です。
SampleImage 1

背景画像切り替え

ミクコレ的ノリでお好きな背景にして閲覧して頂ければと思います。
デフォルトの背景は、ボクの気分に応じて時々変更したり季節モノになったりするみたいです。

このページの上部へ