2015年07月31日

記事一覧や関連記事のサムネイルの角を丸くした!

トップページを眺めていると、どうも画面がトゲトゲしているような気がした(謎)。
たぶん、記事一覧とか新着記事のサムネイルが気に入らないんだろう。
ってことで、CSS弄って片っ端から画像の角を丸めてみました!

解析する!

改造するには構造を知らなければできませんので、とりあえず使用しているテーマを構成するファイルにアクセスしましょう。
自分のWordPressへログインし、外観→テーマの編集からCSSとかPHPを開き一通り眺めます。
すると記事一覧は「topnews」、関連記事や新着記事は「kanren」IDが設定されていることがわかります。
今回やりたいことは「画像の角を丸める」ことなので、これらのIDの画像に関する要素を弄ればできそうですね!

弄る!

弄ると言っても上記IDのimg要素に対し、丸めるコードを1行追記するだけですのでお手軽です。
記事一覧のサムネイルの角を丸めるには、 #topnews dt img を以下のように編集します。

#topnews dt img {
    width: 100%;
    border-radius: 20px; /*角を丸める(追記)*/
}

関連記事と新着記事のサムネイルの角を丸めるには、 #kanren dt img を以下のように編集します。

#kanren dt img {
    width: 100%;
    border-radius: 20px; /*角を丸める(追記)*/
}

ここでは20pxと設定していますが、数値を大きくすれば円形に近づき、小さくすれば四角に近づきます。お好みに応じて変更してください。

まとめ

テーマの改造と聞くと難しそうで引いてしまいますが、極々一部分の要素から理解していけば、無理なく理解できると思います。
凄い人が書いたコードを見るのはとても良いことなので、日本の方が開発したこのStingerは素晴らしい教科書だと思います。