![よごれをデザインする - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記](https://cdn-ak-scissors.b.st-hatena.com/image/square/e0a9ef3d65565c92699f4ffc48a607446aebc9e4/height=288;version=1;width=512/https%3A%2F%2Fwww.designwalker.com%2Fwp-content%2Fuploads%2F2017%2F12%2Fgrunge01.gif)
1年ほど前からMAQUEというMovable Typeのテンプレートを配布しているのですが、利用者も増えて色々とフィードバックをもらい続けていたので、それを活かして新しいものを作りました。βテストも終わって細部を修正して正式リリースしたのでMTユーザーやMTに興味ある方はみてください。そして、それで実践したCSSファイルのモジュール化による管理方法とカスタマイズ方法について解説します。MTユーザーでない方もローカルで確認できるパッケージがあるのでよかったらいじくってみてくださいね。 Movable Type テンプレート mt.vicuna Movable Typeのデフォルトソースを1から書き直し、シンプルで軽量、XHTML1.0 Strict DTD準拠です。基本的には1つのテンプレートソースに対して好みのスキンをあてこむ形で色々なデザインのウェブログが作れるようになっています。ごちゃ
■一覧表はこちら 何気なく生活していると意識することはほとんどないが、私たちは様々な色に囲まれて生活している。そして、この目に入ってくる色は、人間の心理に影響を与えているのだ。ここでは、それらについて紹介してみよう。 赤は色の中で最も長い波長を持ち、人間の感情的興奮や刺激をもたらす色である。スペインの闘牛の布にも赤が使われているが、牛は色を判別しないという。観客が興奮するために赤が用いられているのだ。 ピンクは恋愛の色で、女性的なイメージがある。幸福・やさしさなどを感じさせるほか、肌を美しく見せる効果がある色だ。 オレンジは、陽気・元気・活発さを与えてくれるほか、食欲を増進させてくれる色でもある。朝の目覚めがよくないときには、オレンジ色を意識して取り入れると、血管や自律神経を刺激して身体を活動的にしてくれる。 黄色は明るさや希望などをイメージさせる色。この色を見ると脳の活性化が期待でき、身
CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。 むしろこのサイトの方向性的に有った方が便利だよなーと。 書くきっかけを頂き、感謝いたします。 ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。 最初にbodyに指定しておくと便利だと思う3つを。 body { background:#FFF url(../img/share/bg.gif) no-repeat left top; font-family:Verdana, "MS Pゴシック", sans-serif; font-size:80%; } じゃあ、詳細について色々書
関連リンク そろそろCSSハックの良し悪しについて考えてみる(書式編) そろそろCSSハックの良し悪しについて考えてみる(管理編) おまけ付き Re:CSS の用途をわざわざ (X)HTML に限ることはない スターハックに端を発するアレコレ スターハックに端を発するアレコレ まとめ編 フルCSSでサイトを制作する際に、まだまだ避けては通れないのがCSSハックです。 巷には色んなハックが溢れていますが、今回は良いハックと悪いハックを『書式』をキーにして考えてみたいと思います。 なお、ハックはあくまで最終手段であり、使わないにこした事は無いという事を、事前に書いておきたいと思います。 また、一部CSSハックと呼ぶには語弊があるテクニックもありますが、ブラウザ実装の差異に対する技術、といった意味合いで、この記事ではハックで統一しています。 バリデータに通るか否か まず最低条件として、バリデータ
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
ちょっと前に パンくずリスト(Topic Path)を作成する際に使えそうなサンプル8種(CSS HappyLife)というエントリーが盛況でしたが、今日はパンくずナビゲーションの論理構造面を補強する意味も込めて、(X)HTML マークアップの例を、サイト構造やサイトの目的に応じて、いくつか挙げてみました。CSS の話まで入れると長くなるので、今回は(も?)(X)HTML マークアップに話を絞ります。CSS については、特にセレクタまわりが結構 変わってしまいますが、ひとまず、HirasaWa さんのエントリーなどを参照してください。(気が向いたら、別エントリーを立てますけど、実際に書くかどうかは未定。) 階層型構造(tree structure) [2006-02-11 追記] 石川一靖さんより、「セマンティクスを重視するならa要素にrel/rev属性を加えてリンクの関係性を明示するのが
たまにこんな(↑)写真って見かけますよね。インパクト絶大な写真です。 そんな写真を簡単に作る方法がこちらで紹介されていました。ちょっと人とは違ったサイトを作りたい方はいかがでしょうか。 » Out of Bounds – The Something Awful Forums Photoshopで作成します。ではどうぞ! ↑ 元となる写真はこちら。 まず作るレイヤーは3枚。下から順に黒の背景、素材、フレーム用のレイヤーとなります(↓)。 ↑ 次に矩形ツールで白色の長方形を作成します。 そして、選択ツールで長方形の内部を切り抜きます。これでフレームができあがりました。 ↑ 次にフレームの形を変えます。フレームのレイヤーで「Ctrl+T」を使ってフレームだけを選択。 右クリックし、「遠近法」でフレームの形を変えます。「自由な形に」を選べば微調整も可能です。 ↑ あとは、不必要なところを黒く塗りつ
ブログや mixi に写真をかっこよく載せたい人は必見! 画像処理ソフトを持っていない人や、めんどくさがり屋さんにもピッタリのオンラインフォトエディタを2つご紹介します。ユーザー登録・インストールも不要で誰でも簡単にフォトショップ顔負けのかっこいい写真が簡単に作れちゃいます。 【PR】ネットで画像を無料加工 PXN8.COM - Online Photo Editor (やのさん thx!) 説明が不要なくらい作り方も簡単です。 すべてのブラウザ(IE、Firefox、Safari、Opera)に対応しています。 アンドゥ・リドゥ機能(やり直し) ズーム機能(拡大縮小) 明るさ調整 トリミング リサイズ 画像の回転 赤目の補正 歯を白くする処理 セピア加工 LOMO*(ロシア製のトイカメラ風) フィルター ラウンド(角丸) ボーダー ぼかし 雪 *参考::: Welcome to Lomo
あなたの知らない照明術 2007-01-16 今年初めのスゴ本に出会いました。寝る間を惜しんで長文エントリいきます。 頭がよくなる照明術 このサイトから -人 が購入しました 全体で -人 がクリック posted with amazlet on 07.01.16 結城 未来 PHP研究所 売り上げランキング: 5238 おすすめ度の平均: これで楽しく会社にいけるかな?!? 灯りは明るければよいと思っていました ふ〜ん、なるほどねぇ〜 Amazon.co.jp で詳細を見る もう、全ての人に読んでもらいたいです。 特に部屋の雰囲気を変えたいなと漠然と思っている方は今すぐ読むべきだと思います。 私はとくに何も考えずに読んだのですが、読後いてもたってもいられず24時間以内に間接照明器具を3つ揃え、照明リフォームを完了させていました。そしてリフォームの結果に大満足です。費用は約5000円。安い
ステルス・ウェブ・デザイン ステルス・デザインの方法という本がある。(Webテキスト) この本では、「レーダーで見つけにくいかたちは良いかたちである」という、 デザインに関する新しい理論を提唱し、その名前を「ステルス・デザイン」と命名している。 ステルス・デザインの理論には、まだ完全に煮詰まっていないところが残るのだが、 極めて大きく発展する可能性を秘めている。 このような面白いアイデアを出すパスファインダー・チームの皆さんには敬服する。 私はまず、ステルス・デザインの考え方を発展させる第一段階として、 「ステルス・ウェブ・デザイン」という方法論を考え、いくつかの提案をする。 その提案資料を作成したので、このエントリにupしておく。 この資料は、Mac用のKeynoteで作成した。PDFで出力すると、 画質が不足して微妙なニュアンスが伝わらないので、時間のある方には、 ぜひTIFF版を見て
Modern, well-designed web pages deserve special focus in internet. They receive that thanks to so-called CSS galleries, into them are such pages arranging. On this page you can find a list of quite 44 CSS galeries of whom webdesigners from all the world gathers inspiration. 個人的には下記のサイトなんかよく利用させてもらってます。 CSS Beauty CSS Bloom CSS Blast CSS Drive CSS Mania CSS Remix CSS Vault Darkeye Design Shack Unma
よくあるアイコン配布サイトまとめですが、自分へのメモ書きの意味も込めてエントリー。ドイツ語のページでよくまとまっているものがあったのでご紹介しておきます。よろしければどうぞ。 » Icon-Sammlungen — Software Guide ご利用の際には、それぞれの利用ライセンスに従ってご活用くださいませ。 ■ 「80×15」ボタン ↑ 3,400個ものミニボタンを公開しています。 Adam KalseyやLuca Zappaを使えば、ボタンの作成もできます。ブログのRSS用ボタンも簡単に作れます。 » George Taylor McKnight ■ intersmash.com ↑ 1,800のサイトから集められた300のアイコンを公開。矢印、記事、メール、吹き出しなどに使えるかわいらしいのがたくさんあります。サイズは16×16ですね。 » intersmash.com/300i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く