CSS編集用デザインのメッセージボード

CSS（スタイルシート）でフォント（書体）の変更に続き、「text-align（行揃え）」の設定です。CSS 編集用デザインのカスタマイズです。

「text-align」では、left（左揃え）／center（中央揃え）／right（右揃え）を設定します。

例えば、ブログ全体を中央揃えにするには以下のように CSS を設定します。

変更前の CSS コード

/* (3-1) ボディ（全体）
--------------------------------------------*/

/* skinBody ボディ */
.skinBody{}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}

変更後の CSS コード（赤字が編集部分です）

/* (3-1) ボディ（全体）
--------------------------------------------*/

/* skinBody ボディ */
.skinBody{
text-align: center;
}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}

上記のように設定すると、ブログのタイトル／説明／記事タイトル／サイドバーの文字／ブログ本文／メッセージボードのテキストなどが中央揃えになります。

「center」を「left」や「right」に変更することで、左に寄せたり右に寄せたりといった設定が可能です。

これまでご紹介した CSS の編集例として、メッセージボードをカスタマイズします。

メッセージボードの編集は、ブログを書く／アメブロを書く／メッセージボードから行います。

メッセージボードに画像を配置するには、まず画像フォルダに配置する画像をアップロードします。

記事に追加ボタンを選択します。表示された画像の HTML タグをすべてコピーして、メッセージボードの編集画面に貼り付けます。（画像ではなく別のホームページなどにリンクしたい場合は、URL を変更します）

メッセージボードに画像を追加する方法は、記事中に画像を追加する方法と同じです。

編集前の CSS コード

/* (3-5) メッセージボード
--------------------------------------------*/

.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border-top:1px dotted #979797;
border-bottom:1px dotted #979797;
background:#ffffff;/* ←メッセージボードに背景を敷きたいとき */
}
.skinMessageBoard2{}
.skinMessageBoard3{
padding:16px 30px;
}

「現在使用中のブログデザインCSS」から、メッセージボードのデザインを編集します。

編集後の CSS コード（赤字が編集部分です）

/* (3-5) メッセージボード
--------------------------------------------*/

.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border-top:5px double #9dec1f;
border-bottom:5px double #9dec1f;
background:#f0fbde;/* ←メッセージボードに背景を敷きたいとき */
color:#7b9bf4;
text-align: center;
font-weight:bold;
font-size:15px;
}
.skinMessageBoard2{}
.skinMessageBoard3{
padding:10px 30px;
}

「border-top」と「border-bottom」は、メッセージボードの上下のラインです。

太さを 5px に変更して、ラインは double（二重線）に変更しました。ラインのカラーも変更しました。

「background」では、メッセージボードの背景色を設定します。ホワイトから薄いグリーンに変更しました。

「color」はテキストの色です。薄い青色に設定しました。

「text-align」では、テキストと画像を中央揃えに設定しました。

「font-weight」は、文字の太さの設定です。bold（太字）に設定しました。

「font-size」は、テキストのサイズ調整です。

「padding:10px 30px;」は、内側の余白（padding）の設定です。

最初の 10px が上下の padding（パディング）です。後ろの 30px が左右のパディングです。

例としてメッセージボードのデザインを編集しましたが、他の箇所も概ね同じような編集が可能です。