チープカ - はてなダイアリーのデザインを作るうえでのtips
CSS | 01:06 | はてなダイアリーのデザインをいじる上ではてなダイアリー独自に気をつけなくてはいけないものについて例をあげてみます。DOCTYPE宣言が互換モードまず一番問題になるのがここでしょうか。気をつけなくてはいけないのはなんといっても「IEで見るとwidthにpaddingがふくまれる」という点です。これはIE7になっても変わりません。そのためwidthとpaddingを同居させた要素を記述した場合にIEと他のモダンブラウザでは表示が変わってしまいます。回避策で一番簡単なのは同じ要素にwidthとpaddingを同居させないということです。ただしはてなダイアリーの構造上h1とかでwidthとpaddingを一緒に使わざるを得なくなったりするのでそん時はハックするしかないです。はてなのヘッダを透明にするはてなのヘッダは配色がしやすいように、画像部が透過されるようになりました
tech.nitoyon.com@hatena - はてブのCSSをカスタマイズしてみた
hatena毎日使っているのにデフォルトのスタイルのままになっていた「はてなブックマーク」の CSS を変えました。こんな感じです。 b:id:nitoyon「はてブ」の何となく分かりにくい部分を、分かりやすく見せることを目標に作ってみました。以下では、今回のデザインでこだわった「タイトル部分のアイコン」と「コメントのふきだし」について簡単に説明してみたいと思います。 タイトル部分のアイコンまずは、タイトル部分。デフォルトのタイトル部分のアイコンや数字の羅列は意味が分かりにくいですよね。マウスを乗せたらツールチップで説明が表示されるのですが、なんか直感的じゃない。この部分の数字の意味を分からずにはてブを使ってるひとも多いのでは…。 なので、画像を書き換えて分かりやすくしてみました。RSS の青くてかっこ悪いアイコンも、オレンジ色のおしゃれなやつに。いろんな人にお気に入りにいれてほしいので、
人力検索はてな - Web関係でメシを食っている人に質問です。（制作じゃなくても営業関係でも何でもありです） Webでメシを食っていく上でのおすすめの巡回先を教えてください。 （オープ
Web関係でメシを食っている人に質問です。（制作じゃなくても営業関係でも何でもありです） Webでメシを食っていく上でのおすすめの巡回先を教えてください。 （オープン済みの回答との重複は基本的にNGで） 自分のおすすめはこんな感じです。 http://slashdot.jp/ http://www.gizmodo.jp/ http://jp.techcrunch.com/ http://satoshi.blogs.com/life/ http://akihitok.typepad.jp/blog/ http://labs.cybozu.co.jp/blog/akky/ http://zen.seesaa.net/ http://www.future-planning.net/x/ http://gigazine.net/index.php?/news/ http://www.sem-r.c
HatenaをXHTML+CSSで組みなおす
授業中、生徒は課題制作で忙しく僕は用無し。ってことで、○○○をXHTML+CSSで組みなおすシリーズ(?)第二段を勝手にこっそり作ってた。 なるべく皆が知ってるサイトで、コーディングが楽しそうなサイトを探してたのだけど、なかなか決まらず、結局、生徒のリクエストでhatenaのトップページを組みなおす事にしました。 hatenaは一部レイアウトにテーブルを使っているものの、基本はCSSでの段組がされているので、mixiを組みなおすような大きな軽量化は出来そうにない。なので、楽しみ方としては、いかに無駄なマークアップを減らしてシンプルなXHTMLで同じ見栄えを再現するかだ。 これがまた、パズルで遊んでいるときの感覚に似ていてとっても楽しい。近い将来、CSSで１つの要素に複数の背景画像がおけるようになったとき、このパズル感が失われてしまうと思うと残念でならない。(半分ホンキ) で、帰ってきて手直
効率よく育てやすくデザインする - tikeda's blog
デザイナーが1人だと効率のよいデザインワークってのが肝で最近意識してる事です。 CSS 言わずとしれてますが、後でページ追加したり、機能追加する時など上の項目をコピーして書き換えただけで、デザイナーじゃなくても項目追加を簡単にできます。 テキスト要素はなるべく画像にしない 特にタイトルとか画像にすると、後でページ追加したり項目を増やすのにデザイナーの作業が入るので。なるべく避けてます。 シンボルイメージはグローバルなイメージで サービスシンボルは一番の特徴を捉えるだけのシンプルに（ダイアリーだと「日記を書く」、人力だと「質問と回答」）。細かい特徴を含ませると後で追加された特徴や削除された機能がある度に手を加えないといけないので。 シンボル作りはillustratorで粘る 特にサービスのシンボルや利用頻度の高いアイコンはどんな使い方をどんなサイズで利用されるかが分からないので、photoh
1902-01-02
少々手直し中です。実は。 タグの説明 リンクを張るだけの説明 ヘッダにカテゴリーのリストを作ってみる解説 フッタにメールアドレスを書いてみる解説 日記文中のリンクの解説 URLリンク ISBNリンク ASINリンク googleリンク idリンク keywordリンク 捕捉A タグの概念 うーん簡単じゃ無いよな。下の文書は。 様々な人の手によって解説サイトが作られています。リンクを張っておきますので、目を通すことをお勧めします。 仕様書 HTML 4.01 Specification@W3C HTML 4.01仕様書 邦訳@補完癖抄 タグの概念 ごく簡単なHTMLの説明 -- 30分間(X)HTML入門@The Web KANZAKI 『タグ』と要素の違い リンクを辿るのが面倒だという方は補足A タグの概念をお読みください。 a要素を用いてリンクのアンカーを作成することが出来ます。 まず通
はてなダイアリーガイド
はてなダイアリーガイド目次 このガイドの目次です。作成中の原稿にリンクしています。ブログ（ウェブ日記）初心者からのステップアップ式。 導入部 - はてなダイアリーをまだよく知らない方向け 基本編 - 基本的な機能について。タグを書かずにできること 活用編 - タグを使ってリンクを張ったり、モジュールを取り入れたり 応用編 - スタイルシート(CSS)などを利用して、さらに応用 はてなダイアリーガイドとヘルプの索引 このガイドとはてなダイアリーのヘルプなどの索引です。現在は更新を停止しています。単語や目的からはてなダイアリーの説明を探す逆引きリファレンスとして利用できます。 はてなダイアリーガイド「はじめての案内板」 はてなダイアリーに来たばかりの人向けの案内板。はてなの公式なページを中心に紹介。 はてなダイアリーガイドへの要望 日記からこのガイドに対する要望を寄せるキーワードです。なにかあ
ダイナミック大熊信士 - スタイルシートなんか知らなくたって簡単！ はてなオリジナルデザイン！！
はてなダイアリーのデザインには二つの方法があります。一つは自分でスタイルシートを作ること。二つ目はてなが用意したテーマ使うことです。ほとんどの人たちがスタイルシートなんて知らなくて後者を選んでいると思います。僕もそうです。でも人気のあるデザインは使っている人が多くてひとと被りがちだし、せっかくのデザインなのにここをもうちょっとこうしたい、なんて思うひとも多いかもしれません。そんな人たちのためにスタイルシートなんてほとんどわからない僕がオリジナルデザインのダイアリーを作る方法教えちゃいます！ とりあえず僕がFirefox使ってるんでそれ前提にお話しますが、違う人は各々対応してください。 CSSをぶっこ抜こう とりあえず大本になるデザインテーマを選んでください。今回は「hatena_cinnamon」のテーマを使用します。 テーマを変更したトップページからページのソースを抜き出します。 デフォ
はてなのUIが使いにくいとかいう人は、順応性が低いだけなんじゃないの？：ekken
はてなのユーザーインターフェースが使いにくい、とかいう話が、はてなブックマークで人気で、支持を得ているようです。 僕がはてなダイアリーを利用し始めたのは、2003年の夏ごろだったと思います。 まだブログサービスの選択肢が少ない頃でした。当時、インフォシークの無料ウェブスペース（isweb）を使って「ホームページ」を運営して、PC雑誌で知った「ブログ」というものを試す為に、はてなダイアリーを始めてみたのです。 既にある程度のHTMLタグを理解している人間にとって、はてなの独自記法は、かなり違和感がありました。 当時はブログというもののメリットがよく分からず、はてな特有のキーワードリンクが鬱陶しくて、一ヶ月くらい続けた後に放置してしまいました。 そういう意味では「はてなのインターフェースは使いにくい」ということには同意なのですが、しかし、別の見方をすれば、はてなのユーザーインターフェースが悪い
Moo-t.blog - ■はてなのトッツキにくさ
なぜか「はてな」を使っていません。 なんとなーく、取っ付きにくい感じがする。 その原因は、画面デザインとインターフェイスにある となんとなーくは思っていたんだけど、↓この文 □naoyaのはてなダイアリー - インタフェースの話 はてなダイアリーのインタフェースの中心を作った id:jkondo 曰く「更新された画面にリダイレクトしてその画面が更新されたということが分かれば、メッセージでそれを教えなくても直感的に理解できる。それができる状況でメッセージを用いてそれを教えるのは冗長だ。」と言っていました。を読んで、なんか思いついたので、書いてみる。 このエントリーはこう続く…でもおそらくどんなに不慣れな人でも、更新直後の画面がそういう動きをするということを一回か二回経験すればそれは理解できると思うんです。取っ付き難さの原因を見つけた気がする…。 現在のブラウザを使ったNetサービスや
その場でデザイン編集@はてな
概要 はてなダイアリー、はてなグループ、はてなブックマーク、はてなアンテナのデザインをその場で編集します。 ダウンロード hatenadesigneditor.user.js スクリーンショット 使い方 まず編集ウィンドウを出します。 Operaの場合ブックマークレットを使います→デザイン編集 Firefoxの場合メニューのツール→User Script Commands→edit Hatena Designを選んでください テキストエリアにスタイルシートを入力して「プレビュー」を押してやると、その場でページのデザインが変わります。 テーマの変更もできます。この時点ではまだはてなのサーバーに情報は送られていません。 今選択しているテーマのスタイルシートを確認したいときは「CSS」を押すとcssファイルを別ウィンドウで開きます。 間違えてしまってやり直したい、というときには「やりなおし」ボタ
インタフェースの話 - naoyaのはてなダイアリー
一つ前のインタフェースの話。いろいろフィードバックをいただきました。ありがとうございます。 >
新ロゴ誕生までのアイデア - tikeda's blog
今回新しくなったロゴですが、レゴが原型となったことは以前に触れましたが、もちろんそれを具体的な形にしたり、それ以前にもアイデアだしをしたりしていました。その一部をご紹介します。 以前のロゴと同じように「Hatena」を取り入れたロゴマーク。結局シンボルを用いることになりました。 「知的」「遊び」などをキーワードに具体的なモチーフを出してみる。カードゲームにビリヤード、知恵の輪、パズルといった感じです。 この辺りはレゴをベースに具体化してみたものです。幾何学形態を用いて「？」の形を意識してイメージを出してみました。 全体の意図としては、当初考えていた？マークの由来、ビジュアルの美しさよりも、なにより「はてな」の姿を表してくれるそんなロゴを目指した末、新しいロゴが生まれました。 そんなこんなで生まれた、新ロゴをこれからよろしくってな具合です！？
はてなブックマーク - laiso / カスタマ
YouTubeのパートナープログラム（YouTubeに広告を表示して収益を上げるアレ）を使っているユーザー向けにYouTubeパートナーチームが「視聴者を増やす工夫と収益増加のヒント」というスライドを公開しました。 スライドの内容は割と実直な内容ですが、すべて実行すれば確かに効果が出そうな感じで、まさに基本的な内容ながら割とツボを押さえた中身になっており、非所にわかりやすく、YouTube以外のその他のプロモーションにも応用できそうな感じです。 スライドの詳細は以下から。 視聴者を増やす工夫と収益増加のヒント（基本編） - YouTube パートナーステーション まずは「必ず設定してほしい6つのこと」から。 1.動画タイトル・説明・タグを充実させる。 2.チャンネルタイトル・タグを充実させる。 3.動画ページバナーを設定する。 4.コメント・コメントの投稿・評価を許可する。 5.動画埋め込
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてな[日記タイトルを画像にする・日記タイトルに背景画像を入れる2]
「旅行びと日記」日記: はてブ個人ページのカスタマイズ方法