教えてブログ改造 ２
ブログってのはテンプレートのおかげで手っ取り早くていいんだけど、思い通りのデザインに出来ないんだよなあ。
今使ってるのは２カラムなんだけど、サイドバーの幅はなんとか広く変更出来た。
でも今度は記事欄の幅が微妙に気になりだした・・・
＜教えてブログ改造 １ へ戻る
また少しずつ改造に挑戦してみるかな。
知識が全くないもんだからえらく手間取ってメンドいが。
詳しいことは分からないけど、いろいろイジってみたところこんな構成じゃないのかな？。
使用しているテンプレート ２カラム シンプルブルー（幅100%）
変更点 左サイドバーの拡大。 それに伴う体裁の調整。
いろいろイジって詳しいことは忘れてしまった。
そのスタイルシートのプログラム
@charset "UTF-8";
/*simple_blue 100%
back_obj:#0072d3;画像と同じ色
line:#00666;テーブルデコレーション色
back_bg:#D9E2ff;bodyバック色
link_txt:#001F79;フォント色
url:http://admin.naturum.ne.jp/_img/simple_blue/head.gif;画像
*/
*{
font-family :"verdana","helvetica","osaka","ＭＳ Ｐゴシック",ans-serif;
}
textarea,select,input {
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック","sans-serif";
}
body{
color :#000;
margin :0px;
background :#D9E2FF;
text-align:center;
}
form{
margin :0px;
padding :0px;
}
table.form{
margin :25px 0px 0px 13px;
}
img{
border :none;
}
ul.rss{
margin :0px;
padding :0px;
width :100%;
text-align :center;
}
ul.rss li {
border-right :#999 1px solid;
display :inline;
font-size :12px;
font-style :normal;
font-weight :bold;
letter-spacing :20.2px;
margin-right :0.3em;
padding-right :0.5em;
padding-left :0.2em;
}
ul.rss a:link {
color:#333333;
text-decoration:none;
}
ul.rss a:visited {
color:#333333;
text-decoration:none;
}
ul.rss a:hover {
color :#999999;
text-decoration :none;
}
ul.rss a:active {
color :#333333;
text-decoration :none;
}
a{color:#6633ff;text-decoration:underline;}
a:link{color:#6633ff;text-decoration:underline;}
a:visited{color:#6633ff;text-decoration:underline;}
a:active{color:#6666cc;text-decoration:none;}
a:hover{color:#6666cc;text-decoration:none;}
a.acalendar{color:#001F79;text-decoration:underline;}
a.acalendar:link{color:#001F79;text-decoration:underline;}
a.acalendar:visited{color:#001F79;text-decoration:underline;}
a.acalendar:active{color:#001F79;text-decoration:none;}
a.acalendar:hover{color:#001F79;text-decoration:none;}
a.acontinues{color:#001F79;text-decoration:underline;}
a.acontinues:link{color:#001F79;text-decoration:underline;}
a.acontinues:visited{color:#001F79;text-decoration:underline;}
a.acontinues:active{color:#001F79;text-decoration:none;}
a.acontinues:hover{color:#001F79;text-decoration:none;}
a.amenu{color:#001F79;text-decoration:underline;}
a.amenu:link{color:#001F79;text-decoration:underline;}
a.amenu:visited{color:#001F79;text-decoration:underline;}
a.amenu:active{color:#001F79;text-decoration:none;}
a.amenu:hover{color:#001F79;text-decoration:none;}
#container{ font-size:12px;
width:100%;
background-color:#ffffff;
margin:0px auto;
text-align:left;
}
#banner,#subbanner{
background :#0072D3 url(http://admin.naturum.ne.jp/_img/simple_blue/head.gif) left bottom;
padding :0px 10px 10px 10px; }
#banner a {color:#fff;text-decoration:none;}
#banner a:link{color:#fff;text-decoration:none;}
#banner a:visited{color:#fff;text-decoration:none;}
#banner a:active{color:#fff;text-decoration:underline;}
#banner a:hover{color:#fff;text-decoration:underline;}
#subbanner a{color:#fff;text-decoration:none;}
#subbanner a:link{color:#fff;text-decoration:none;}
#subbanner a:visited{color:#fff;text-decoration:none;}
#subbanner a:active{color:#fff;text-decoration:underline;}
#subbanner a:hover{color:#fff;text-decoration:underline;}
h1,h2,h3{
margin :0px;
padding :0px;
}
.blogtitle{
font-size :30px;
font-weight :bold;
padding :40px 0px 0px 10px;
text-align :left;
letter-spacing :2px;
}
.description{
color :#fff;
font-size :12px;
padding :4px 0px 0px 35px;
text-align :left;
letter-spacing :2px;
}
#content{
margin-left:265px;
background-color:#ffffff;
}
#links{
width:260px;
float:left;
text-align:left;
padding :20px 0px 0px 10px;
margin:0px;
background-color:#ffffff;
overflow:hidden;
}
にほんブログ村
#footer{
clear :both;
}
#copyright{
background :#0072D3 url(http://admin.naturum.ne.jp/_img/simple_blue/foot.gif) bottom;
width :100%;
height :16px;
font-size :12px;
font-weight :bold;
color :#fff;
margin :0px;
padding :0px;
line-height :16px;
text-align :center;
}
.blog{
margin :20px 10px 20px 15px;
}
.date{
border-top :1px solid #000066;
border-left :1px solid #000066;
border-right :1px solid #000066;
border-bottom :1px solid #000066;
background :#0072D3 url(http://admin.naturum.ne.jp/_img/simple_blue/obj.gif);
background-position :1px 1px;
color :#fff;
font-size :14px;
letter-spacing :2px;
padding :5px 0px 5px 5px;
}
.blogbody{
background :#fff;
margin :0px 0px 10px 0px;
padding :20px;
border-left :1px solid #000066;
border-right :1px solid #000066;
border-bottom :1px solid #000066;
}
.title{
color:#000;
font-size:14px;
font-weight :bold;
height:10px;
}
.main{
color :#555555;
font-size :13px;
padding :15px 0px 15px 0px;
height:100%;
width:95%;
overflow:auto;
line-height:110%;
}
.main img{
margin :0px 0px 5px 0px;
}
.main-continues{
font-size :12px;
}
.posted{
color :#000;
font-size :10px;
text-align :right;
margin :0px 0px 0px 0px;
}
a.aposted{color:#001F79;text-decoration:underline;font-weight:bold;font-sizepx;}
a.aposted:link{color:#001F79;text-decoration:underline;font-weight:bold;}
a.aposted:visited{color:#001F79;text-decoration:underline;font-weight:bold;}
a.aposted:active{color:#001F79;text-decoration:none;font-weight:bold;}
a.aposted:hover{color:#001F79;text-decoration:none;font-weight:bold;}
.menu{
color#666666;
font-size:12px;
text-align:right;
}
.comments-head{
color:#000;
font-size:10px;
font-weight :bold;
padding:0px 0px 0px 0px;
height:10px;
}
.comments-body{
font-size:12px;
line-height :135%;
margin:20px 0px 15px 13px;
}
.comments-post{
color:#6633cc;
font-size:12px;
text-align:right;
margin:0px 0px 25px 0px;
}
.trackback-url{
color:#009999;
font-size:11px;
font-weight :bold;
margin:20px 0px 15px 13px;
}
.trackback-body{
font-size:12px;
line-height:135%;
margin:20px 0px 15px 13px;
}
.trackback-post{color :#000;
font-size :10px;
text-align :right;
margin :0px 0px 30px 0px;
font-weight :bold;
}
a.atrackback-post{color:#001F79;text-decoration:underline;font-weight:bold;}
a.atrackback-post:link{color:#001F79;text-decoration:underline;font-weight:bold;}
a.atrackback-post:visited{color:#001F79;text-decoration:underline;font-weight:bold;}
a.atrackback-post:active{color:#001F79;text-decoration:none;font-weight:bold;}
a.atrackback-post:hover{color:#001F79;text-decoration:none;font-weight:bold;}
label{
font-size :10px;
font-weight :bold;
}
#author{
width :200px;
border :1px solid #000066;
}
#email{
width :200px;
border :1px solid #000066;
}
#url{
width :300px;
border :1px solid #000066;
}
#text{ font-size:12px;
width :400px;
height :200px;
border :1px solid #000066;
}
.pagetop{
font-size :12px;
text-align :right;
margin :0px 0px 25px 0px;
}
.calendarhead{
color :#666;
font-size :12px;
font-weight :bold;
letter-spacing :2px;
padding :0px 0px 2px 0px;
text-align :center;
}
.calendartable{
margin :0px auto 20px auto;
padding :0px;
width :185px;
text-align :left;
background :#fff
border-top :1px solid #000066;
border-left :1px solid #000066;
border-right :1px solid #000066;
border-bottom :1px solid #000066;
empty-cells:show;
border-spacing:0px;
border-collapse:collapse;
}
.calendarweek{
color :#fff;
font-size :12px;
font-weight :bold;
position :center;
}
.calendarwd{
border-top :1px solid #000066;
border-left :none;
border-right :none;
border-bottom :1px solid #000066;
background :#0072D3 url(http://admin.naturum.ne.jp/_img/simple_blue/obj.gif);
background-position :-2px 0px;
color :#fff;
font-size :12px;
letter-spacing :2px;
padding :5px 0px 5px 5px;
}
.calendard{
text-align:center;
}
.calendar{
font-size :12px;
padding :4px 2px 4px 2px;
}
.sidetitle{
border-top :1px solid #000066;
border-left :1px solid #000066;
border-right :1px solid #000066;
border-bottom :1px solid #000066;
background :#0072D3 url(http://admin.naturum.ne.jp/_img/simple_blue/obj.gif) top left;
background-position :1px 1px;
color :#fff;
font-size :12px;
letter-spacing :2px;
padding :5px 0px 5px 5px;
width :251px;
}
.side{
font-size :12px;
line-height :140%;
margin :0px 0px 10px 0px;
padding :8px;
border-left :1px solid #000066;
border-right :1px solid #000066;
border-bottom :1px solid #000066;
width:240px;
}
a.aside{color:#9933cc;text-decoration:underline;}
a.aside:link{color:#9933cc;text-decoration:underline;}
a.aside:visited{color:#9933cc;text-decoration:underline;}
a.aside:active{color:#6699cc;text-decoration:none;}
a.aside:hover{color:#6699cc;text-decoration:none;}
a.arss{color:#0000FF;text-decoration:underline;}
a.arss:link {color:#0000FF;text-decoration:underline;}
a.arss:visited{color:#0000FF;text-decoration:underline;}
a.arss:active{color:#0000FF;text-decoration:none;}
a.arss:hover{color:#0000FF;text-decoration:none;}
.photo{text-align:center;
}
.nickname{
color:#2b5695;
font-size:16px;
font-weight :bold;
margin:10px 0px;
text-align:center
}
.message{text-align:center
}
.quotetable{
}
.quote{
color :#000;
font-size :12px;
padding :1px;
}
.blogtimes{
margin :0px 0px 16px 0px;
text-align :center;
}
.powered{
text-align :center;
margin :0px 0px 10px 0px;
}
.syndicate{
font-size :12px;
text-align :center;
}
.checkers{
font-size :12px;
margin-top:10px;
}
a.adtitle{font-weight:bold;text-decoration:underline;}
a.adtitle:link{font-weight:bold;text-decoration:underline;}
a.adtitle:visited{font-weight:bold;text-decoration:underline;}
a.adtitle:active{font-weight:bold;text-decoration:underline;}
a.adtitle:hover{font-weight:bold;text-decoration:underline;}
a.addescription {color:black;text-decoration:none;}
a.addescription:link {color:black;text-decoration:none;}
a.addescription:visited {color:black;text-decoration:none;}
a.addescription:active {color:black;text-decoration:none;}
a.addescription:hover {color:black;text-decoration:none;}
a.adurl{color:#0000FF;text-decoration:none;}
a.adurl:link {color:#0000FF;text-decoration:none;}
a.adurl:visited{color:#0000FF;text-decoration:none;}
a.adurl:active{color:#0000FF;text-decoration:none;}
a.adurl:hover{color:#0000FF;text-decoration:none;}
a.adld {text-decoration:underline;}
a.adld:link {text-decoration:underline;}
a.adld:visited {text-decoration:underline;}
a.adld:active {text-decoration:underline;}
a.adld:hover {text-decoration:underline;}
body.ad{
background :#f7p39f;
}
＜教えてブログ改造 １ へ戻る
関連記事