あめつくのブログ

  • このエントリーをはてなブックマークに追加

アメブロカスタマイズ メッセージボードの枠を角丸にする(css)

広告

ここでは「アメブロのメッセージボードの枠を角丸にする方法」を説明します。

【変更前】

【変更後】

なお、cssを編集するにはブログデザインを「CSS編集用デザイン」にする必要があります。ブログのデザインをCSS編集用デザインにする方法は、「アメブロのcssを編集するための設定」を参考にしてください。

広告

アメブロのメッセージボードの枠を角丸にする方法

マイページ右上の「アメーバのサービス一覧」をクリックします。
サービス一覧(PC編)

[デザインの変更]をクリックします。
デザインの変更(PC編)

[cssの編集]をクリックします。

cssの編集画面が表示されます。ここから、メッセージボードの枠を角丸にするためのcssの編集に入ります。

まず、下の赤枠の内容をコピーします。これが、メッセージボードの枠を角丸にするcssです。

最初の赤文字の部分の数値を変更すると、枠の太さが変更できます。2番目の赤文字の部分を変更すると枠の色が変更できます。色の変更方法は「アメブロ cssで色を指定する方法」を参考にしてください。最後の赤文字の部分の数値を変更すると、枠の角の丸みを変更できます。
(このcssは、一部のブラウザでは対応していない場合があります。IE8以下は対応していません。)

.skinMessageBoard,
.skinMessageBoard2,
.skinMessageBoard3{
border:none;
margin:0;
padding:0;
}
.skinMessageBoard{
margin:0 0 1.5em 0;
padding:1em;
border:1px solid #ccc;
border-radius:10px;
}

コピーした内容はcssの一番下の部分に貼り付けます。
貼り付けが終わったら、[保存]ボタンをクリックして追加したcssを保存します。

保存できたらブログを表示し、ブラウザの更新ボタンをクリックします。(古いデータが残っていると変更したcssが反映されませんので、ブラウザの更新ボタンをクリックして最新の状態に更新します。)

これで、メッセージボードの枠が角丸に出来ます!

ここまでの内容を動画でも確認できます。
よかったら、参考にしてください!
⇒ メッセージボードの枠を角丸にする

広告

関連記事

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

カテゴリー