アメブロの「メッセージボード」を四隅の角を丸にするCSSカスタマイズ

こんにちは。YOSHITAKA(@YOSHITA19704216)です。

初心者
アメブロで四隅の角を丸くできますか?

よしたか
簡単にできますよ。

アメブロを利用者の中でメッセージボードの角を丸くしたい人が多くいらっしゃったので、今日はその内容について説明していきます。

この記事を読むことで
  • メッセージボードの角を丸めるスキルが身につきます。

メッセージボードを編集する方法

メッセージボードの比較

アメブロのトップページにアクセスすると表示されるメッセージボード。


標準では上下に点線が表示される仕様です。

枠を角丸にすると少しやわらかい印象になりますね。

コピペの内容

メッセージボードを角丸線で囲むにはCSSの編集の最後に以下の記述を追記します。

CSSコピペ

.skinMessageBoard{
border:1px solid #999999;
border-radius:10px;
}

※CSS編集用デザインスキンのみのカスタマイズになります。

少しアレンジして、立体的に表示させたい(影を付けたい)場合は、

CSSコピペ

.skinMessageBoard{
border:1px solid #999999;
border-radius:10px;
box-shadow:3px 3px 3px #cccccc;
}

CSSの解説

CSS解説

.skinMessageBoard{
border:1px solid #999999; //先の太さと色
border-radius:10px; //角の丸み
box-shadow:3px 3px 3px #cccccc; //影の大きさ
}

まとめ

本日は角を丸める CSS についてご説明しました。

コピーペーストできますので、難しくはありません。いろんな色や、丸みの調整をして、ブログのカスタマイズに挑戦してください。

あなたは「Web集客」に限界を感じていませんか?

サイトをただ作るだけで満足ですか?

あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

良いコンテンツも埋もれてしまっては全く意味がありません。

正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

しかも、これだけでは終わりません!!

その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事