「編集」ボタンを作成した

はてな

暇つぶしに，はてなグループのスタイルシートをいじってみた．

keywordモジュール
新しく edit 属性と desclength 属性を追加しました。
キーワードの「編集」リンクを表示するかを true / false で指定します。無指定で false (表示しない)です。

この，編集リンクをWindowsのボタンっぽくして，右側表示にしてみた．

a.edit{
    display:block;
    width:3em;
    height:12px;
    text-align:center;
    font-size:12px;
    margin:3px;
    text-decoration:none;
    border-top:2px solid #ffffff;
    border-left:2px solid #ffffff;
    border-right:3px solid #808080;
    border-bottom:3px solid #808080;
    background-color:#c0c0c0;
    color:#000;
    position:absolute;
    top:0px;
    right:0px;
}

h2{
    position:relative;
}

画像バージョン

h2 a.edit {
 background-image: url("http://d.hatena.ne.jp/images/common/edit.gif");
 background-position: bottom right;
 background-repeat: no-repeat;
 padding: 16px 16px 5px 0px;
 margin-right:5px;
 color: #FFFFFF;
 background-color: transparent;
 font-size: 0px;
}