DARTSLIVEのブログパーツのデザインを変更する。

シェアする

ブログパーツを貼り付けたはいいが元のCSSをいろいろ読み込んでデザインが変になったのでそれなりに見えるようにした。きっとiframe版を使えばそんなこと考えなくていいんだけど、iframeはあまり好きじゃないのでパス。

↓俺のBLOG(というよりはVicunaCMSを使用したサイト)では何もしなければ以下のような表示。

dartslive blog-parts

↓本来はこのような表示をする。

dartslive blog-parts

そこで、以下のCSSを読み込ませる。一行目はDARTSLIVE自体のCSSでは無いが、VicunaCMSのCSSを上書きするために必要。

div#utilities dl dd table {
	margin:0.1em 0px;
}

table.dartslive {
	width: 250px;
	border-width: 0px;
	margin: 0px;
	padding: 0px;
}

.dartslive table       { border-width: 0px; }
.dartslive td          { border-width: 0px; }
.dartslive td table td { border: 1px solid  #999999; }
.dartslive td.dltitle  { background-color: #2a2a3a; }
.dartslive hr          { display: none; }
.dartslive .ssize      { display: none; }

これを適用すると以下のような表示。

dartslive blog-parts

CSSのみで行ったので本来のデザインのように行毎に色を変えるなんてのができないのが残念。元のHTMLがunk過ぎる。テーブルレイアウトだし、fontタグ使うなよ常識的に考えて・・・

Sponsored Link

シェアする

フォローする

コメント

  1. hitomin より:

    テーブルタグ大好きです/(^o^)\
    CSSが普及する前にHTML覚えてしまって、そこで停滞してる私。

  2. jklryo より:

    /(^o^)\
    CSS楽しいよCSS。ぜひ覚えるべし。