上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

バトン用のスタイルを作ってみました。
使ってみたい方はご自由にどうぞー。テンプレートによっては表示がびみょーになるかも。テンプレートとの相性もあったりするので、確実な表示というのは保証はできません。

一応白地だとこういうような表示になります。
baton_image1.png

このスタイルは質問文or回答文が二行以上になった場合でもある程度見た目を整えてくれる、というのを一番に考えて作ってます。
どういうことかというと、普通は、

A1 こういうように二行になると、番号の部分が普通の
文章に紛れてなんか見にくい(気がする)

こんな感じになっちゃうのを、無理矢理防いでます。
多分やり方としてはスマートじゃ無いと思いますが、まぁ、気にせず。

以下、スタイル。スタイルシートに追加して試してみてください。
11/27更新。
/* バトン用スタイル:ver.0.2 */
p.baton_title {
margin : 1em 0;
border-bottom : 1px dotted #777;
font-weight : bold;
}
p.baton_title a {
text-decoration : none;
}


dl.blog_baton ,
dl.blog_baton dt ,
dl.blog_baton dd {
/*すでにバトン用スタイルが記述されているテンプレートに対して
スタイルを使用する場合、干渉を起こさないようにしてます。
(あんまり意味ないかも)*/

margin : 0;
padding : 0;
border : none;
}
dl.blog_baton {
margin : 0 1em;
line-height : 1.4;
}
dl.blog_baton dt {
margin : 0;
padding : 0.2em 0 0.2em 0.5em;
/* ※1 */
border-left : 4em solid #666;
/* ↑ここで指定した色が質問番号(Q1など)の背景色になります。*/
border-bottom : none;
font-weight : bold;
position : relative;
}
dl.blog_baton dd {
margin : 1px 0 1em 0;
padding : 0.2em 0 0.2em 0.5em;
/* ※2 */
border-left : 4em solid #444;
/* ↑ここで指定した色が回答番号(A1など)の背景色になります*/
border-bottom : none;
position : relative;
}
dl.blog_baton span.q_number ,
dl.blog_baton span.a_number {
position : absolute;

display : block;
text-align : center;
color : #f5f5f5;
font-weight : bold;
line-height : 1.2;
vertical-align : middle;
/* ※3 */
width : 4em;

/* ↑の値を変えたときは、負の数値を下に入れる。*/
left : -4em;

/* IE6用記述。上の値よりさらに-0.5したものを入れる。*/
_left : -4.5em;
}
関連記事


コメント

    コメントの投稿

    (コメントの編集・削除時に必要)
    (管理者にだけ表示を許可する)

    質問の際のお願い

    テンプレートに関する質問は、それぞれのテンプレート専用の記事にて受け付けています。トップページの「Templates Information」から、各テンプレート用の記事へリンクが張ってあります。

    質問の際には、情報の共有のため非公開コメントはご遠慮くださいませ。
    また、使用しているバージョンによって編集内容が異なる事があるため、多くの場合ソースコードの確認が必要になります。出来る限りブログのURLを入力してください。ブログのURLを公開したくない場合は、質問内容を公開コメントで投稿した後、非公開コメントにてブログのアドレスを追加投稿してくださいませ。

    質問以外のコメントは、ご自由にコメントしていただいて結構です。たくさんのコメントお待ちしております。


    トラックバック

    Trackback URL
    Trackbacks


    Recent Entries

    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。