cssに関するPultraManのブックマーク (35)

  • はてなブログ | 無料ブログを作成しよう

    ネイルで使う材料で、DIY時の木割れやネジ跡を派手にしたらかわいい OSB合板でちょっとしたボックスをつくりました。 ビス止め下手すぎて木を割ったり穴あけすぎたりした場所に、好きな派手色の樹脂を詰めてパテ代わりにしてみました。 ちょっと某HAYっぽみ出て可愛かったので、自分用にメモです。 手順 塗装 派手色グミジェルで失敗部分…

    はてなブログ | 無料ブログを作成しよう
  • [CSS]気をつけたいIE 7のバグ -CSS-Discuss

    CSS-Discussにアップされている「IE 7 Bugs」の意訳です。 省略している箇所も多数あるので、原文も参照ください。 Internet Explorer Win Bugs - css-discuss 注意: バグには、IE7のみでなく、IE 5, 5.5, 6のものも含まれています。 公開されてから時間が経っているためか、ちょっと古いものもあります。 IEのフォントサイズのバグ フォントサイズの継承 IEの相対指定のフォントサイズの継承は、うまく機能しません。 相対指定を行う場合、emより%で指定を行う方が便利です。もし、em指定を行う場合は最初に%指定を行ってください。 例: body{ font-size: 100.01%; } ※100%の代わりに100.01%を使用するのは、Operaでの継承バグの回避のためです。 キーワード指定でのサイズ フォントサイズに「small

    [CSS]気をつけたいIE 7のバグ -CSS-Discuss
  • はてなスターの画像が自由に変更できるようになりました - はてなダイアリー日記

    さきほど、はてなスターの機能拡張を行い、スタイルシートで設定するだけで簡単にはてなスターの画像を変更できるようになりました。この方法を使うと、はてなダイアリーなど、スタイルシートが編集可能な環境ならどこでも簡単に画像を変更できます。 今回の機能により、「Commentボタン」「Addボタン」「☆」のそれぞれの画像を変更することができます。それぞれ以下の項目を編集することで指定が可能です。 /* Commentボタンの画像をurl()の中に指定します */ .hatena-star-comment-button-image { background-image: url(http://exapmle.com/comment.gif); } /* Addボタンの画像をurl()の中に指定します */ .hatena-star-add-button-image { background-imag

    はてなスターの画像が自由に変更できるようになりました - はてなダイアリー日記
    PultraMan
    PultraMan 2007/09/07
    重くなるけど、スター側で画像設定してブクマページでも表示できたら新しいのに
  • はてブの星を消すユーザースタイルシート(Firefox) - チープカ

    はてな | 21:26 | http://hatena.g.hatena.ne.jp/hatenabookmark/20070817/1187335133ブックマークページとお気に入りに表示される星を表示させなくします。 @-moz-document url-prefix(http://b.hatena.ne.jp/){ span.hatena-star-comment-container, span.hatena-star-star-container{ display: none !important; } }

    PultraMan
    PultraMan 2007/08/17
    はてな星まみれ
  • スタイルシートによる崩れない 2カラム 3カラム・レイアウト

    このウェブサイトは販売用です! desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています!

  • 画像の使用を極力控えてかっこいいCSSデザインをやってみよう

    Latest topics 2019.01.22 長々と運営していましたが、日を以て大会を終了とさせていただきます。沢山の方にご参加いただきましたこと、まことに嬉しく思います。Galleryは閲覧可能ですので、懐かしい気持ちになりつつご覧いただければと思います。 2007.04.15 公式html内に一箇所文字の誤りがありました。詳しくは2007-04-15のメモに書いておきました。要素の変更や構造の変更に変化は無いので、CSSを書く作業には影響がないのですが、気になる方はURIを参照して下さい。 Galleryが開通しました。フォームで選択してぽちっとするとサムネイルが表示されます。サムネイルをクリックすると、CSSデザインが適用された個別ページが表示されます。 よくありそうな質問に、CSSデザインは1人何個でも提出できる旨を追記いたしました。 2007.04.13 よくありそうな質問

  • はてなダイアリーの新ヘッダーをアレンジ - tikeda's blog

    はてなダイアリーの新しい基デザインを公開しました - はてなダイアリー日記 先日はてなダイアリーのヘッダーに新しい細いバージョンが加わりました。このヘッダーは、太いのよりもスタイルシートを使って見せ方をアレンジしやすいと思います。いくつか試しにアレンジしてみましたのでよかったら参考にしてください。実際にスタイルシートも載せて起きますので「詳細デザイン」のスタイル欄に入れれば見ることができます。ベースのテーマは新しいはてなダイアリー基デザインの「Hatena2」です。 Hatena::Diaryロゴとメニューの位置を入れ替える メニューを左に持ってきて右上に「powered by Hatena::Diary」のような感じにしてみました。 #simple-header { text-align: right; background: #5e7cb4 url("http://f.hatena

  • チープカ - はてなダイアリーのデザインを作るうえでの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 の青くてかっこ悪いアイコンも、オレンジ色のおしゃれなやつに。いろんな人にお気に入りにいれてほしいので、

    PultraMan
    PultraMan 2007/01/26
    素敵。
  • はてなダイアリーデザイン管理機能リリース - はてなダイアリー日記

    はてなダイアリーで、自分のヘッダ、フッタ、スタイルシートで記述した内容を保存し、また公開することで他のユーザーと共有することができる「デザイン管理」機能をリリースしました。デザイン管理機能へは、「管理ツール」の「デザイン」メニューからアクセスしてください。またこれに伴い「かんたんデザイン」と「詳細デザイン」の切り替えを画面左上のタブで行うようにしました。 今回の機能追加の内容をわかりやすい動画でご覧いただけます。以下のプレーヤーから再生してください。 以下、詳細な説明です。 デザイン管理機能 デザイン管理画面では、すでに現在利用中のデザインセット( 「ユーザー名さんのデザイン」 )が保存されています。変更したいデザインを選択し、「デザインを適用する」をクリックすることで複数のデザインを使い分けていただくことができます。 現在のデザインを編集するには アイコンを、新しくデザインを作成するには

    はてなダイアリーデザイン管理機能リリース - はてなダイアリー日記
  • 各ページHTMLの特徴付けについて(開発者様向け情報) - はてなダイアリー日記

    ユーザー情報ページ(about)、記事一覧ページ(archive)、クラシック編集ページ(edit)のHTMLにそれぞれ独自の id を設定しました。 それぞれ about hatena-about archive hatena-archive edit(クラシック) hatena-edit となります。 idea:228でご要望いただきありがとうございました。

    各ページHTMLの特徴付けについて(開発者様向け情報) - はてなダイアリー日記
  • 「Denim」テーマ追加 - はてなダイアリー日記

    id:DocSeri さまよりご提供いただきました、「Denim」テーマを追加しました。簡単デザイン・詳細デザイン設定より設定いただけます。 Denimテーマのサンプル テーマをご提供いただきありがとうございました。

    「Denim」テーマ追加 - はてなダイアリー日記
  • 2006-06-13

    はてなアンテナのスクリーンショット機能についてアンケートを開始しました 現在はてなでは、はてなアンテナの「アンテナ」「詳細」画面などにページのスクリーンショット画像を表示する機能の実装を検討しています。この機能について、question:1150175262にてアンケートを開始しました。皆さまのご意見をお聞かせください。 はてなスタッフより、はてなアンテナユーザーの皆さまにお尋ねします。 現在はてなでは、はてなアンテナの「アンテナ」「詳細」画面などにページのスクリーンショット画像を表示する機能の実装を検討しています。この機能は設定で表示/非表示を変更することができ、スクリーンショットを表示させた場合は添付画像のようなデザインになる予定です。 この機能が実装された場合、あなたはスクリーンショット画像を表示させますか? なお、アンケートは6月15日中に終了する予定です。 あなたはスクリーンシ

    2006-06-13
    PultraMan
    PultraMan 2006/06/13
    さて、どう弄るものか。
  • はてな内の2カラムレイアウト - tikeda's blog

    最近のリニューアルなどを経て、はてなのサイトは、2カラムでブラウザサイズに合せてメインカラムが可変するレイアウトが増えてるのですがキーワードページなどメインカラムの要素が様々だったり、カラムの上下左右と柔軟性が必要な場合が多く、色々やりくりした結果、floatを使った以下の方法で定着しています。 HTML <div id="main"> <div class="box"></div> <div class="box"></div> </div> <div id="sidebar"> </div> CSS #main{ float:left; width:100%; } #sidebar{ float:left; width:250px; background:#CCC; margin-left:-260px; } .box{ margin-right:260px; }こうすると、メインカラ

    はてな内の2カラムレイアウト - tikeda's blog
  • はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知

    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

    はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
    PultraMan
    PultraMan 2006/04/24
    "CSSを使って本文を読めないようにしたい人達のグループ"
  • 川o・-・)<2nd life - JavaScript や CSS の query に自動で最終更新時間をつける Rails Plugin

    最近いろいろなサイトで <script src="/javascripts/foo.js?1142509269" type="text/javascript"></script>や <script src="/javascripts/bar.js?v=2.3" type="text/javascript"></script>の記述を見るようになってきました。また CSS でも <link href="/stylesheets/foo.css?1142509300" media="screen" rel="Stylesheet" type="text/css" />といった記述もちらほら見かけます。 これは JavaScriptCSS を更新しても、ブラウザキャッシュが読み込まれているため、更新された JS ファイルなどがロードされない場合への対策です。上記のような最終更新時刻やバージ

    川o・-・)<2nd life - JavaScript や CSS の query に自動で最終更新時間をつける Rails Plugin
  • 「Hatena_leaf-red」テーマ - はてなダイアリー日記

    はてな提供の新テーマ「Hatena_leaf-red」を追加しました。簡単デザインからも設定いただけます。どうぞご利用ください。 「Hatena_leaf-red」のサンプル

    「Hatena_leaf-red」テーマ - はてなダイアリー日記
    PultraMan
    PultraMan 2005/11/17
    秋物。
  • Blogpetの広告を隠すことはできるか - 妄想科學倶樂部

    Blogpetが新しくなって下に広告がつくようになった。 無料で利用している以上文句も言えないが、正直陶しい事この上ない。 そこで、スタイルシートを使ってこれを覆い隠してしまおうと思う。 Blogpetのソースコード BlogpetモジュールはJavaScriptによって一連のHTMLを吐き出す仕様になっているので、普通にソースを見てもscriptタグしか表示されない。 そこでFireFoxの機能拡張「https://addons.mozilla.org/extensions/moreinfo.php?id=655」を使って、実際に吐き出されるタグを確認する。 <object id="usa" classid="clsid:..." codebase="http://..." align="middle" height="200" width="130"> <param name="al

    Blogpetの広告を隠すことはできるか - 妄想科學倶樂部
    PultraMan
    PultraMan 2005/11/04
    BPは使ってないんだけど、一応。
  • そが部

    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

    そが部
    PultraMan
    PultraMan 2005/11/03
    実はCSSグループ。完成度高。
  • connectをいじった - チープカ

    connectをいじった かんたん | 11:14 | g:pico:keyword:cpk:d:connect2 connectテーマはヘッダの関係で左寄せにしかできないのですが、ヘッダがあっても中寄せできる方法に気づいたので、それを使ってconnectをいじってみました。上のキーワードにCSSを公開してますのでご自由にどうぞ。 またこのg:picoではキーワードでくせのあるCSSを公開しあっていますので、ご自由にお使いください。あと部員募集中! http://pico.g.hatena.ne.jp/keywordlist 具体的にどんな風にしたかというと、例えば記事部が500px、サイドバー部が200pxだった場合に table{ width: 500px; position: absolute; top: 0px; left: 50%; margin: 0 0 0 -350px;