- トップ>
- アメブロカスタマイズ>
- メッセージボード
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 が左右のパディングです。
例としてメッセージボードのデザインを編集しましたが、他の箇所も概ね同じような編集が可能です。
スポンサーリンク