読者です 読者をやめる 読者になる 読者になる

ポケットにチョコレート

ロハコ大好き子育て主婦が役に立ちそうなことを雑多に。日々節約、ちょっといいこと。

オススメ記事

はてなブログをカスタマイズ - 角丸編

はてなブログ

昨日ブログデザインを一新しましたが、そのひとつ、ボックスや画像の角を丸くすることについてご紹介したいと思います。

簡単なのでぜひ取り入れてみてください!

記述する場所

デザイン > カスタマイズ > デザインCSSの部分に記述します。

f:id:poketton:20130704000251g:plain

こんな感じです。

f:id:poketton:20130704000907g:plain

CSS

記述するコードは3行。

例:各記事の外枠

.entry {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

セレクタ名(.entry)を適用したい部分に変更してください。

以下はこのブログで実際に変更している箇所ですので参考までに。もちろん他も可能です。

  • 各記事内の画像:.entry-content img
  • カテゴリー(記事内):.categories a
  • コメントを書く:.leave-comment-title
  • 次の記事・前の記事:.pager a
  • 検索フォーム:.search-form

複数に適用する場合はカンマで区切ってまとめることも可能です。

例:コメントを書くと検索フォーム

.leave-comment-title, .search-form {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

3pxくらいを設定しておくと、ちょっと角が取れてやわらかい印象になりますね(*^^*)

解説

border-radius が角を丸くするプロパティです。

ただこれだけですとChrome10、Firefox4、Safari5より前は未対応ですので、-webkit~で古いChromeSafari、-moz~で古いFirefox向けに2行追記しています。

尚、丸くする部分は楕円にも出来ます。

詳しくはHTMLクイックリファレンスさんを参照することをオススメします。