文字を中央寄せにするには

ご訪問ありがとうございます。
ブログランキングの応援
をして頂けると励みになります。

ここをクリックしてくださいね。
　　　　　　
人気ブログランキング
FC2ブログランキング



今回は、文字を中央寄せにする方法についてまとめてみたいと思います。
Yahoo!知恵袋では、次のような質問も多いですね。



質問：文字を中央寄せにするにはどうしたらいいのでしょうか？


回答：それでは、解決法をまとめてみたいと思います。


文字を中央寄せにするには、２つの方法があります。


【１】文字や画像の入力箇所でその都度中央寄せのタグを使用する方法

【２】CSSで中央寄せを設定する方法

なお、上記【２】の方法については、次のブログを参考にさせて戴きました。
ありがとうございました。
↓↓↓
①CSS 中央寄せ｜アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！
②ブログテーマ[中央寄せ]｜新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ



【１】その都度中央寄せにするには、

①<div align="center">中央寄せにする文字</div>
②<center>中央寄せにする文字</center>
の２つの方法があり、赤字のタグで中央寄せにする文字を囲みます。

一般的には、②の方法は、非推奨とされ、①の方が良いとされていますが、
アメブロのヘルプでは、②の方法で説明がされていますので、
アメブロで記事を投稿する場合には、どちらのやり方でもOKだと思います。



【２】の中央寄せを設定するCSSをまとめてみましょう。


［１］旧デザインの場合

①タイトル、テーマ、記事本文の中央寄せ

.entry {/*タイトル、テーマ、記事本文の中央寄せ*/
text-align: center;
}

②記事タイトルのみ中央寄せ

.entry .title {/*記事タイトルのみ中央寄せ*/
text-align: center;
}

③記事テーマのみ中央寄せ

.entry .theme {/*記事テーマのみ中央寄せ*/
text-align: center;
}

④記事本文のみ中央寄せ

.entry .contents {/*記事本文のみ中央寄せ*/
text-align: center;
}

⑤記事フッター（記事URL コメント ペタ） を中央寄せ

.entry .foot {/*記事フッター（記事URL コメント ペタ） を中央寄せ*/
text-align: center;
}

⑥コメント全部を中央寄せ

#comment_module {/*コメント全部を中央寄せ*/
text-align: center;
}

⑦コメントを中央寄せ（コメント、[コメント記入欄を表示]はそのまま）

#comment_module .each_comment {/*コメントを中央寄せ（コメント、[コメント記入欄を表示]はそのまま）*/
text-align: center;
}

⑧サイドバー全部を中央寄せ

/*サイドバー全部を中央寄せ*/
#sub_a {
text-align :center;
}
#sub_b {
text-align: center;
}

⑨サイドバーの中のフリースペースのみ中央寄せ

#freespace {/*サイドバーの中のフリースペースのみ中央寄せ*/
text-align: center;
}

［２］新CSS編集用デザインの場合

①ブログタイトル／説明／記事タイトル／サイドバーの文字／ブログ本文／メッセージボードのテキストの中央寄せ

.skinBody{/*ブログタイトル／説明／記事タイトル／サイドバーの文字／ブログ本文／メッセージボードのテキストの中央寄せ*/
text-align: center;
}

②ブログタイトルと説明文を中央寄せ

.skinTitleArea, .skinHeaderArea h2{/*ブログタイトルと説明文を中央寄せ*/
text-align:center;
}

③メッセージボードのみの中央寄せ

.skinMessageBoard{/*メッセージボードのみの中央寄せ*/
text-align: center;
}

④記事全体（タイトルも日付も記事も）の中央寄せ

.skinArticle {/*記事全体（タイトルも日付も記事も）の中央寄せ*/
text-align:center;
}

⑤記事本文だけの中央寄せ

.articleText{/*記事本文だけの中央寄せ*/
text-align:center;
}

⑥記事投稿欄の日付とテーマのみ中央寄せ

.articleDetailArea{/*記事投稿欄の日付とテーマのみ中央寄せ*/
text-align: center;
}

⑦記事フッター中央寄せ

.articleExLinkArea,.articleLinkArea{/*記事フッター中央寄せ*/
text-align:center;
}

⑧ルームの文字をすべて中央寄せ

<div style="border: 2px dotted gray;margin:10px 10px 5px 10px;padding:10px 10px 10px 10px;background-color:#e6f6ff;"><style type="text/css">#leftArea,#rightArea,#footerArea{text-align:center;}</style>
上記のCSSをルームのフリースペースへ入力する