WordPress(ワードプレス)の独自のクラスとそのCSSカスタマイズを紹介。画像に枠を付けたりサイトの左右に広告を設置したり、CSSでカスタマイズする方法をまとめています。
こんな人におすすめ！
- サイトデザインをCSSだけで調整したい
- 自作のCSSを作りたい
CSSカスタマイズの注意点
テーマや設定によって書き方は違う
記述するCSSは、使用中のテーマやテーマ内の設定によって多少変わります。
当サイトでは「THE THOR」というテーマを使っているので、それ以外の方はある程度調整が必要です。
なるべくカスタマイズしない
追加CSSでカスタマイズするとカスタマイズ前の記述分無駄が生じるので、どちらでもいいものは思い切ってやらないのがおすすめです。
また、THE THORの「THE THOR CHILD: style-user.css」みたいに子テーマのスタイルシートがある場合は、リアルタイムプレビューは使えないものの無駄を減らせます。
追加CSSのリアルタイムプレビューで調整しながら確定→追加CSSからは削除してスタイルシートに記述する流れですね。
自作クラスのカスタマイズ
新規で作成したクラスです。クラス名は既存のものと一致しないように注意して、お好みで変更して使ってください。
画像に枠を付ける
| Before | After |
|---|---|
 | |
1 2 3 4 5 | .frame{ border: solid 1px #323232; border-radius: 4px; } |
画像に枠を付けたい時に使えるクラスです。元々の画像に枠を付けたり、表の中に入れるなら不要かなとも思いますが。
当サイトでは、画像の背景とサイトの背景が被ると分かりづらい時に使っています。
サイトの左右に広告を設置する
| Before | After |
|---|---|
 |  |
1 2 3 4 5 6 7 8 9 10 11 12 13 | .ljack { position: fixed; bottom: 24px; left: calc(50% - 900px); z-index:1; } .rjack { position: fixed; bottom: 24px; right: calc(50% - 900px); z-index:1; } |
サイトの左右に広告などを設置したい時に使えるクラスです。表示場所の計算部分やz-indexはサイトに併せてお好みでどうぞ。
当サイトでは、PC画面の左右に広告枠を設置する時に使っています。HTMLはウィジェットのサイドバーエリアに左右それぞれで設置し、スマホの場合は非表示にしています。
