ようやくのことで当ブログのデザインも、オリジナルのテンプレートに変更しました。
MT4のテンプレート構成を本格的にじっくり解析しながらのカスタマイズだったので、なかなか楽しかったです。
さて、今回はこのブログでも利用している、スタイルシート(CSS)で角丸やドロップシャドウなレイアウトを実現するためのソリューション『The Octopus Engine』について、解説しようと思います。
と言っても、旧ブログで書いていた記事の転載なんですが。
Webサイトのレイアウトをデザインする上で、特定のブロックの角を丸くしたり、ちょっと変わった枠にしようとすると、背景画像を作って、テーブルレイアウト(tableタグをレイアウトに用いる)をする必要があります。
xhtml+cssがデザインの主流となっている昨今、正直テーブルレイアウトはダサい。
ということで、どうにかしてCSS(スタイルシート)で角丸レイアウトができないか、という人にお勧めなのが、The Octopus Engine(オクトパス・エンジン)です。
The Octopus Engine(オクトパス・エンジン)は、四方の角と上下左右の画像を用意し、CSS(スタイルシート)とJavaScriptによって、角丸等のデザイン性に富んだブロックレイアウトを実現するソリューションです。
JavaScriptは使いたくなければ使わなくてもOKですが、そうするとひとつのブロックを8つのdiv要素(タグ)で囲まなければならないという、あまり美しくないxhtmlソースになってしまいます。
現在のうちのサイトのように、The Octopus Engine(オクトパス・エンジン)を多用する場合はJavaScriptを使用したほうが良いでしょう。
使い方はいたって簡単です。
1. スクリプトのダウンロード
Dragon Labs | The Octopus Engineにて、The Octopus Engine(オクトパス・エンジン)のスクリプト「octopus.zip」をダウンロードします。
「octopus.zip」を解凍すると、JavaScriptのソースコード「octopus.js」と、各種レイアウトの画像ファイルが格納されたフォルダ「anemone」「seahorse」「shark」「squid」「swordfish」、そして各画像のPhotoshop(フォトショップ)プロジェクトファイルが格納されたフォルダ「psd」が展開されます。
2. ファイルのアップロード
「octopus.js」と画像をアップロードします。
とりあえず、画像は「anemone」「seahorse」「shark」の中からどれを選ぶと良いでしょう。
「anemone」は、さらに4つのバリエーションから選択できます。
3. JavaScript「octopus.js」の呼び出し
The Octopus Engine(オクトパス・エンジン)を利用したいページで、「octopus.js」を呼び出します。
具体的には、該当ページのhead要素(タグ)内に、下記を追加します。
<script src="/octopus.js" type="text/javascript"></script>
「octopus.js」へのパスは、環境に合わせて変えてください。
4. CSS(スタイルシート)の追加
CSS(スタイルシート)に以下を追加します。
.north { background: url(north.png) repeat-x top; }
.east { background: url(east.png) repeat-y right; }
.south { background: url(south.png) repeat-x bottom; }
.west { background: url(west.png) repeat-y left; }
.ne { background: url(ne.png) no-repeat top right; }
.se { background: url(se.png) no-repeat bottom right; }
.sw { background: urlsw.png) no-repeat bottom left; }
.nw { background: url(nw.png) no-repeat top left; }
各種画像ファイルのパスは、環境に合わせて変えてください。
5. The Octopus Engine(オクトパス・エンジン)を使うブロックに適用する
The Octopus Engine(オクトパス・エンジン)を使いたいブロックを、下記のdiv要素で囲みます。
<div class="octopus">～</div>
以上で完了です。
なお、使用する画像によっては下記の例のように、クラス「.nw」に何ピクセルかpaddingを入れないと綺麗に表示されません。
.nw { padding: 25px; }
また、「squid」及び「swordfish」は、利用方法が異なります。
どちらも共に3種類の画像と、CSS(スタイルシート)のborder(ボーダー・枠線)を併用するタイプのソリューションです。
こちらの利用方法はまた別の機会に。
ここまでが、旧ブログに書いた記事です。
ここからは追記。
この『The Octopus Engine』の最大の魅力は、「本来なら8つものdiv要素を入れ子にいないと実現できないことを、(JavaScriptをうまく利用して)たったひとつのdiv要素で実現している」ことにあります。
が、このJavaScriptがちょっと問題でして、ページ全体の読み込みが終わってからでないと、スクリプトが実行されない(＝角丸等にならない)ので、ちょっとサイズの大きなページだと、読み込みが終わるまでの間、微妙にレイアウトが変になるんですよね。
なので結局僕は、JavaScriptを使って、
<div class="octopus">～</div>
とやらずに、直接8つのdiv要素で囲むという、あんまり(かなり？)スマートじゃない方法を取っています。
<div class="north"><div class="east"><div class="south"><div class="west">
<div class="ne"><div class="se"><div class="sw"><div class="nw">
ここにコンテンツが入る
</div></div></div></div>
</div></div></div></div>
こういうことです。
我ながら、正直微妙……。
つぶやく
