Vicuna カスタマイズサイト Part3 - 3ping.org
Vicuna CMS ををカスタマイズして使用しているユーザーの中から「!?」となったものをピックアップ Vicuna カスタマイズサイト Part2 Vicuna カスタマイズサイト Part1 Feedback ページで他にもたくさんの素敵なカスタマイズサイトを見ることができます。 FC2ブログ用 Vicuna スキン FC2ブログはレンタルブログなので、Vicunaのスキンを構成するCSSファイルは他のCMSツールとは異なります。 そのため、Vicunaのスキンがfc2.Vicunaで使えるまでには大きなタイムラグがあったのですが、Vicunaユーザーのphiさんにご協力をお願いし、それまで対応していなかったスキンをすべてFC2ブログ用に作っていただき、さらに、配布を委託していただきました。 phi さん、ありがとうございます！ Black Vicuna スキン fc.Vicuna
Zen-Codingで楽々コーディング! + コツ1つ
話題のHTMLやCSSコーディングあしすとツールのzen-codingを触ってみました。すごい楽ちんこ! zen-codingって何？使い方は？という人は以下のページを見てくださいね。 Zen-Codingでできるあんなことこんなこと 知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた ある程度HTML/CSSのコーディングに慣れた人なら、ビジュアルデザインを含んだ文書があれば、それをもとに脳内でHTML構造に置き換えられますよね。デザインから興す人は、Photoshopを触りながら、同時に頭の中でHTMLを組み立ててる人も多いんじゃないでしょうか。 たいていの文書は、小さなパターンと大きなパターンの繰り返しだし、コンテンツに関しての試行錯誤はあっても、HTMLの記述で試行錯誤するってことは無いんですよね。(CSSのブラウザの実装の関係とかこの際忘れよう)
clearfixはちゃんと考えられていた - 3ping.org
clearfixの決定版を作るについてコメントしたのですが、なぜか僕のTypeKeyが認証失敗になってしまい、がんばって書いた文章がお伝えできず、消すのももったいないからこっちに書きます。 こんにちは。 僕も以前、clearfixの記述について、なぜあんなに複雑なのか疑問に思いました。CASE10の記述がfloatのclearに必要な最低限の記述とし、ピリオドやvisibility,heightは必要無いんじゃないかとさまざまなブラウザーで検証したのですが、contentで何かを記述しないとボックスが生成されずに正常にクリアできないブラウザーがありました。そして、生成したボックスを消すために、visibilityやheight:0が必要になりました。 モダンブラウザの中でも特にモダン（笑）なものに限ればCASE10だけで大丈夫のようです。ただやはりこういったものは出来るだけ多くのブラウザで
HTML5 と CSS3 で 死にたい
CSS3の「変形・アニメーション関連」のプロパティは面白いですね。これらのプロパティの登場によって、CSSの持つ表現力が「どかーん」と拡大するように感じました。この記事では、WebKit Nightly Buildsでの表示を対象に、 CSS3で新たに定義されたプロパティを色々と使ったサンプルを作ったので、それを紹介したいと思います。 サンプルページは、CSS3のプロパティの練習として作っていたので、 表示の対象はこれらのプロパティを先行実装しているWebKitエンジンのブラウザーの中でも、 描写速度が激的に改善されている開発者向けのWebKit Nightly Buildsになります。 Safari4やGoogle Chromeでも見られますが、アニメーションはスムーズに再生されません。また、HTML5のaudio要素に対応していない場合は音が出力されないようです。非常に高負荷な処理が盛
わーるど・わいど・うヱっヴ : 序
僕は以前、こんな妄想をしたことがあります。 ある時、宇宙人からメッセージが届いて、 「キミタチ ノ コト ヲ, シリタイ. ヨッテ,ゲンダイ ノ シンカ カテイ ト, シャカイ コウゾウ ヲ,ワレワレ ニ オシエヨ. ナオ,ショシキ ハ キミタチ ノ ダイタスウ ガ アツカエル コウゾウカ ゲンゴ デ, イイカンジ ニ タノムヨ. マ,スキニヤッテクレ.ピーガシャ」 世界中の科学者は慌てて会議し、宇宙人に返すメッセージの書式にHTMLを選択します。 ま、細かい事をすっ飛ばし、 あるとき、僕の Gmail の受信箱に「政府からのお願い」という題で次のようなメールが届きます。 「前略、世界各国からあらゆる分野の博士を揃えた。HTMLの記述部分を、もっとも時間のあまってそうな君に頼みたい。これは極秘任務となるが、だからこそ、孤立した世界から出られていない君が必要なのだ。」 そんなこん
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
LimeChatのテーマ作成で遊ぶ、WebKitのCSS3
iPhoneの購入と同時にWebKitを触り始めたのですが、CSS Level 2と3の一部の機能を、何の不安も無く使える製作過程に感動しました。ちょっと未来のテクニックを先取りして発見しちゃったような気分にもなりました。 (中略) MacのLimeChatがWebKitを使っていて、CSSで自由にテーマを編集できることを思い出し、ひとつ実験的なものを作ってみました。:after, :beforeプロパティから、WebKitが独自に先攻実装しているCSS3のAnimation、Transition, Transformプロパティ、IE6がくたばれば使える透過PNGを使ったエフェクト、新たな色の値のRGBAプロパティバリューなど、CSSの記述も今まで馴染みの無い不思議な感じになってたりするので、興味のある方はテーマを使ってみて下さい。 Mac OSX LimeChat ver.1.0 用テー
スキンカスタマイズの手引き - 3ping.org
Vicuna CMS で用意してあるスキンの利用方法を解説します。 土台用スキンの特長 Vicuna CMS で配付しているスキンは、レイアウトや配色変更等のカスタマイズを簡単に行えるよう工夫しています。どのスキンも一般的なレイアウトパターンには対応しているので、カスタマイズのベースとするスキンは、以下に説明する各スキンの特徴を考慮して選択してください。 Origin Skin もっともシンプルな形状のスキンで、 Vicuna のスキンは全てこの Origin スキン を土台に作られています。 コンテンツの領域と背景, メニュー領域と本文領域が色で区切られているスキンを作成する場合に土台として利用すると楽にカスタマイズできます。 画像を一切使っていないので、シンプルなデザインや、ポイントとなる画像をここから付け足していく場合にも、他のスキンよりも比較的楽に進められます。 Smart Can
MT4のテンプレートセットプラグイン - 3ping.org
Movable Type 4.1 で実装されたテンプレートセットのプラグイン機能ですが、早速 mt.Vicuna もプラグイン化しました。 プラグインでのテンプレートの適用方法説明、いくよ…いくよ…(2008.02-02 追記：mt.Vicuna 2.1.2からスキン同梱にしたので若干適用方法が変わりました) mt.Vicuna Template Plugin のダウンロード 解凍したものを mt/plugins/ にアップロード MT4.1 テンプレート編集ページの右下「アクション」から「ブログのテンプレートを初期化」を選択 mt.Vicuna を選択して確認、(この時点でテンプレートセットのインストールが終了) 再構築 (MT4.1から、また早くなってる) ｱｰ 凄い気持ちがいいです。 (インストールの詳細な手順は mt.Vicuna/Download を参照してください) 今まで手間
floatプロパティのテスト - 3ping.org
Comments:7 MaKOTO 2007年11月15日 01:27 こういう授業を受けている生徒さん達が羨ましいです。 web制作の道へ進む生徒さんは知らず知らずの内に近道を進んでいることに気づいていると思いますが、 ネスケ4の崩壊っぷりを見せて「お前たちは幸せもんだぁ」と武田鉄矢口調で言い放って欲しいです。 ※役所関連の仕事ではネスケ4.xが対象ブラウザに入る可能性がなきにしもあらずですが・・・。 wu 2007年11月15日 12:59 MaKOTOさん、お久しぶりです! 生徒たちは「ふーん」という顔で淡々と勉強しています。(笑 テーブルデザインを知らない人は、逆にすごい素直にHTMLとCSSを覚えられるようです。 「おじさんが勉強した頃は大変だったんだぞ」みたいな時代になるのでしょうか‥ ｶﾞｺﾌﾞﾙ。 sf 2007年11月21日 03:10 答えは？ wu 2007
mt.Vicuna for MT4 - 3ping.org
最新版 Update - 2007.12/16 mt.Vicuna2x 2.0からの変更点 コメントテンプレートの情報を変更 ウィジェットテンプレートをまとめる 2.0RCからの変更点 投稿者名の表示の不具合を修正 ダイナミックエラーページの不具合を修正 エントリ概要内部テンプレートを追加 コメント系のトピックパスをより適切に変更 2.0b6～8からの変更点 カレンダーの不具合を修正 サーチテンプレートの不具合を修正 投稿者名の表示の不具合を修正 2.0b5からの変更点 1行目のxml宣言の前に空白行が発生しないように修正 コメントフォームでクッキーのチェックボックスに関する問題を修正 サインインしない、匿名状態で投稿プレビューすると、記入欄が無くなる問題を修正 システム系テンプレートのbodyのclassを変更 ブログ記事リストでのbodyのclassを変更 CAPTCHA使用時の表示を
レイアウト切り替えスクリプト - 3ping.org
10coin.comのmarbleくんが、Vicuna CMS向けにレイアウト切り替えスクリプトを作成してくれました。どのようなものかは3ping.orgの右上にある「Layout Settings」というボタンで確認する事ができます。 Vicunaではbody要素のクラスでレイアウトを切り替える仕組みになっており、配布している純正のスキンは、全てのページで1カラムと2カラムでの表示を考慮して作られています。たとえば、この3ping.orgで使っているbazookaスキンでは、トップページ、個別ページ、カテゴリーや月別アーカイブも全て1カラムでも2カラムでも表示できます。(bazookaスキンは1,2カラムのみ、標準のスキンは1,2,3カラムのうちどれかを設定できます) このスクリプトは、Vicunaで配布しているスキン全てに対応しています。 今回作成されたJavaScriptは、body
MT:見出し問題解決。 - 3ping.org
テンプレートによってエントリーのタイトルの見出しを上下させる場合、エントリー記事内に見出しを含めると、そのエントリーを見るテンプレートによってエントリー内の見出しのレベルが適切にならないという問題に悩んでました。 エントリーのタイトルは<$MTEntryTitle$>、本文は<$MTEntryBody$>というMTタグでそれぞれ分離しているので、エントリータイトルの見出しのレベルはテンプレートを書き換えれば上下させられるんですが、本文の中に見出しを書いた場合は<$MTEntryBody$>の中にまとめられるので、展開される場所によっては適切なレベルにならないことがあります。 エントリー単体記事での見出しのレベル 下の図は、エントリー単体ページ(individual temp)で、エントリーのタイトルをH1にした見出しの階層です。エントリーを投稿するときには、記事内の小見出しのレベルが適切に
CSSNite LP, Disc3 行ってきたよレポート - 3ping.org
零次会 ついったー部のみんなとジョナサンで待ち合わせ。 あらかじめプリントアウトしておいたジョナサンの場所を示したGoogle Mapをセブンイレブンの姉ちゃんに見せて聞くも、「ちょっとわかんないですねぇ」といわれる。お礼をいって外でたら、その2階がジョナサンだった。どうなってんだ!! 初対面の人も多かったけど、なんかすんごい気軽に話せてびっこり。 みんなで僕の名刺を手書きで40枚製作。どうもありがとう! そのまま名刺配布。(どうもすみません、今度はちゃんと作ってきます) 12:15 davoくんと一緒に駅までRiszwさんとkomakuさんをおむかえ。 みんなでCSSNite会場へ向かう。思ってたより遠かった。 CSSNiteアフターパーティー ここでnicとmikiちゃんとkapponとカツオ合流CSSNiteアフターパーティの会場へ向かうためにみんなで歩く。 しばらく歩いたところで
CSSの記述テクニック 階層宣言コーディング - 3ping.org
2007-04-02追記 この記事は2007年4月1日にエイプリールフールネタとして書かれたものであり、紹介しているCSSの宣言ブロック内にセレクタを記述する方法は不正な書式であり無効です。 検索・他の記事から訪れた人は勘違いしないように注意してください。 CSSの記述はセレクタを並列に定義していくので、視覚的に構造を表すことができません。ここで定義グループごとにファイルを分割して管理したりする方法が有効になるのですが、これもXHTML文書の構造を頭にいれておかなければならないし、文書とビジュアルの結びつきをきちんと設計しなければ分割する意味がなくなってしまいます。 今日は、これらの弱点を埋める「階層宣言コーディング」という記述方法を紹介します。 次の記述は単純に文脈セレクタを使った記述です。 p.caution { color: red; font-weight: bold; } div
MTで実践 - CSSのモジュール化による管理方法と遊び方 - 3ping.org
1年ほど前からMAQUEというMovable Typeのテンプレートを配布しているのですが、利用者も増えて色々とフィードバックをもらい続けていたので、それを活かして新しいものを作りました。βテストも終わって細部を修正して正式リリースしたのでMTユーザーやMTに興味ある方はみてください。そして、それで実践したCSSファイルのモジュール化による管理方法とカスタマイズ方法について解説します。MTユーザーでない方もローカルで確認できるパッケージがあるのでよかったらいじくってみてくださいね。 Movable Type テンプレート mt.vicuna Movable Typeのデフォルトソースを1から書き直し、シンプルで軽量、XHTML1.0 Strict DTD準拠です。基本的には1つのテンプレートソースに対して好みのスキンをあてこむ形で色々なデザインのウェブログが作れるようになっています。ごちゃ
Firefox アドオン はてなブックマークカウンタ - 3ping.org
miniturbo.orgのkzくんがFirefoxアドオンはてなブックマークカウンタというものを作ったので早速入れてみた。HatenaではHatenabarというアドオンが配布されていますが、僕のようなはてなユーザーではないものにはツールバーとしてはあまり使用しない機能が多い。 はてなブックマークカウンタを導入すると、ブラウザウインドウの下部(ステータスバー)に、現在表示中のページのHatenaブックマーク数が表示されるようになり、左クリックによってはてぶコメントへジャンプできるようになります。 右クリックで表示サイトの注目・新着・人気エントリー、そして、はてなブックマークに追加という４つのメニューがポップアップで表示されます。機能的にシンプルで邪魔にならないのがいいですね。 導入して面白いと思ったのは、何気なくブラウジングしてても「えーこんなページ俺しか見なそうなのに 10usersだ
XHTML CSSの書籍を執筆しました - 3ping.org
(Amazonから買えるようになったもようです) 九天社より出版される「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips」の執筆をさせていただき、まもなく発売となるので宣伝させてください。 本書籍はhxxk.jpの真琴さん、lucky bag blogのe-luckさんとの共著で、それぞれが連携しながら得意なパートを担当して書き上げました。大まかな構成は次のようになっています。(詳細なアウトラインは記事下部にあります) XHTML, CSSの基礎知識と管理方法 レイアウト編 Tips&Tecnique ずっと作りたかった構成ができた! CSSはまず『(X)HTMLありき』であり、(X)HTMLの正しい知識を覚えた上で学ぶものです。そこで、まずレイアウトや実線編となるまえに、Web Standardsの考え方や(X)HTMLの基本、プレ
CSS のコメントの書き方コレアレ
CSSもHTMLと同じように、ソース中にコメントを挿入することができます。 /*と*/で囲った文字列がコメントになりますが、入れ子にすることはできません。また、他のプログラムにあるような「#」や「//」といった単一行コメントはありません。 適切なコメントを挿入することで、複数人での作業するときや、時間がたってから編集するときなどにコードの見通しが良くなります。ブラウザ間の差異を埋めるための宣言やハックなんかも、適用させるブラウザ名や理由などをきちんとコメントで書いておきたいですね。 僕は、スタイルをグループに分けて記述するときなど、コメントを目立たせるために次のように記述しています。 /* ------------------------------ Header ------------------------------ */ div#header { } . . /* -------
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
