アメーバブログの各カラムの角を丸くしたいのですが…。

質問

私は今日アメーバブログに入りました。
現在、CSS編集を行っている最中です。
スキンはスタンダードの「グリーン」を使用しています。
CSSは公開できず、大変申し訳ないのですが、ブログで一般的に使われている３カラムの形式で、各カラム（ヘッダー・メッセージボード・各記事・サイドの２つのカラム）の角を丸くしたいと思っています。
色々検索してみたのですが、どうも見つからずに大変困っています。
どのような英数字（？）を入れればいいのでしょうか？
ご指導よろしくお願いします。

追記１：HTMLタグは一通り理解しています。

追記２：「CSSが分からないと教えようがない」といったような回答はご遠慮願います。

回答No.2

Muller3

HTMLの編集が必要になってきますが、アメーバブログではできますでしょうか。divをネストしてそれに角丸の画像を背景画像として埋め込むのが一般的なやり方ですので、まずdivを付け加え、それにclass属性を定義し、CSSで用意した角丸画像をDIVのclassに背景画像として指定し、配置などを整えるという作業になります。
イメージとしては、各記事の入る箱に角丸のフタと角丸の敷物を敷く感じでしょうか。ボックス要素であるdivによってそのフタを付け加えるわけです。（レイアウトのためにdivを使うことはあまり推奨されてませんが）
使用するプロパティや細かい数字などはHTML構造を見ないとなんとも言えませんので説明はここまでしかできませんが…とりあえず、一発で角丸にするためのプロパティを使っているわけではなく、えらい苦労というか工夫をしてみなさんその表現をなさっている、ということです。

実際の例
ビジュアル：http://www.sixapart.jp/movabletype/mt3/（これのサイドバーの角丸）
CSSソース（見せてもらってもいいでしょう…）：http://www.sixapart.jp/common/styles/side-menu.css
角丸にするための画像：http://www.sixapart.jp/files/images/rounded_top_180.gif（白い画像なのでブラウザでは見えません。画像が見えるソフトで見て下さい）
ここでは、ボックスの背景に色を付け、角丸になるように背景と同じ白の画像を重ねている、ということですね。

以下参考までですが、
The Trap of Web Design：カドマルブロックを作る（http://www.ichiro.to/note/kadomaru）
こちらの記事には、次期CSSであるCSS3の仕様には、border-radius という角丸プロパティがあるらしいということと、もじら（http://www.mozilla.org/）には独自拡張で角丸があるということが書かれています。でももじらでしか見えないわけなので、これを使うのもあまり意味がないかと。

お礼

とても丁寧な回答、本当にありがとうございました。角丸は単純そうに見えて、すごく大変なのですね。色々挑戦してみたいと思います。ありがとうございました！

回答No.1

345itati

んーと、基本的に角を丸くする様なタグやCSSの記述は無いので、実際に「丸い角」の画像を用意するしか方法が無いと思うんですけど・・・・・。

多分アメブロのトップにある、「オフィシャルブログをもっと見る」のボックスのような丸い角のボックスを作成したいのですよね？

CSSの記述のみで角を丸くするのは無理だと思うのですが・・・１ドットの画像をずらして配置とか、非現実的で非効率な事で出来なくもなさそうですけど。

お礼

回答ありがとうございます。記述では角を丸くできないのですね。勉強になりました。わざわざありがとうございました！