角を丸くするCSS

nopic今までね~

サンプル
サンプル
サンプル

 上のような感じにね、食べに行ったお店の住所とか、電話番号を
四角で囲んでたんだけどね~。

どーも、この四角四面な感じが、ちょっとなんだかなぁ~って思ってね。
・・・で、角を丸くしたいなぁ・・・って。
やっぱ、角が丸いほーが、優しい感じするでしょ(笑

早速ググる。。。

あった、 All About に方法が載ってた。

——————————————————————–

▼more

・・・で、早速やってみた。

まず、
1) テーマ編集のスタイルシートに下記を追加

 /* ———- kadomaru ———- */
.kadomaru {
border-radius: 10px;         /* CSS3 */
-moz-border-radius: 10px;    /* Firefox */
-webkit-border-radius: 10px; /* Safari,Chrome */
background-color: #D3D3D3;   /* 背景色 */
margin: 10px;    /* 上下左右のマージンは10px */
padding: 10px;    /* 上下左右の余白は10px */
}

色は、blogのイメージ色のグレーを基調にするので#D3D3D3・・

後、Firefox   Safari  Chrome に対応するよーにってことで・・
IEやOperaだと見えないって書いてあったけど
結果からいうと、E9でも、角丸に見えたよ。

えーっと、次に、
2) 前から入れてるプラグインのAddQuicktagにタグを追加。

ボタン名、かどまるって入れて
開始タグに、<div class=”kadomaru”><p>って入れる。

後は、記事書くときに、四角で囲いたいトコに、AddQuicktag入れればOK。

テスト
テスト
テスト

上記のテスト文字に・・・

<div class=”kadomaru”><p>テスト
テスト
テスト</P></div>

・・・、角が丸くなって表示されたよ。

テスト
テスト
テスト

使用プラグイン
AddQuicktag

角を丸くするCSS” に対して 2 件のコメントがあります

  1. Keiko より:

    ああ、都さんの情熱の10%でも私に残っていたらなぁ。
    最近はテーマをそのまま使っちゃったりして・・・恥ずかしい限りです。

    いつかまた情熱が再燃した時には色々と教えて下さいねー。
    便りにしてます。^^;

    1. より:

      Keikoさん~こんばんは~
      いつも、コメントを残してくださって
      本当にありがとーございます~
      楽しく拝見させて頂いています~~~

      >情熱
      えーーーそんなコトないんですが・・・
      ちょこっとしたコトが気になりだすと、
      そーしてみるには、どうしたら??
      なんて悩んじゃったりするほーなんで(笑

      >再燃
      いえいえ~こちらこそ、どうぞよろしくお願いします~
      今wordpressじゃなくって、国産のCMSを
      使ってみたいなぁ~って密かに考え中です(笑
      まだ全然時間が取れなくって。。あれですが。。。
      ゆっくりPCに向かえる余裕ができたら
      新しく作ってみたいなぁ~って思っています。

コメントを残す

メールアドレスが公開されることはありません。