« Kanasansoft BlogEditorの使い方 | メイン | Kanasansoft BlogEditor(20061217170408)公開 »

Kanasansoft BlogEditorとCSS

BlogEditorから出力されるhtmlをそのまま表示させると、ハッキリ言って見た目が悪い。これは、「BlogEditorから出力するhtmlは構造のみで見た目に関してはCSSにお任せ」というコンセプトがあるためである。出力したものをみると、(一部例外があるが)ほとんどのダグがdiv(要素)で、要所要所にclass(属性)が指定してある。レイアウトを良くするにはcssを弄らないといけない。
(そもそも、BlogEditorが勝手に見た目を決めてしまうと、blogのcssとの調和が問題になる。)
自分で設置したblogなら好きに触れるし、どこかのblogサービスを使っていてもcssは編集できる場合が多い(はずだ)。僕は次のようにしている。
既存のcssの最後に次の行を追加
@import url(<$MTBlogURL$>kanasansoft-blog-editor.css);
(Movable Type使用)
kanasansoft-blog-editor.css(新しく追加したblogのテンプレート)
.Kanasansoft_BlogEditor div{
    margin:8px 0px;
}

.Kanasansoft_BlogEditor div div{
    margin:0px 0px;
}

.Kanasansoft_BlogEditor h5{
    font-size:120%;
    font-weight:bold;
}

.Kanasansoft_BlogEditor .Com_Kanasansoft_PlainText .PlainText{
    line-height:150%;
}

.Kanasansoft_BlogEditor .Com_Kanasansoft_Source{
    border:2px outset #cccccc;
    color:#000000;
    background-color:#cccccc;
}

.Kanasansoft_BlogEditor .SourceForCopy{
    font-size:80%;
    border:2px outset #cccccc;
    color:#cccccc;
    background-color:#cccccc;
    height:16px;
    width:16px;
    overflow:hidden;
    white-space:pre;
    font-family:monospace;
}

.Kanasansoft_BlogEditor .SourceForDisplay{
    margin:8px 0px;
    padding:8px;
    font-size:80%;
    border:2px inset #cccccc;
    color:#000000;
    background-color:#cccccc;
    width:450px;
    overflow:scroll;
    white-space:pre;
    font-family:monospace;
}
Kanasansoft Web Lab.(2006/12/14時点)
BlogEditorのテンプレートはあるけどcssはまだ定義できていないものもあるため、そのまま使えるわけではないが参考にはなると思う。

トラックバック

このエントリーのトラックバックURL:
http://www.kanasansoft.com/cgi/mt/mt-tb.cgi/8

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

Google