アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！ -106ページ目

ブログ画像一覧を見る

このブログをフォローする

<< 前のページへ最新 | 104 | 105 | 106 | 107 | 108 | 最初次のページへ >>

ＣＳＳ　記事の幅を狭くしたい・・

記事の幅を狭くしたいんですけど・・・

狭くしたけど真ん中に・・・

って・・

以前・・ブログを読みやすくするために

ＣＳＳ　ブログの横幅を広げませんか・・・
ブログの横幅を・・2

なんて記事を書きましたが・・・

狭くしちゃうんですか？見難くなっちゃいますよ～

やめた方が・・　な～んてことは言うつもりはありません

スキンも表現の一つだから何でもありなのかな？

それも・・スキン全体の幅は変更しないんだからなんかポリシーあるのでしょうか？

じっさい・・やってみると・・真ん中にある妙な余裕がよく見えちゃうから　不・思・議？
スキン全体を狭くしちゃうのとはやっぱし違うんでしょうね・・・？
でも・・記事は読みにくくなるけどね・・・

・・・って～ことで↓こんな普通のスキンから

記事の幅を狭めます・・・・

.entry{
width:250px;
}

狭くなりましたが・・よくわかりません？↓

狭くしたのがわかるように記事枠をつけます

.entry{
width:250px;
border:1px solid #666666;
}

枠自体が左よりだし・・記事が枠内にピッタリくっつきすぎ・・

どうせなら記事も中央寄せにしちゃいましょ・・

.entry{
width:250px;/*記事の幅*/
border:1px solid #666666;/*枠　太さ・線種・色*/
padding:10px;/*枠内の余裕　上下左右10px*/
margin-left:auto;/*位置中央寄せ*/
margin-right:auto;/*位置中央寄せ*/
text-align:center;/*文字中央寄せ*/
}

記事はうまく行ったけど・・・・

コメントの方も狭くしないとおかしくない？・・・のかな？

じゃあ・・ＣＳＳは記事部分と同じってことで・・

#comment_module{
width:250px;
border:1px solid #666666;
padding:10px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

・・・・・・？あららっ？狭くならないジャン？おかしいジャン！

コメント記入欄を出すとこが支えちゃって狭くなりません

IE以外は飛び出ちゃっています・・・

記事とかコメントを狭くしている場合は・・
その幅に合わせて狭くします

#comment_show{
width:250px;
}
#comment_module li.lastItem {
width:250px;
text-align:center;
}

または・・ボタンだけにしちゃいます・・・

このような画像を作ります（使うのでしたらお持帰りOKです）

230px ×　100px

230px ×　100px

ボタンの背景として表示しますので四角い枠ができてしまいます

なので・・画像は四角く作ってください

↓こんな画像も使ってみたいのですが・・・

↓必ず枠が表示されちゃいますので・・・・残念です

逆に枠が自動的につきますので画像は単純でかまいません

画像が出来たら（画像の横幅は当然ですが枠の幅より小さくしてくださいな）

#comment_show input#commentbutton{
width: 230px;/*画像の横*/
height:100px;/*画像の縦*/
background:url(ボタン画像のＵＲＬ);
background-repeat:no-repeat;
margin:0 auto;
padding:0;
text-indent: -9999px;
}
#comment_show {
width:250px;/*記事の幅と同じに*/
border:none;/
}
#comment_module form ul,
#comment_module form li{
width:250px;/*記事の幅と同じに*/
}
#comment_module li.lastItem{
width:230px;/*ボタン画像の幅*/
}
#comment_show h4,
#comment_show p {
display:none;
}

・・・・一緒にプレゼントも贈ろう！が支えちゃっているみたいです

これはコメントとしてくれた方が自分にプレゼントを贈るんだから・・・

広告じゃないからなくてもいいよね・・・

#comment_present{
display:none;
}

↑完成です・・・・

↓赤字部分はそれぞれ変更してからＣＳＳの最後に貼り付けます

/*記事の幅を狭く*/
.entry {
width:250px;/*記事の幅*/
border:1px solid #666666;/*枠　太さ・線種・色*/
padding:10px;/*枠内の余裕　上下左右10px*/
margin-left:auto;/*位置中央寄せ*/
margin-right:auto;/*位置中央寄せ*/
text-align:center;/*文字中央寄せ*/
}
/*コメント部分の幅を狭く*/
#comment_module {
width:250px;/*記事の幅と同じに*/
border:1px solid #666666;/*枠　太さ・線種・色*/
padding:10px;/*枠内の余裕　上下左右10px*/
margin-left:auto;/*位置中央寄せ*/
margin-right:auto;/*位置中央寄せ*/
text-align:center;/*文字中央寄せ*/
}
#comment_show input#commentbutton {
width: 230px;/*画像の横*/
height:100px;/*画像の縦*/
background:url(ボタン画像のＵＲＬ);
background-repeat:no-repeat;
margin:0 auto;
padding:0;
text-indent: -9999px;
}
#comment_show {
border:none;/
}
#comment_show,
#comment_module form ul,
#comment_module form li {
width:250px;/*記事の幅と同じに*/
}
#comment_module li.lastItem{
width:230px;/*ボタン画像の幅*/
}
#comment_show h4,
#comment_show p {
display:none;
}
#comment_present {
display:none;/*一緒にプレゼントも贈ろう！を消す*/
}