Hatena::Groupcss

つみきスタイル このページをアンテナに追加 RSSフィード

2007.1.27

[]nnとアンテナと分熊とRSSと私 09:12 nnとアンテナと分熊とRSSと私 - つみきスタイル を含むブックマーク はてなブックマーク - nnとアンテナと分熊とRSSと私 - つみきスタイル nnとアンテナと分熊とRSSと私 - つみきスタイル のブックマークコメント

いいかげんnnに飽きてはいるんですが、せっかくIE7が出てきて公開できたんだから(nn完成させようと思ったのはIE7が目立ってきてたから)、アンテナやブックマーク、出来ればRSSリーダのほうもnnとおんなじやつを作りたいなぁと思いつつ。やりたいとめんどくさいがこう、ね。

nnはデザイン寄りのテーマだからどうも機能重視のアンテナやブックマークと相性が悪い気がしてならない。便利なものを不便にするデザインは避けたいところです。

[][]今日見たIE7のバグに関連すること 00:14 今日見たIE7のバグに関連すること - つみきスタイル を含むブックマーク はてなブックマーク - 今日見たIE7のバグに関連すること - つみきスタイル 今日見たIE7のバグに関連すること - つみきスタイル のブックマークコメント

[][]nnに重大なバグが 00:14 nnに重大なバグが - つみきスタイル を含むブックマーク はてなブックマーク - nnに重大なバグが - つみきスタイル nnに重大なバグが - つみきスタイル のブックマークコメント

d:id:asukabさんに不具合のご報告を頂きました。見限ったりせずに教えていただけたのは本当にありがたいことです。

内容は、登録した画像の幅の分タイトル(h3要素)が左へずれる。原因は、

で、このバグが空のエントリー用に高さを指定してあったdiv.sectionに適用されて表示が崩れていたようです。ちなみにこのバグ、IE7正式版でも修正されてないようです。IE7StandaloneをRC1から正式版に変えてチェックしてみましたが、ばっちりずれました。IE7ではmin-heightが実装されたので、そっちでもこのバグが適用されました。

あぁ、思い出した。半年前の自分はこのために高さを指定しなかったのだな。じゃあどっかに書いとけよ!! 何ヶ月かにいっぺん思い出したかのように更新してたのが悪いですけど!!

と、これの修正のためにheightとmin-heightを0にしたのですが、今度はasin-detailのfloatで表示が崩れまくり。これはwidthを指定して解決しました。こうなることは分かっていたのに面倒くさがって指定してなかったのがまずかった。今のところ崩れてないからいいやってのはだめですね。

ついでなので、ほかにも公開してから気になってた部分を2つ3つ修正。AA記法が出来る前からちまちまと書いてたのでAA表示用のクラスがあったのですが、それをAA記法のdiv.ascii-artに対応させました。これでAA記法を使ってもきちんと表示されるはずです。もうひとつは原因が分かっていながらも修正箇所が多くて見なかったことにしてた左右ボーダーとパディングを設置した要素に後続する部分がずれるバグの対応。paddingと左右borderを同時に指定している部分に透明なborder-bottomを指定して、さらにIE6用にborder-bottom-colorを指定。border繋がりで、blockquoteにも使えるようにしてた見出し要素をpreにも使えるようにしました。あと、色違いごとに特別な指定をしたくないと言う理由で放っておいたnn yellowの見出し要素のキーワードリンクがIEで目立つ問題も修正しておきました。

以上の修正で気になってた部分は大体直せたのですが、div.sectionに高さを指定できなくなったので、IEで空のエントリーのタイトルが確実に重なるようになりました。これはもうどうしようもないという事にしておきます。CSSだけでheightを指定せずにfloatに隣接したブロックの高さを確保する方法は僕にはborderを指定するしか思い浮かびませんが、5emのborderを指定する根性はありませんのでやっぱ無理じゃないかと思いました。その旨も公開デザインの説明に書いて、つみきスタイルのURLを貼って置いたので、警告はしました、もうnnいいよね…?(一年以上nnと付き合ってるような気分だ)

そんなこんなで公開デザインにあるnnシリーズの更新をしましたので、nnを使用してくださっている方はインポートのやり直しをお願いします。CSSしか直してないのでスタイルシートの部分をコピペするだけでも問題ないです。お手数をおかけします。

2007.1.19

[][]IE7CSS攻略 01:11 IE7CSS攻略 - つみきスタイル を含むブックマーク はてなブックマーク - IE7CSS攻略 - つみきスタイル IE7CSS攻略 - つみきスタイル のブックマークコメント

MYCOMジャーナルさんいい仕事してます。

IE7正式版のCSS実装・バグ・ハックまとめ。IE7になって何が出来るようになったのかよく分かります。バグの対処法までばっちり載ってるので、4月のIE7自動配信までには対応できそうですね。

最初の数ページは「IEがんばったじゃん!」と見直してたんですけど、読み進めるうちに「あ…」と思いました。7でも出来ないことはあるし、7はよくても6以前がアレなんで結局アレでした。IE様とうまくお付き合いするためにはまだまだ気を使う部分が多そうです。

ognjenognjen2012/06/04 12:05Now that's sbulte! Great to hear from you.

hbktevdnvdhbktevdnvd2012/06/04 15:26J1ZFR2 <a href="http://kbgyyytgsmwg.com/">kbgyyytgsmwg</a>

crqkabymaxcrqkabymax2012/06/05 16:05ZG5kcR <a href="http://lumeekijdxda.com/">lumeekijdxda</a>

yoazvfadqjyoazvfadqj2012/06/06 14:13XmI7id , [url=http://krjljxzmuvnm.com/]krjljxzmuvnm[/url], [link=http://ldhtisvkshye.com/]ldhtisvkshye[/link], http://ctsmzuqmwxft.com/

2007.1.15

[]nnの"Diary","Menu"などを変更 13:44 nnの"Diary","Menu"などを変更 - つみきスタイル を含むブックマーク はてなブックマーク - nnの"Diary","Menu"などを変更 - つみきスタイル nnの"Diary","Menu"などを変更 - つみきスタイル のブックマークコメント

"diary"の変更

.main:before {
	content: "diary";
	display: block;

content: "diary";をお好きな内容に変更してください。

"menu"の変更

.sidebar:before {
	content: "menu";
	display: block;

content: "menu";をお好きな内容に変更してください。

LateishaLateisha2012/02/14 23:42No qesuiotn this is the place to get this info, thanks y'all.

szrcmnupszrcmnup2012/02/15 18:15md98JR <a href="http://aeiycrlkhgzs.com/">aeiycrlkhgzs</a>

bmqzgnslbmqzgnsl2012/02/15 21:51GP7PKV , [url=http://mlnyyymobfta.com/]mlnyyymobfta[/url], [link=http://finzgwzixaiz.com/]finzgwzixaiz[/link], http://tmiwxvfzazma.com/

bmspgtgydlbmspgtgydl2012/02/17 21:344cMhVL <a href="http://rffegsqczvul.com/">rffegsqczvul</a>

2007.1.14

[][]nnとか公開してきました 22:10 nnとか公開してきました - つみきスタイル を含むブックマーク はてなブックマーク - nnとか公開してきました - つみきスタイル nnとか公開してきました - つみきスタイル のブックマークコメント

前回一応完成ということにしていましたが、Operaで微妙に崩れていたり、色違い作ってるときにちょっと気に入らない部分が出てきたりで、またちょっと修正しました。あとIEで本文がないと崩れる問題も高さを指定して解決しました。そうだよheight指定すればいいんだよ…いままでずっと気づかなかった…

そしてなんとtDiaryにも対応。tDiaryの設定で、ヘッダに

<div class="hatena-body">

フッタに

</div>

を入れると使えるようになります多分。

そんな感じで色違いも無駄に6つ作って、せっかく公開デザイン機能があるので、そこにnn7種を投下してきました。色違いで7種も登録しちゃって全く迷惑な奴ですね。

そして今テーマ一覧見てきたら早速カスタマイズされててびっくりしました。ありがとうございますうへへ。


万が一気づいていただけたら以下を追加して欲しいなぁ

pre a.keyword,
pre a.okeyword {
	color: #fff;
}

[]グループの詳細設定のh3.subtitleについて 23:16 グループの詳細設定のh3.subtitleについて - つみきスタイル を含むブックマーク はてなブックマーク - グループの詳細設定のh3.subtitleについて - つみきスタイル グループの詳細設定のh3.subtitleについて - つみきスタイル のブックマークコメント

グループの詳細設定のh3にはクラスにsubtitleが指定してあり、それによってダイアリー部とは違った表示にさせることが出来るのですが、

  • RSSフィードの設定
  • ポイント受け取り
  • アイコン表示

の3つには何故かclass属性がついてない。過去にkamiokaさんがはてなアイデアにあげている(idea:1544)のだけどキャンセルになっている。

んでもって僕はアイデアポイントがないのです。

[]nnのhotvideoモジュールとかをphotoモジュールのように 00:05 nnのhotvideoモジュールとかをphotoモジュールのように - つみきスタイル を含むブックマーク はてなブックマーク - nnのhotvideoモジュールとかをphotoモジュールのように - つみきスタイル nnのhotvideoモジュールとかをphotoモジュールのように - つみきスタイル のブックマークコメント

/* ---------- hatena module/photo --------------------------------- */

/* .hatena-module .hatena-asin, */
/* .hatena-module .hatena-ean, */
/* .hatena-module .hatena-hotasin, */
/* .hatena-module .hatena-hotean, */
/* .hatena-module .hatena-hotvideo, */
.hatena-module .hatena-photo li {
	display: inline;
	margin: 0.5em 0.2em;
}

のうち、type="image"を指定しているもので、photoモジュールのように表示させたいモジュールのリストを追加してください。

hotvideoモジュールを追加する場合以下のようになります。

.hatena-module .hatena-hotvideo li,
.hatena-module .hatena-photo li {
	display: inline;
	margin: 0.5em 0.2em;
}

[]CSSカラーリストなんとかのURL変更 01:03 CSSカラーリストなんとかのURL変更 - つみきスタイル を含むブックマーク はてなブックマーク - CSSカラーリストなんとかのURL変更 - つみきスタイル CSSカラーリストなんとかのURL変更 - つみきスタイル のブックマークコメント

色違いを作る際に多少役に立ったので、どれ過去の記事でも読み返してみるかなとリンクを踏んでみたら「ファイルにアクセスできません」と出てしまいまして。なるほどCGIにリンクできないんじゃなくてcgi-bin以下のファイルにリンクできないらしい。勘違いしてた。

TomTom2012/06/06 11:57If you're reidnag this, you're all set, pardner!

bjnuiagybjnuiagy2012/06/06 16:42hPPbw5 <a href="http://yhmhvuswzuvr.com/">yhmhvuswzuvr</a>

libfdjzdgylibfdjzdgy2012/06/07 11:01UZ7pDA , [url=http://wfmybuzngibc.com/]wfmybuzngibc[/url], [link=http://bcgojcddybwt.com/]bcgojcddybwt[/link], http://gvrokuvpyivp.com/

libfdjzdgylibfdjzdgy2012/06/07 11:02UZ7pDA , [url=http://wfmybuzngibc.com/]wfmybuzngibc[/url], [link=http://bcgojcddybwt.com/]bcgojcddybwt[/link], http://gvrokuvpyivp.com/

mjibdsemjibdse2012/06/07 18:03HfXWzQ <a href="http://lhutqlotpwnu.com/">lhutqlotpwnu</a>

lnqyikcroylnqyikcroy2012/06/07 21:27FBrqBE , [url=http://zbnjuncdjcvc.com/]zbnjuncdjcvc[/url], [link=http://qmiqxnaohbhv.com/]qmiqxnaohbhv[/link], http://xqsjoymjpkoc.com/

2007.1.06

[][][]グループのモジュールついて 18:05 グループのモジュールついて - つみきスタイル を含むブックマーク はてなブックマーク - グループのモジュールついて - つみきスタイル グループのモジュールついて - つみきスタイル のブックマークコメント

今回気づいたこと。

  • amazonモジュールとhotvideoモジュールがない
  • shearchformモジュールに詳細と一覧のラジオボタンがない
  • IE6でfloatしたブロックの高さの分親要素の背景画像がずれる(背景色は残る)(ずれてんじゃなくて高さ分の背景画像が消えてる?)

あとは前回の記事とグループのヘルプに書いてあることでおおむね分かったような気がします。

nnについてはこれで完成とします。あとは色違いをいくつか作って次のに取り掛かろう。

やることなくなったらCSSグループCSS作成コンテストのスレにも投下したいなぁ。

あとモジュールのキーワードって必要だろうか。キーワード化してもいいかもしれない。

JohanaJohana2012/06/04 13:17Begun, the great intreent education has.

kflhspxmkakflhspxmka2012/06/05 05:59SlocqQ <a href="http://gqymgmcnmlhj.com/">gqymgmcnmlhj</a>

atvumedpatvumedp2012/06/05 11:33oWXP30 , [url=http://jwkervjhahsy.com/]jwkervjhahsy[/url], [link=http://zblfcsnmbzpz.com/]zblfcsnmbzpz[/link], http://jbxqlohymyjn.com/

axpmulhzenaxpmulhzen2012/06/06 09:232t7APy <a href="http://zzyhrpfqeeof.com/">zzyhrpfqeeof</a>

uzfgonsfgquzfgonsfgq2012/06/06 13:56Qz7Lh0 , [url=http://gkrqdgjdtvdk.com/]gkrqdgjdtvdk[/url], [link=http://albydtyowyiv.com/]albydtyowyiv[/link], http://ujxckxdifvyy.com/

keyword

はてなダイアリーの構造

■ はてなダイアリーの構造 はてなダイアリーのデザインの参考にしてください。 ダイアリーの構造 ヘッダの構造 カスタマイズに関するメモ ■ ブックマーク...

box-sizing

■ 注意 Opera8.0enで実装されていることを確認しました。CSS3草稿の先行実装と思われます。 実験的なものなので将来削除される可能性があります。 ■ 用語の簡単な解説 &#...

はてなブックマークの構造

■ はてなブックマークの構造 はてなブックマークのデザインの参考にしてください。 ブックマークページの構造 タグリスト絞り込みの構造 コメント直接編集機能の構...

はてなアンテナの構造

はてなアンテナの構造です 基本の構造 アンテナモード シンプルモード 詳細モード ■ 基本の構造 html body table tbody ...

はてなグループの構造::日記::日記を書くの構造

■ /css.g.hatena.ne.jp/UserID/edit ←はてなグループの構造←はてなグループの構造::日記の構造 ■ ページの構造 html body table //はてなヘッダ h1 div#ha...