今回は、記事のタイトル部分のフォント設定をします。文字のサイズや色といった設定のほか、記事のタイトルなどに表示されるアルファベットが自動的に大文字にトランスレーションする設定がかかっているので、これを変更。入力した通りに大文字、小文字の双方で表示されるように変えます。また、ボーダーを使ってタイトル部の修飾をします。
また、トップページに表示される記事タイトルと、記事タイトルや『この記事の続きを読む』をクリックした先で表示される記事タイトルの文字色が違うので、これを同じ色に揃えたいと思います。

コンテンツエリアの見ばえを良くする
コンテンツエリアの見ばえを良くする

 

親テーマのスタイルシートの確認

TwentyFourteenの親テーマのスタイルシート(style.css)で、記事のタイトル部にどんな設定がかかっているか確認します。

親テーマの設定
親テーマの設定

.entry-title {
font-size: 33px;
font-weight: 300;
line-height: 1.0909090909;
margin-bottom: 12px;
margin: 0 0 12px 0;
text-transform: uppercase;
}

これら親テーマの設定をもとに、子テーマのスタイルシート(style.css)でタイトル部の変更をおこないます。

 

子テーマのスタイルシートを編集する

管理画面の〔外観〕-〔テーマの編集〕をクリック。〔編集するテーマを選択〕の部分で、子テーマのフォルダが選択されていることを確認し、右側のテンプレート一覧から〔スタイルシート〕をクリックします。

①フォントの大きさ、アルファベットの大文字指定解除、枠線による修飾
私は、タイトル部のフォントが大きいと感じるため、フォントサイズを小さくしたいと思います。また、アルファベットが強制的に大文字に変更される設定に『none』指定をしました。また、ここにタイトル部の修飾をする記述を(青字部分)を書き加えています。
今回は、変更箇所が箇所が見にくくなるので、設定変更しなかった属性や値は記述していません。子テーマで変更を記述しない場合、親テーマの設定が、そのまま継承されています。

子テーマのスタイルシートを編集1
子テーマのスタイルシートを編集1

 

/******記事のタイトル設定*******/
.entry-title {
font-size: 24px;/*タイトル文字の大きさ*/
text-transform: none;/*uppercaseをnoneに変更*/
border-left: 6px solid magenta;/*線の左側の指定*/
border-bottom: 1px solid #FF00FF;/*『magenta』の16進数表記*/
background-color: #fff;/*枠線内の背景色*/
width: auto;/*枠線の幅は自動調節*/
padding: 0.2em 0.5em;/*borderまでの上下、左右の余白*/

前回もお話ししましたが、ボーダーには、none(線なし)、solid(単線)、double(2本線)、groove(立体的に窪んだ線)、ridge(立体的に隆起した線)、inset(ボーダーで囲まれた領域全体が窪んだ印象になる線)、outset(ボーダーで囲まれた領域全体が立体的に隆起した印象になる線)、dashed(破線)、dotted(点線)などがあります。

また、色の指定も、カラーネームや、『#16進数』のカラーコードで表記できます、カラーネームの場合、『#』は必要ありませんが、カラーコードの場合、『#』が必要なので、注意しましょう。

最後に『ファイルを更新』ボタンを押して、設定を適用します。

 

②結果を確認する
設定が反映されました。

結果の確認1
結果の確認1

さて、トップページに表示されている記事と、記事タイトル部をクリックしたり、『この記事を読む』をクリックしたあとに飛ぶ記事全文が表示されているページで、タイトルの文字色が異なっていることに気付きます。
そもそも、おおもとの記事は、〔『Twenty Fourteen』はじめてのテーマカスタマイズ(第8回)〕などで設定した設定が反映されています。

 

任意のフォントファミリーの指定例
任意のフォントファミリーの指定例

でも、トップページに表示されているタイトルでは、さきほど設定した親テーマ側のスタイルシート(図『親テーマの設定』参照)の下の行の設定が反映されています。

.entry-title a {
color: #2b2b2b;
}

そのため、フォントの色が違っているのです。記事本文と同じ色に指定したい場合は、ここで色を設定すればいいし、本来の記事とは別の色にして強調するといったことができるよう、個別に指定することもできます。

 

③トップページの記事タイトルのフォント色を変更する
親テーマにならい、さきほど指定した子テーマのスタイルシートの下に、色の値を変えた行を追加で記述します。
私は記事と同じ色のフォントにしたいと思いますので、以前に基本フォントの設定で使った『#7d7d7d』にします。
最後に、下部の『ファイルを更新』ボタンを押します。

子テーマのスタイルシートを編集2
子テーマのスタイルシートを編集2

 

.entry-title a {
color: #7d7d7d;
}

 

④結果を確認する
トップページの記事タイトルの色は変更され、同じ色になりました。

結果の確認2
結果の確認2

 

長くなりましたので、今回はここまで。
次回は、記事タイトルの上下に表示されているカテゴリや、日付や投稿者などの部分の設定を確認したいと思います。