CSS 中央寄せ | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

CSS 中央寄せ

なんか・・・

まとめて記事にしておかないと

同じ質問ばかりなので・・・・・・


中央寄せ・・・・・・


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



■記事全部まとめて中央


.entry {
text-align: center;
}

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



■日付を中央


.entry .date {
text-align: center;
}

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


■ついでに問い合わせの多いコレ。。。記事の日付を大きく


.entry .date {
color: #ff00ff;/*文字色*/
font-size: 25px;/*文字サイズ*/
font-family: 'arial black',Impact;/*文字書体*/
background-color: transparent;/*背景色を消す*/
border: none;/*線(影)を消す*/
text-align: center;/*中央に*/
float:none;/*ベーシックスキン用*/
}


/*ベーシックスキンの場合はこれも必要です-IE7でタイトルと重なります*/

.entry h3.title{
margin-top:20px;
}


20pxは実際にみながら調整ください


/*ベーシックスキンの場合はこれも必要です-これがないと中央になりません*/
.entry .date {
float:none;
}


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


■記事タイトルを中央


.entry .title {
text-align: center;
}

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


■テーマを中央


.entry .theme {
text-align: center;
}

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


■記事文を中央


.entry .contents {
text-align: center;
}

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


■記事フッターを中央


.entry .foot {
text-align: center;
}


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


■記事フッターを左に

.entry .foot {
text-align: left;
}







コメントも質問が多いです・・・・



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


■コメント全部まとめて中央


#comment_module {
text-align: center;
}

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





■コメント、[コメント記入欄を表示]などはそのままなら


#comment_module .each_comment {
text-align: center;
}


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




この際だから?

■サイドバー(まとめて全部)も中央に


#sub_a {
text-align :center;
}

#sub_b {
text-align: center;
}



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

■サイドバーの中でも・・・フリースペースだけ・・・・


#freespace {
text-align: center;
}


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


■フリースペースの中の画像だけを中央にする場合



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


#freespace img{
padding:5px 0;
margin-left:auto;
margin-right:auto;
text-align: center;
display:block;
}


padding:5px 0;で画像の上下に5pxのスキマを作っています

 必要がなければこの行は必要ありません

 また画像だけが続く場合は上の画像の下に5px 下の画像の上に5px で合計10px開いてしまいます

 その場合は padding-bottom:5px; とすれば 画像の下だけにスキマができます

 <br />のような改行をいくつか入れてもスキマはできますがこのほうが微妙な調整が可能です





※サイドバーで個々でCSS設定をしている場合は中央寄せにならない場合もあります

※サイドバーのメニュタイトルは中央寄せになりますが アイコンは背景ですのでそれにあわせて全部を移動させることは出来ません

 希望の場合はそれぞれの位置を設定すれば可能です


 サイドバーメニュの場合はメニュ(文字数)が決まっていますのでそれが可能ですが・・・・

 記事タイトルやコメントタイトルについているアイコンは・・・・

 記事タイトルやコメントタイトルの文字数が一定していませんのでムリです

 背景も文字数にあわせて自動で移動させることは出来ません




メッセージボードはこちらを参考にして下さい
http://ameblo.jp/exlink/entry-10157242632.html