今回はCSSを編集して見出し画像の角を丸くをします。
何がしたいのか
こちらはライブドアブログの公式デザイン「ホワイトプレス」のトップページ。見出し画像がタイル状で表示されるのがホワイトプレスの魅力の1つなわけですが、少し気になる点があります。
画像が文字通りの真四角で角が直角なんですよね。 トゲトゲしい印象があります。
今回は、この画像の角を丸くする方法についてまとめたいと思います。
border-radius:を1行加えるだけ
見出し画像の角を丸くするには、border-radius:プロパティというものを使います。CSS編集画面での「.article-first-image img{ }」という部分が見出し画像についての要素になります。
ここに
border-radius: ◯◯px;
を追記するだけで完了です。 ◯◯の部分に数値を入れ、その数値の分だけ角が丸くなります。大きい数値を入れれば丸い画像になりますよ。
ちなみにこのブログの場合は 9px でこのくらいになります。
最後に
めっちゃ地味な内容でしたね。 こういうちょっとしたところも自由にデザインできるのでCSSは便利です。以上、お疲れ様でした~。
コメント
コメント一覧 (1)
次の記事も楽しみにしております。
ちなみに、ほとんど丸パクリお許しください。
m(_ _)m
このブログにコメントするにはログインが必要です。
さんログアウト
この記事には許可ユーザしかコメントができません。