今回は、投稿の記事タイトルのCSS設定を行います。
前回までで主なテンプレートファイルはTwentyFourteenから流用して作成できました。各テンプレートファイル毎に自分で作成し、表示確認する事によって各テンプレートファイルの役割もイメージできるようになってきたと思います。
今回からTwentyFourteenのCSS設定をベースに自分の好みに合わせてスタイルを設定していきたいと思います。今回は投稿の記事タイトルの設定を行います。
●TwentyFourteenでのCSS設定
記事本文のテンプレートファイルcontent.phpの中身を見ると、記事のタイトル部分やサマリーに関して下記CSSクラスを使って設定しています。
<header class=”entry-header”>
<h1 class=”entry-title”>
<div class=”entry-summary”>
TwentyFourteenのスタイルシートから該当する部分をコピーし、適宜修正します。
●TwentyFourteenのstyle.cssの設定をベースに設定
上記のCSSクラスは、TwentyFourteenのstyle.cssの”6.0 Content”、”6.2 Entry Header”の部分に設定されています。
“6.0 Content”、”6.2 Entry Header”の部分をコピーし、使用していないクラスは除去し、使用しているCSSクラスを自分の好みに合わせて修正します。
●修正例
①現在作成中のテーマは、ブートストラップ３のグリッドレイアウトを使って書き換えているいるため、その部分については修正する必要があります。下記箇所は削除します。
.entry-headerと.entry-contentの
max-width: 474px;
②投稿記事のタイトルの文字サイズを小さくしてみます。
.entry-titleのfont-sizeを33pxから23pxへと変更します。
●スタイルシートに追加した内容
/**
* 6.0 Content
* ---------------------------------------------------------
*/
.entry-header,
.entry-content,
.entry-summary,
.entry-meta,
.page-content {
margin: 0 auto;
}
.page-content {
margin-bottom: 48px;
}
/**
* 6.2 Entry Header
* ---------------------------------------------------------
*/
.entry-header {
position: relative;
z-index: 1;
}
.entry-title {
font-size: 23px;
font-weight: 300;
line-height: 1.0909090909;
margin-bottom: 12px;
margin: 0 0 12px 0;
text-transform: uppercase;
}
.entry-title a {
color: #2b2b2b;
}
.entry-title a:hover {
color: #41a62a;
}
.entry-header {
background-color: #fff;
padding: 0 10px 12px;
}
.has-post-thumbnail .entry-header {
padding-top: 24px;
}