【Gush2カスタマイズ】サムネイルを丸くする方法。「Stinger5 forLadys」のマネっこです。
アフィリエイター御用達WordPressテーマの中からGush2を選び、十分満足しているのですが、「Stinger5 forLadys」のかわいらしさに心残りがありまして(^^ゞ、丸いサムネイルをマネしてみました。
トップページやカテゴリーページの大きいサムネイル、サイドバーや関連記事の小さいサムネイル、どれも丸くしてます。
テーマ選びの経緯はこちら→WordPressテーマはアフィリエイト向けのを素直に選べばよかったんだと実感したよ。
カスタマイズ方法
Enjiさんが、やり方を書いてくださってるので、それをGush2に応用します。
ENJIOUT:女性ブロガー向けWordPressテーマ 「Stinger5 forLadys」を配布開始しました。
style.css に丸いサムネイル用記述を追加
Gush2のサムネイル表示のクラス名を探して、丸くする記述を追加します。
クラス名 | 表示場所 | style.css の行目安 |
---|---|---|
.thumb_box | トップページ | 506(スマホ用)1382(PC用) |
.rel-in-thumb | 関連記事 | 837(スマホ用)1492(PC用) |
.side_thumb | サイドバー | 1067 |
スマホ用とPC用で5箇所に追加します。「thumb」で検索すれば見つかります。
水色が追加行です。
508 509 510 511 512 513 514 515 516 517 518 519 |
#contents #main .home_area .thumb_box { float: left; width: 100px; margin: 0 8px 0 0; } .thumb_box img { width: 100px; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; background-color: #f7eff2 } |
844 845 846 847 848 849 850 851 852 853 854 |
#relations .rel-in .rel-in-thumb { float: left; margin: 0 10px 10px 0; } .rel-in-thumb img { width: 100px; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; background-color: #f7eff2 } |
1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 |
.side_thumb { display: table-cell; width: 105px; padding: 0 5px 0 0; } .side_thumb img { width: 100px; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; background-color: #f7eff2 } |
1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 |
#contents #main .home_area .thumb_box { float: left; margin: 0 10px 0 0; width: 150px; height: 150px; } .thumb_box img { width: 150px; border-radius: 75px; -webkit-border-radius: 75px; -moz-border-radius: 75px; background-color: #f7eff2 } |
1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 |
#relations .rel-in .rel-in-thumb { float: none; margin: 0 auto 5px; width: 110px; height: 110px; } .rel-in-thumb img { width: 110px; border-radius: 55px; -webkit-border-radius: 55px; -moz-border-radius: 55px; background-color: #f7eff2 } |
background-colorを指定しているのは、背景透過画像でも丸さを感じられるようにするためです。
悩んだところ
radiusの値
Enjiさんのページでは、radiusの値はwidthと同じになっています。
だけど、CSSで円を表現するときはwidthの半分を指定するのが普通のようです。
試してみるとどちらも円になりました。
違いを解明できなかったので、一般的なほうにしました。
参考:
W3Q:覚えておいて損はない、CSSのみで画像を円形や三角形に切り抜く方法
CSS-TRICKS:The Shapes of CSS
HTMLクイックリファレンス:border-radius-CSS3リファレンス
ベンダープレフィックス
ベンダープレフィックスは、IE用やOpera用も入れるほうがよいのかな?とか思ったり、今はもういらないかも?とも思ったりしたのですが、Enjiさんのと同じままにしました。
こういうことは、経験値の高い方のマネをしとくのがよいだろうと思ったので。
参考:
HTMLクイックリファレンス:ベンダープレフィックス-CSSの基本
まとめ
わかってみれば簡単な修正なのですが、cssの意味とかすっかり忘れているので、調べたり悩んだり、けっこう時間かかってしまいました。
ヘッダー画像も壁紙もデフォルトのままなので、少しずつ変えて、自分らしくしていきたいなと思います。
この記事へのコメントはこちら