Latest Entries

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

記事の画像をセンタリング [popline_cream1]

600 x 419の画像を記事に挿入する場合。

ブログ全体の幅を広げる。

#header{
width:900px;
text-align:center;
margin:10px auto;
padding:0;
}


#container{
width:900px;
text-align:center;
margin:0 auto;
padding:0;
}


#content{
float:right;
width:660px;
margin:0;
padding:0;
}


背景画像のサイズを指定する。
(layout_image_middle、layout_image_bottomについても同様にカスタマイズ。)

※IEではbackground-sizeが適用されないため、画像の加工が必要。

.layout_image_top{
background:url(http://blog-imgs-21.fc2.com/p/o/p/popstyle1/750_cream_top01.gif) no-repeat;
background-size:900px;
height:55px;
margin:0;
padding:0;
}


画像のセンタリングと絵文字等の配置。

.entry_body img{
margin:auto;
padding:0;
border:1px dotted #b7b7b7;
display: block;
text-align: center;

}

.emoji{
display: inline!important;
text-align: left!important;
margin:0!important;
}

.fc2_footer img{
display: inline!important;
margin:0!important;
}

スポンサーサイト

タイトル部分に画像をセンタリング [popline_cream1]

タイトル部分に画像(550 x 350)を挿入する

<div id="header">
<h1><a href="<%url>"><%blog_name></a></h1>
<div class="introduction"><%introduction></div>
<img src="http://blog-imgs-32.fc2.com/b/f/t/bftfc2/12605_69630_title_ing.jpg" alt="" border="0" width="550" height="350" />
</div><!-- END OF header -->


CSSの編集(赤字部分の削除・編集)

#headerline{
background:url(http://……/skincolor_top001.gif) repeat-x;
height:120px;
margin:0;
padding:0;
}

#header{
width:750px;
height:120px;
text-align:center;
margin:10px auto;
padding:0;
}

popline_cream1で画像のテスト

サイズ:600 x 419


サイズ:300 x 209
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。