[ blogger customize ]

[html5,css3]

VisualBasicの投稿を書いているとき余りにもごちゃごちゃしすぎて面倒になってきたので少しいじってみました。

Webデザインをそれほど勉強したことないし、得意でもないのでネットで調べた方法を組み合わせた程度なので正しいかどうかは別として。。。

でも、なんか型にはまった感じがしてすっきりしました（・ω・）

コードのHTML化は　http://manoli.net/csharpformat/　を使用していてCSSにも設定が追加されています。

投稿内容のHTML

<article id="cont">

 <section id="readme">

  <h4>[サブタイトル]</h4>

  <p>[内容]</p>

 </section>

 <section id="cont_main">

  <h2>[サブタイトル]</h2>

  <p>[内容]</p>

 </section>

 <section id="cont_code">

  <h2>Form</h2>

    [内容]

 </section>

 <section id="cont_code">

  <h2>Module</h2>

    [内容]

 </section>

 <section id="cont_dl">

  <h2>ダウンロード</h2>

    [内容]

 </section>

 <aside id="cont_aff">

    [内容]

 </aside>

</article>

brogger設定の追加CSS

*{

    font-family: Arial, Helvetica, sans-serif;

}

#cont #readme {

    border: 1px solid #4169e1;

    padding: 5px;

    margin-bottom: 30px;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    -moz-border-radius: 5px;

}

#cont #readme h4 {

    line-height: normal;

    font-size: 9pt;

    color: #fff;

}

#cont #readme p {

    margin-left: 10px;

    line-height: normal;

    font-size: 9pt;

    color: #fff;

}

#cont #cont_main {

    margin-top: 30px;

}

#cont #cont_main h2 {

    text-decoration: underline;

    line-height: normal;

    font-size: 12pt;

    color: #fff;

}

#cont #cont_main p {

    margin-left: 10px;

    line-height: normal;

    font-size: 9pt;

    color: #fff;

}

#cont #cont_code {

    margin-top: 30px;

}

#cont #cont_code h2 {

    text-decoration: underline;

    line-height: normal;

    font-size: 12pt;

    color: #fff;

}

#cont #cont_dl {

    margin-top: 30px;

}

#cont #cont_dl h2 {

    text-decoration: underline;

    line-height: normal;

    font-size: 12pt;

    color: #fff;

}

#cont #cont_aff {

    margin-top: 30px;

}

#cont #cont_aff div.amazon {

        float:left;

    line-height: normal;

    font-size: 10pt;

        padding-left:10px;

        padding-bottom:10px;

}

#cont #cont_aff div.amazon img {

        -webkit-border-radius: 3px;

        -moz-border-radius: 3px;

        border-radius: 3px;

}

#cont #cont_code .csharpcode, #cont #cont_code .csharpcode pre{

    font-size: small;

    color: black;

    font-family: Consolas, "Courier New", Courier, Monospace;

    background-color: #ffffff;

    /*white-space: pre;*/

}

#cont #cont_code .csharpcode pre { margin: 0em; }

#cont #cont_code .csharpcode .rem { color: #008000; }

#cont #cont_code .csharpcode .kwrd { color: #0000ff; }

#cont #cont_code .csharpcode .str { color: #a31515; }

#cont #cont_code .csharpcode .op { color: #0000c0; }

#cont #cont_code .csharpcode .preproc { color: #cc6633; }

#cont #cont_code .csharpcode .asp { background-color: #ffff00; }

#cont #cont_code .csharpcode .html { color: #800000; }

#cont #cont_code .csharpcode .attr { color: #ff0000; }

#cont #cont_code .csharpcode .alt {

    background-color: #f4f4f4;

    width: 100%;

    margin: 0em;

}

#cont #cont_code .csharpcode .lnum { color: #606060; }