テーマ

TwentyFourteenのサムネイルの表示方法（子テーマのCSSに記述）

【サムネイルの表示方法を変更する】
子テーマのStyle.cssに追記する。

・imagesフォルダを子テーマの中にコピーすること

サムネイルの背景色を変更するコードには、画像ファイルを読み込んで使うところがある。
従来のTwentyFourteenフォルダから子テーマのフォルダにcssファイルファ移動しているので、この画像フォルダも子テーマにコピーするか、URLの部分を書き直して、フルパスで記述するか、どちらかでの対応が必要。

[php]
/* サムネイルを中央に表示する、背景色を変更する */

.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;
}

[/php]

記事の共有：