チープカ - はてなダイアリーのデザインを作るうえでの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 の青くてかっこ悪いアイコンも、オレンジ色のおしゃれなやつに。いろんな人にお気に入りにいれてほしいので、
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
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 Tips for はてなダイアリー：構造詳細
ここでは、はてなダイアリーの構造を少し詳細に解説しています。 そもそもCSSって何？ と云う方がいきなり見てもチンプンカンプンかもしれません。HTMLおよびCSSについては、以下のリソースが参考になります。 仕様書 CSS1の仕様書の原文(英語) CSS2の仕様書の原文(英語) CSS2の仕様書の翻訳(日本語) Ａ CSS2の仕様書の翻訳(日本語) Ｂ W3Cの仕様書等の文書の日本語訳集 リファレンス、バグ ごく簡単なHTMLの説明 スタイルシート1 - スタイル設定の方法 ばけらの CSS リファレンス CSSバグリスト＠CSSバグ辞典スレッド また、記述されたCSSが仕様に適合しているかどうか検証してくれるサービスがあります。 W3C CSS 検証サービス なにぶんミスの多い人間なので、誤字・脱字・不適切なマークアップ或いは完全な間違いなどの不備がありましたら、はてなの日記（Run,
ダイナミック大熊信士 - スタイルシートなんか知らなくたって簡単！ はてなオリジナルデザイン！！
はてなダイアリーのデザインには二つの方法があります。一つは自分でスタイルシートを作ること。二つ目はてなが用意したテーマ使うことです。ほとんどの人たちがスタイルシートなんて知らなくて後者を選んでいると思います。僕もそうです。でも人気のあるデザインは使っている人が多くてひとと被りがちだし、せっかくのデザインなのにここをもうちょっとこうしたい、なんて思うひとも多いかもしれません。そんな人たちのためにスタイルシートなんてほとんどわからない僕がオリジナルデザインのダイアリーを作る方法教えちゃいます！ とりあえず僕がFirefox使ってるんでそれ前提にお話しますが、違う人は各々対応してください。 CSSをぶっこ抜こう とりあえず大本になるデザインテーマを選んでください。今回は「hatena_cinnamon」のテーマを使用します。 テーマを変更したトップページからページのソースを抜き出します。 デフォ
CSSのぞき見ブックマークレット
posted by nano on February 27, 2006 19:45 tohatenacssbookmarklet はてなブックマークの、デザイン編集ページで編集できるCSSを覗き見したい人のためのブックマークレットです。 ?B CSSをのぞく （Firefox1.5でのみ動作確認しました。） 誰かのはてなブックマークのページで押せば、CSSのファイルが新しいウィンドウで開きます。ファイルの下のぶぶんにそのユーザーが追加したスタイルが載ってるはずです。（はてなが用意したデザインテーマとかだったら表示されません） カッコイイデザインに出会ったら、このブックマークレットで覗いてみてパク参考にできるかもしれません。 (03.01.2006) ブックマークレットの中身は以下のような感じです javascript:url=location.href;urn=url.match(/ht
in te redi: はてなブックマークをカスタマイズ
posted by nano on June 10, 2005 06:51 tohatenatips はてなブックマーク日記 - デザイン編集機能の追加について(はてな) はてなブックマークににデザイン編集機能が追加されました。はてなブックマーク導入時に要望したトップページにリンクを貼る機能もこれで実現できます。 デザインガイド(はてなブックマーク) はてなブックマークの構造(?d:kamioka) とりあえず、上のエントリを参考にこのブログのメニューをのせてみたのですが、はてなのバナーより上にメニューを持ってきたので、どこぞのiframeサイトみたいな感じに； →はてなブックマーク - nanomemo ソースをメモ。気に入ったのがあったらコピペして下さいませ ・ページのヘッダ <hatena name="usersearch"> <div id="ban"> <div class
その場でデザイン編集@はてな
概要 はてなダイアリー、はてなグループ、はてなブックマーク、はてなアンテナのデザインをその場で編集します。 ダウンロード hatenadesigneditor.user.js スクリーンショット 使い方 まず編集ウィンドウを出します。 Operaの場合ブックマークレットを使います→デザイン編集 Firefoxの場合メニューのツール→User Script Commands→edit Hatena Designを選んでください テキストエリアにスタイルシートを入力して「プレビュー」を押してやると、その場でページのデザインが変わります。 テーマの変更もできます。この時点ではまだはてなのサーバーに情報は送られていません。 今選択しているテーマのスタイルシートを確認したいときは「CSS」を押すとcssファイルを別ウィンドウで開きます。 間違えてしまってやり直したい、というときには「やりなおし」ボタ
TK-BLOG: はてなダイアリーのデザイン
幣サイト「TK-BLOG」ではPDA関連の情報とか、有用なネタを書くようにしてますが、日記とかのほとんど価値の無さそーなこと＾＾は、TK-Hatena（はてなダイアリー）の方に書かせて貰っているのですが、良く「どうやって、はてなのデザインを本家(こちら)のようにカスタマイズしたのですか？」と聞かれます＾＾； どうやって？と聞かれると、「頑張ってCSSをイジりまくる」としか言いようが無いのですが＾＾、その作業を楽にするモノはあります。 Mozilla（Firefox）用のエクステンションで「EditCSS」というモノですが、普通にオンラインでページを読み込むとサイドバーに読み込んでいるCSS情報が表示（外部ファイルも）されます。 そこからがスゴイのですが、そのサイドバーのCSSを修正するとリアルタイムにページ側もそのスタイルに変更されます＾＾。 んで、後は望みのスタイルに見ながら仕上げて行く
Hatena::Group::CSS - はてなブックマークの構造
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてな[日記タイトルを画像にする・日記タイトルに背景画像を入れる2]![はてな[日記タイトルを画像にする・日記タイトルに背景画像を入れる2]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c2399268c45f05176589994884651cf8a795231e/height=288;version=1;width=512/https%3A%2F%2Flive.blog-tags.st-hatena.com%2F%2F_next%2Fstatic%2Fimages%2FogImageDefault-0b14dbf84ffadcafc73ec8b1d951813c.png)
「旅行びと日記」日記: はてブ個人ページのカスタマイズ方法