186(guide)

説明

CSS関係のTipsとProxomitronのフィルタの話がメインです。

2004-10-28 Thu

[] 悩み事 00:51

どこからがguideグループ用の記事で、どこからがcssグループ用の記事なのかと。本当はマルチカラム系の話もcssグループ用の記事だと考えています。パディングとボーダーが入ると標準/互換(Standard/Quirk)の話がどうしても必要になります。その辺をまったく無視してマルチカラムの話は書かれているのです。悪の再生産。そういう点も含めて、やっぱりDOCTYPEスイッチを使って欲しいなぁ、と思ったりもします。

「* html」とか全称セレクタを知らない人に教えちゃいけない方法だし。

sugiosugio2005/05/16 14:55まあ初心者用のステップが外れるならcssグループなりTipsなりがいいと思います。つまりスタイルシート編が充実すると変わって来ると思う。パディングとボーダーの問題は、どこかに資料リンクすることで補足・警告できるのではないかと思いました。

2000-02-06 Suncanchor(コメントの#の弄り方)

[] canchor(コメントの#の弄り方)

ぶっちゃけsanchorの変え方と同じ。

仕様変更*1でa要素が追加されたのでその辺にも注意。

まずhtmlを見る。

<div class="commentshort">
 <p>
  <span class="canchor"><a name="c1" href="c1">#</a></span> 
   <a href="#"><span class="commentator">ID</span></a>
  『comment』
 </p>
</div>

とまぁこんな感じ。

span.canchorの中にaが入っているので後で要調査。

span.canchorを消すのは利便性を損なうのでやらない方がいいと思った。

2000-02-05 Satspan.sanchorの弄り方

[] span.sanchorの弄り方

h3の先頭にある■を変えようという試み。

span.sanchor {
 color: #ffffff; /* h3の背景色 */
 font-size: 0px;
 text-decoration: none;
 padding: XXpx XXpx 0px 0px;
 background: url("Your_Section_Anchor.xxx") bottom right no-repeat;
}

paddingの数字は用意した画像のサイズに合わせて変えること。

同様にしてspan.canchorも弄れます。

後は:beforeや:afterを使って楽しむのも良いかと。IEは対応してませんけど。

追記: 2005/08/24

はてなダイアリーガイド「CSSセレクタ - 日記1日分」 span.sanchor(.sanchor,h3 .sanchor)の情報の方が詳しいか。

2000-02-04 Friアンテナを上に(ヘッドライン風)

[] アンテナをヘッドライン風に

template指定無し

アンテナやキーワードをヘッドライン風に表示するcss。色々な都合でh1は見えないようしている点注意。positionを上手く使えばh1を残して余分なh2を省略できるが、ま、そこはそれ。

ヘッダー部分に以下を記述。

<div class="headline">
<hatena name="antenna" listlimit="2" titlelength="15" dateformat="" template="hatena-module">
</div>
<h2>日記のタイトル</h2>

cssに以下を記述。

div.headline{
 width: 100%;
 height: 1.3em;
 padding: 0px;
 overflow :hidden;
 font-size: small;
 border-bottom: solid 1px #ff0000;
}
h1{
 display: none;
}
.headline .hatena-moduletitle {
 display: inline;
}
.headline .hatena-modulebody {
 display: inline;
}
.hatena-modulebody ul {
 display: inline;
}
.hatena-modulebody ul li {
 display: inline;
 list-style-type: none;
}

WinXP+(IE6.0|Opera6.05|Mozilla 1.2.1)で確認済。

datatime=""にすると見栄えが好い。

background-colorやcolorは適当に付け加えて改造すると宜し。

アンテナとキーワードと二つ以上作る場合は、p.recentitemの幅を決めておいて、右側にborderを入れるのも良いと思うね。僕は。

えーとtemplate指定がなかったときの話なので気にしないで.

以上186(n?) 2003/03/17 Like a Headlineより改変。

2000-02-03 Thusidebarを左右に(三段カラム)

[] sidebarを左右に

三段カラム風。真ん中をメインに。左にメニュー右にアンテナ。

positionを使う方が安定するので、positionで。

ヘッダに以下を追加。

<div id="main">

フッタに以下を追加。

</div>
<div id="menu1">
色々
</div>
<div id="menu2">
色々
</div>

cssに以下を追加。

div.hatena-body {
 position: relative;
 width: auto;
}

* html div.hatena-body {
 width: 100%;
 top: 0px; left: 0px;
}

div#main {
 margin: auto 20%;
 width: auto;
}

div#menu1,
div#menu2 {
 position: absolute;
 width: 19%;
 padding: 1em;
 font-size: small;
}

div#menu1 {
 top: 0px; left: 0px;
}

div#menu2 {
 top: 0px; right: 0px;
}