はてな記法とHTMLマークアップまとめ - dobby dog doughnut
はてな記法を使ったとき実際にどのようなHTMLが出力されるのか、CSS用にクラスやIDに特化したまとめを作ってみたよー。簡潔にするためにはと略してあります。 07/11/22 自動リンク系記法を追加しました。 07/11/21 とりあえず自動リンク系以外の記法だけ 見出し記法 記法 *[カテゴリ1][カテゴリ2]見出し HTML（1段表示） <h3> <a><span.sanchor>■</span></a> [<a.sectioncategory>カテゴリ1</a>][<a.sectioncategory>カテゴリ2</a>]見出し <span.timestamp>00:00</span> </h3> HTML（2段表示） <h3.title>見出し</h3> <p.sectionheader> <span.sectioncategory><a.sectioncategory>カテゴリ1
tech.nitoyon.com@hatena - はてブのCSSをカスタマイズしてみた
hatena毎日使っているのにデフォルトのスタイルのままになっていた「はてなブックマーク」の CSS を変えました。こんな感じです。 b:id:nitoyon「はてブ」の何となく分かりにくい部分を、分かりやすく見せることを目標に作ってみました。以下では、今回のデザインでこだわった「タイトル部分のアイコン」と「コメントのふきだし」について簡単に説明してみたいと思います。 タイトル部分のアイコンまずは、タイトル部分。デフォルトのタイトル部分のアイコンや数字の羅列は意味が分かりにくいですよね。マウスを乗せたらツールチップで説明が表示されるのですが、なんか直感的じゃない。この部分の数字の意味を分からずにはてブを使ってるひとも多いのでは…。 なので、画像を書き換えて分かりやすくしてみました。RSS の青くてかっこ悪いアイコンも、オレンジ色のおしゃれなやつに。いろんな人にお気に入りにいれてほしいので、
はてな（XHTML+CSSで組み直された）トップページ
はてなのサービス 人力検索（Q&A） アンテナ（更新チェック） ブックマーク ダイアリー（ブログ） フォトライフ（ウェブアルバム） グループ（グループウェア） RSS（RSSリーダー） カウンター（アクセス解析） グラフ マップ リング（ウェブリング） アイデア（要望市場） 検索 ポケットはてな（モバイル） ウェブサービス もっとはてな 便利なツール 機能変更・お知らせ 新着情報 機能変更・お知らせ 05/22 12:35 メールの改行について 障害情報 05/19 05:53 はてなグループ接続障害情報 メルマガ 05/19 5月18日の週刊はてな（音声版） スタッフ日記 05/17 はまぞうのテスト 05/21 [人物] 中村孝一郎 05/22 多摩川スケート はてなダイアリー 日記一覧 こんな人も書いてます スポンサードダイアリー Blog Title Text Text Text
はてな内の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; }こうすると、メインカラ
RSSモジュールを展覧会っぽく演出 - tikeda's blog
RSSモジュールで表示した写真を横スクロールで展覧会っぽく演出してみました。最近、ダイアリーのヘッダーを触っていて、何かヘッダーを使っていつもと違った見せ方が色々できそうだな〜と思いやってみました。普段ダイアリーのデザインをする時はテーマにする事が念頭にある為、「モジュール＝サイドバーに並べる」と考えてしまってますがその辺を考えず試してみました。 一見複雑そうですが、ヘッダーにモジュールを挿入しdivタグで囲んだだけで、後はCSSです。 <div id="art"> <hatena name="rss" url="http://f.hatena.ne.jp/domu/rss" template="hatena-photo" moduletitle="Okinawa Photo"> </div> <div class="main">CSSは、やっつけで、引き続きいじる予定なので日記には書きま
ＣＳＳに関して質問です。 .menu{ と ＃menu｛ の違いはなんでしょうか？
ＣＳＳに関して質問です。 .menu{ と ＃menu｛ の違いはなんでしょうか？
jwjのブックマーク - はてなブックマーク
カンプのデザインやパーツの作成など、Webデザインにも欠かせないPhotoshop。もっとラクに、もっと速くWebデザインするために、すぐに役立つ4つの時短テクニックを紹介します。 サイズ違いのバナーはまとめて使い回し Photoshopでよく作るモノの1つといえば、バナー。掲載場所や配信先によってサイズが異なるバナーをバラバラに作成すると使い回しが面倒だし、写真や文言に変更があったときにいちいち直すのが大変ですよね。 いろんなサイズのバナーを1つのPhotoshopファイルにまとめて作成し、写真やロゴをスマートオブジェクトで一元化しておくと、バリエーションをスピーディに作れ、修正にも対応しやすくなります。 例として、大中小の3つのバナーを一気に作ってみましょう。作成する最大サイズのバナーが収まるように新規ドキュメントを作成し、大きいサイズのバナーから作成します。 レイヤーに素材を配置して
はてなブックマーク - laiso / カスタマ
YouTubeのパートナープログラム（YouTubeに広告を表示して収益を上げるアレ）を使っているユーザー向けにYouTubeパートナーチームが「視聴者を増やす工夫と収益増加のヒント」というスライドを公開しました。 スライドの内容は割と実直な内容ですが、すべて実行すれば確かに効果が出そうな感じで、まさに基本的な内容ながら割とツボを押さえた中身になっており、非所にわかりやすく、YouTube以外のその他のプロモーションにも応用できそうな感じです。 スライドの詳細は以下から。 視聴者を増やす工夫と収益増加のヒント（基本編） - YouTube パートナーステーション まずは「必ず設定してほしい6つのこと」から。 1.動画タイトル・説明・タグを充実させる。 2.チャンネルタイトル・タグを充実させる。 3.動画ページバナーを設定する。 4.コメント・コメントの投稿・評価を許可する。 5.動画埋め込
ykrishnasのブックマーク - はてなブックマーク
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 124 124" fill="none"> <rect width="124" height="124" rx="24" fill="#F97316"/> <path d="M19.375 36.7818V100.625C19.375 102.834 21.1659 104.625 23.375 104.625H87.2181C90.7818 104.625 92.5664 100.316 90.0466 97.7966L26.2034 33.9534C23.6836 31.4336 19.375 33.2182 19.375 36.7818Z" fill="white"/> <circle cx="63.2109" cy="37.53
教えてはてなダイアリー - おれはおまえのパパじゃない
カテゴリ*[買い物]で表示すると崩れまくります。よくわかりません。なぜですか。あとid:kimchiさんからの指摘(id:kimchi:20050421:1114078206)。これも買い物カテゴリ関連。俺のHTMLがおかしいからに違いないのですけども、何がおかしいのかがよくわからない。 MTでいうMainIndexなページだとちゃんと<div class=”hatena-asin-detail">は閉じられているのに、個別ページやカテゴリページになるとこれが閉じられなくなるという症状。コメントをはさんでいるからでしょうか。 自己回答。やはりコメントのせいでした。 <div class="hatena-asin-detail-foot"><!----></div> このようなインチキなHTMLを、以下のように直した。 <div class="hatena-asin-detail-foot"
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
naoyaのはてなダイアリー - CSS signature
はてなアイデアで、はてなダイアリーの body に CSS signature なるものをつけてほしいという要望をいただきました。(いただきましたというか、ずいぶん前のものがあがってきた、というか。) 恥ずかしながら CSS signature というのは初めて耳にしたもので、最初は何だかわからなかったのですが、どうやら body の id にサイト固有の文字列を振って、ユーザースタイルシートを使いやすくしようというものらしい。(そうとは知らずにidea:5541を id にローカルな名前をつけるっていうのはあまり前例をみないっていうんで却下してしまった、ごめんなさい。) たとえばこの日記なんかだと <body id="d-hatena-ne-jp_naoya">と振っておくと body#d-hatena-ne-jp_naoya { ... }な CSS をユーザースタイルシートに定義して
Hatena::Group::CSS - はてなブックマークの構造
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
コメント欄がウザくならない方法 - チープカ
はてな, CSS | 前々から思っていたのですが、こういう風にするとコメントを隠すことができます。 div.commentshort{ display: none; } form div.commentshort{ display: block; } こうすることでコメントはコメント投稿欄でしか見れなくなります。そうすれば記事にコメントがついて読みづらくなるなんてこともなくてすごく便利だと思います。コメントを読みたいときはコメントページで見れますし。これを使えばいちいち外にトラックバックを表示する必要もなくなりますし、読者は自分の書いたコメントが他の人の目にさらされる機会が減るので気軽にコメントをすることができますし、管理者も気軽にコメントを無視できるという利点があると思います。はてなダイアリー日記（id:hatenadiary）と町山さんの日記にこれを導入して欲しい。ということでコメント
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://hatena.biaxial.org/pico/
はてな cssを使ったおしゃれなformのデザイン方法について書いてあるサイトを教えてください。web2.0的なフォームを作りたいと考えています。http://demo.moo・・
はてなダイアリー - はてなダイアリー - 1日分のHTMLテンプレートの構造
はてなダイアリーの構造