それは投稿記事が絶妙に見難い。(文章力のせいかもしれませんが・・・。)
とりあえず、今がどういった項目を書いているのかをわかりやすくなるように、
文字の色とサイズ(あと少し装飾)にCSSを適用してみたいと思います。
以下は自作CSSを適用した画面になります。
目次
目標
Bloger用の投稿用のCSSを作ってみよう！
サンプルコード
Blogger投稿用に挿入しているCSSは以下の通りです。
*[class*="MYtemp"]{
font-family: 'Osaka－等幅''Osaka-Mono';
color: #AAAAAA;
font-size: 20px;
padding: 0;
margin: 0;
}
h1.MYtemp-h1{
padding:0 0 0 5px;
margin: 10px 0 0 0 ;
border-left: 5px solid #dd7700;
color: #AAAAAA;
font-size: 25px;
}
h2.MYtemp-h2{
padding:0 0 0 10px;
margin: 5px 0 0 0 ;
border-left: 5px solid #dd7700;
font-size: 22px;
}
h3.MYtemp-h3{
padding:0 0 0 15px;
margin: 2px 0 0 0 ;
font-size: 22px;
}
h1.MYtemp-h1:first-letter{
color: #FF8f00;
font-size: 35px
}
h2.MYtemp-h2:first-letter{
color: #FF8f00;
font-size: 30px
}
ul.MYtemp-ul, ol.MYtemp-ol{
margin:0 0 15px 23px;
}
ul.MYtemp-ul{
list-style-type:square;
}
ol.MYtemp-ol{
list-style-type:lower-roman;
}
ol.MYtemp-li{
list-style-type:lower-roman;;
}
ul#contentslist{
list-style-type:none;
}
ul#contentslist a{
text-decoration: none;
}
table.MYtemp-table {
border: 2px solid #AAAAAA;;
background-color: #090909;
padding: 5px
}
td.MYtemp-td{
font-family: Consolas;
font-size: 14px;
}
div.MYtemp-plain{
font-size: 18px;
}
|
解説
上記サンプルを見ての通りなんですが、
投稿に使うすべての(使いそうな)タグに先頭の文字列Mytempのクラスを割り当てて
投稿の中身だけに効くCSSを作りました。
bloggerのテンプレートを書き換えた方がいいのでは？って意見もありそうなんですが、
記事単位で微調整するにはこれがいいかなぁと。
前に投稿した気にのレイアウトに影響するのも気持ち悪いですもんね。
投稿に使うすべての(使いそうな)タグに先頭の文字列Mytempのクラスを割り当てて
投稿の中身だけに効くCSSを作りました。
bloggerのテンプレートを書き換えた方がいいのでは？って意見もありそうなんですが、
記事単位で微調整するにはこれがいいかなぁと。
前に投稿した気にのレイアウトに影響するのも気持ち悪いですもんね。
終わりに
今回作った投稿用CSSで記事全体の見通しが良くなって、読みやすくなっているとうれしいと思います。
実行は自己責任で！
実行は自己責任で！
0 件のコメント:
コメントを投稿