【サムネイルの表示方法を変更する】
子テーマのStyle.cssに追記する。
- TwentyFourteen のサムネイルを中央に表示する
- TwentyFourteen のサムネイルの背景色を変更する
- TwentyFourteen のサムネイルを透過表示させる
- TwentyFourteen のサムネイルの高さを指定する
・imagesフォルダを子テーマの中にコピーすること
サムネイルの背景色を変更するコードには、画像ファイルを読み込んで使うところがある。
従来のTwentyFourteenフォルダから子テーマのフォルダにcssファイルファ移動しているので、この画像フォルダも子テーマにコピーするか、URLの部分を書き直して、フルパスで記述するか、どちらかでの対応が必要。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
/* サムネイルを中央に表示する、背景色を変更する */ .post-thumbnail { background: #b2b2b2 url(images/pattern-light.svg) repeat fixed; display: block; position: relative; width: 100%; z-index: 0; text-align: center; } a.post-thumbnail:hover { background-color: #bb3333; } /* サムネイルを透過表示させる */ .site-content .has-post-thumbnail .entry-header { padding-top: 24px; filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; } /* サムネイルの高さを指定する */ img.size-full, img.size-large, .wp-post-image { max-width: 100%; height: auto; } .post-thumbnail img { width: auto; max-height: 150px; } |