【Gush2カスタマイズ】サムネイルを丸くする方法。「Stinger5 forLadys」のマネっこです。

 

アフィリエイター御用達WordPressテーマの中からGush2を選び、十分満足しているのですが、「Stinger5 forLadys」のかわいらしさに心残りがありまして(^^ゞ、丸いサムネイルをマネしてみました。

トップページやカテゴリーページの大きいサムネイル、サイドバーや関連記事の小さいサムネイル、どれも丸くしてます。

テーマ選びの経緯はこちら→WordPressテーマはアフィリエイト向けのを素直に選べばよかったんだと実感したよ。

カスタマイズ方法

Enjiさんが、やり方を書いてくださってるので、それをGush2に応用します。
ENJIOUT:女性ブロガー向けWordPressテーマ 「Stinger5 forLadys」を配布開始しました。

style.css に丸いサムネイル用記述を追加

Gush2のサムネイル表示のクラス名を探して、丸くする記述を追加します。

Gush2のサムネイルのクラス名
クラス名 表示場所 style.css の行目安
.thumb_box トップページ 506(スマホ用)1382(PC用)
.rel-in-thumb 関連記事 837(スマホ用)1492(PC用)
.side_thumb サイドバー 1067

スマホ用とPC用で5箇所に追加します。「thumb」で検索すれば見つかります。
水色が追加行です。

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の意味とかすっかり忘れているので、調べたり悩んだり、けっこう時間かかってしまいました。
ヘッダー画像も壁紙もデフォルトのままなので、少しずつ変えて、自分らしくしていきたいなと思います。

  • このエントリーをはてなブックマークに追加
  • Pocket
書いてる人 さらさらり
お里湯さんのひよこ|ぴよたそ

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。