Twenty FourteenのFeaturedコンテンツのCSSの書き換えに関するメモ。

Twenty FourteenのFeaturedコンテンツのCSS書き換えに関する記述は以下の通り。

• TwentyFourteen のFeatured表示項目の調節
• TWENTYFOURTEEN のFEATURED表示項目の調節2（タイトルの高さを変更）

従来表示されるサイズは、max-widthに自動だったのだが、インデクスページのサムネイルを高さ125pxになるようにCSSを書き換えているので、ここで表示されるサムネイルも125pxで表示されるようになった。

• TwentyFourteen のサムネイルの高さを指定する

デフォルトでは以下のように表示される。余白などがあるので調製する。

これらのCSSのデフォルトは以下の通り。

[php]
/**
* 9.0 Featured Content
* —————————————————————————–
*/

.featured-content {
background: #000 url(images/pattern-dark.svg) repeat fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
width: 100%;
}

.featured-content-inner {
overflow: hidden;
}

.featured-content .hentry {
color: #fff;
margin: 0;
max-width: 100%;
width: 100%;
}

.featured-content .post-thumbnail,
.featured-content .post-thumbnail:hover {
background: transparent;
}

.featured-content .post-thumbnail {
display: block;
position: relative;
padding-top: 55.357142857%;
overflow: hidden;
}

.featured-content .post-thumbnail img {
left: 0;
position: absolute;
top: 0;
}

.featured-content .entry-header {
background-color: #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 96px;
overflow: hidden;
padding: 24px 10px;
}

.featured-content a {
color: #fff;
}

.featured-content a:hover {
color: #41a62a;
}

.featured-content .entry-meta {
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1.0909090909;
margin-bottom: 12px;
}

.featured-content .cat-links {
font-weight: 700;
}

.featured-content .entry-title {
font-size: 18px;
font-weight: 300;
line-height: 1.3333333333;
margin: 0;
text-transform: uppercase;
}
[/php]

何カ所か書き換える。

サムネイルの余白の背景に入る斜線のimageを削除。背景色を黒に指定。
[php]
.featured-content {
background-color: #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
width: 100%;
}
[/php]

サムネイル表示スペースの高さをピクセルに固定。数値を変更すると高さを任意のものに変更できる。
[php]
.featured-content .post-thumbnail {
display: block;
position: relative;
padding-top: 60px;
overflow: hidden;
}
[/php]

サムネイルの高さをピクセルに固定。max-heightの項を追加。数値を変更すると高さを任意のものに変更できる。
[php]
.featured-content .post-thumbnail img {
left: 0;
position: absolute;
top: 0;
max-height: 60px;
}
[/php]

記事タイトル表示行を3行に拡張

• TWENTYFOURTEEN のFEATURED表示項目の調節2（タイトルの高さを変更）

[php]
.featured-content .entry-header {
background-color: #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 128px;
overflow: hidden;
padding: 24px 10px;
}
[/php]

書き換え後の表示は以下の通り