重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

【6/2終了】教えて!gooアプリ版

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


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

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

A 回答 (2件)

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_ …(白い画像なのでブラウザでは見えません。画像が見えるソフトで見て下さい)
ここでは、ボックスの背景に色を付け、角丸になるように背景と同じ白の画像を重ねている、ということですね。

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

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

お礼日時:2006/09/30 11:29

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



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

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

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

お礼日時:2006/09/30 11:27

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

今、見られている記事はコレ!