table ってあまり使いたくないけど、簡単だからやっぱり使っちゃうな。
というわけで、CSSデザインサンプルサイトから、いくつか貰って入れてみた。
参考:CSS Design Catalog
現在のWordPressテーマ「ニコニコプレス(春)ver1.3」 の style.css 修正。
blockquote, pre { width:auto; margin:10px; background-color:#f8f8f8; padding:10px; border:1px solid #ccc; border-left:5px solid #ccc; background-image:url(images/block.gif); white-space: pre-wrap; }
7行目追加 ボックス要素の左枠線を太く変更。
blockquoteサンプル
table要素のcss追加
table { /*table標準*/ margin-top: 0.2em; margin-bottom: 1em; border-collapse: separate; border-spacing: 2px; } table th,table td { padding: 4px 6px; white-space: nowrap; } table.s_blue th { /*枠無し青*/ background: #1B3AB4; color: #FFF; } table.s_blue td { background: #E5EAFF; } table.s_mono th { /*枠無し影付きモノトーン*/ border-bottom: solid 1px #B2B2B2; border-right: solid 1px #B2B2B2; background: #C3C3C3; } table.s_mono td { border-bottom: solid 1px #B2B2B2; border-right: solid 1px #B2B2B2; background: #F3F3F3; } table.c_mono { /*枠ありモノトーン*/ border-collapse: collapse; border: solid 1px #999; } table.c_mono th,table.c_mono td { border: solid 1px #999; } table.c_mono th { background: #C3C3C3; } table.c_mono td { background: #F3F3F3; }
枠無し青(s_blue)
|
枠無し影付きモノトーン(s_mono)
|
枠ありモノトーン(c_mono)
|