No.521

WebbingStudio:080504

本サイトを、ようやくリニューアルしました。

札幌のWebデザイナー ブログデザイン/ホームページ作成/テンプレート販売 : WebbingStudio

前回のデザインは一年半愛用していましたが、その間にMovableTypeが4.1までアップ、私も制作スキルが向上したこともあり、二ヶ月かけて根本から構築をし直しました。

…とは言え、私的には相変わらず納得が行ってません。
トップページ後半部分、メールフォーム、コラムはまだ準備中。内部システムの不調らしく、検索も頻繁にエラーを吐き出してしまいます;;
また、このブログ用のデザインも作成していますが、まだこちらの構築には手を付けてません。

まずはお仕事が第一なので、時間を見つけて拡張していくことになると思います。
ではでは、詳細は追記にて :D

More

WebbingStudioトップページ右上

デザインに関しては、構築直前まで「何かたりないなー」と思っていたのですが、
ナビゲーションやメインイラストの背景をスケスケにしたところ、トップ画像が多くなることで出る「重さ」がなくなって落ち着きました。
仕事でいただいた、デザインがお気に入りの名刺を見て思いつきましたwありがとーございますwww

尚、デザイン画はFireworksで全て作成しています。
PhotoShopと比べて簡易なイメージがあるFireworksも、グラデーションやマスク、ドロップシャドウのかけ方でかなり詳細な描画が可能です。興味のある方はこちらのページなど見てみてください。

Fireworksのチュートリアルいろいろ:DesignWalker

構築は全体に、MovableType4以降の拡張タグ、変数、条件分岐をふんだんに使ったデザインになっています。
MovableType4、WordPressのデフォルトテンプレートの
モジュール・インクルードを全て空にするとHTML構造が成立しなくなる
という構成が嫌で(というかそんなものはモジュールと言わないだろう…)、HTMLや独自タグを書き直し、あちこち改良しました。

WebbingStudioトップページ新着情報

「新着情報」の部分も、前回は単純に「Information」のカテゴリーに属する記事を逆順で表示していましたが、今回はさらに条件分岐を組み込んでいます。
記事の本文・追記の有無によって、新着情報によくある三つのパターン
「Informationの詳細URLにリンクする」「更新したページにリンクする」「リンクしない」のHTMLを書き出します。

本文と追記が別フォームになっている、MovableTypeならではのカスタマイズです(WordPressだと別途カスタムフィールド追加が必要になります)。
今後仕事で構築したり、販売するテンプレートに組み込みたいなと思っています。

WebbingStudioコンテンツタイトル部分

ページアーカイブ部分の、コンテンツトップとそれ以外でタイトル表示が変わっている部分も、MovableTypeの前バージョンでは難しかったカスタマイズです。
具体的には「MTPageBaseName」(記事のファイル名/スラッグ)を「MTSetVarBlock」に読み込ませて「MTIf」で判定を行い、値が「index」だった場合に吐き出すHTMLを変更しています。

「MTIf」と「MTSetVarBlock」関連は、とにかく奥が深いです。
バージョン4.1以降は四則演算や配列処理も可能になったので、テンプレートに直接PerlやPHPを書き込まなくても、安全に細かいHTML操作ができます。やりすぎると重くなってしまいますが。
ライセンス料の分くらいは(笑)使い倒して還元したいところです :P

ではでは、これからもWebbingStudioを宜しくお願いしますね。
…お前の話は長すぎてここまで読んでねーよって?サーセンw

Tag
WEBデザイン ビジネス MovableType CMS WEBデザイナー 

Comment

失敗に気付いて直すw

ヘッダの画像がよく見ると1pxずれてましたーi-237

Re:制作:WebbingStudio(MovableType4.1)

Webbingさん(HNの記事をみてこそっと呼び方を変えてみる)おひさしぶりですー。うおお、かわええ!と思ったので久々にコメントしてみました。やはりMTも魅力いっぱいみたいですねえー。自分はWordpressしか弄れないのでうらやましいです。

あ。body要素に指定されている背景の縦位置が上方向に1pxずれていたのでご報告です!あとwinIE6/7のみbodyにpadding-leftに1pxを追加しておくとウィンドウサイズが変わっても余白できなくなりますよー。い、以上ただのおせっかいでした><

lizさんおひさー

lizさんお久しぶりです 旦_(’ワ’*)

lizさんのようなセンスの良い方に「かわええ」と言っていただけると、頑張った甲斐があるものですー

WordPressでもPHPの知識があれば近いことができますが、独自タグだけで実装できるのがMovableTypeの強みです。
興味があれば、OS版などいじってみてくださいませ。

>body要素に指定されている背景の縦位置が上方向に1pxずれていたのでご報告です!

げ!
私の環境ではどのブラウザもずれなくなったのに…
(ネスケでは開業のお知らせが大変なことになってますが)
padding-leftの問題でないということは、Macか、XP標準テーマの状態で出てるのかも…

じ、実は今回、時間がなくてまだMac検証してない(笑)

ニゲローi-246

Post comment

管理者のみ読めるようにする

Trackback

trackback URL
http://webbingstudio.blog10.fc2.com/tb.php/521-bea3c381
引用して記事を書く(FC2ブログ用)