BlogEditorから出力されるhtmlをそのまま表示させると、ハッキリ言って見た目が悪い。これは、「BlogEditorから出力するhtmlは構造のみで見た目に関してはCSSにお任せ」というコンセプトがあるためである。出力したものをみると、(一部例外があるが)ほとんどのダグがdiv(要素)で、要所要所にclass(属性)が指定してある。レイアウトを良くするにはcssを弄らないといけない。
(そもそも、BlogEditorが勝手に見た目を決めてしまうと、blogのcssとの調和が問題になる。)
自分で設置したblogなら好きに触れるし、どこかのblogサービスを使っていても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;
}
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はまだ定義できていないものもあるため、そのまま使えるわけではないが参考にはなると思う。