今回はCSSを編集して見出し画像の角を丸くをします。

何がしたいのか

 こちらはライブドアブログの公式デザイン「ホワイトプレス」のトップページ。
2017-06-24_082627
見出し画像がタイル状で表示されるのがホワイトプレスの魅力の1つなわけですが、少し気になる点があります。

2017-06-24_082800
画像が文字通りの真四角で角が直角なんですよね。 トゲトゲしい印象があります。

今回は、この画像の角を丸くする方法についてまとめたいと思います。


border-radius:を1行加えるだけ

 見出し画像の角を丸くするには、border-radius:プロパティというものを使います。 

CSS編集画面での「.article-first-image img{    }」という部分が見出し画像についての要素になります。

ここに

  border-radius: ◯◯px;

を追記するだけで完了です。 ◯◯の部分に数値を入れ、その数値の分だけ角が丸くなります。大きい数値を入れれば丸い画像になりますよ。

ちなみにこのブログの場合は 9px でこのくらいになります。
2017-06-24_085006

最後に

 めっちゃ地味な内容でしたね。 こういうちょっとしたところも自由にデザインできるのでCSSは便利です。

以上、お疲れ様でした~。