PART4今回は、記事のタイトル部分のフォント設定をします。文字のサイズや色といった設定のほか、記事のタイトルなどに表示されるアルファベットが自動的に大文字にトランスレーションする設定がかかっているので、これを変更。入力した通りに大文字、小文字の双方で表示されるように変えます。ボーダーを使ってタイトル部の修飾をします。トップページに表示される記事タイトルと、記事タイトルや『この記事の続きを読む』をクリックした先で表示される記事タイトルの文字色が違うので、これを同じ色に揃えたいと思います。コンテンツエリアの見ばえを良くする親テーマのスタイルシートの確認TwentyFourteenの親テーマのスタイルシート(style.css)で、記事のタイトル部にどんな設定がかかっているか確認します。uppercase;}これら親テーマの設定をもとに、子テーマのスタイルシート(style.css)でタイトル部の変更をおこないます。子テーマのスタイルシートを編集する管理画面の〔外観〕-〔テーマの編集〕をクリック。〔編集するテーマを選択〕の部分で、子テーマのフォルダが選択されていることを確認し、右側のテンプレート一覧から〔スタイルシート〕をクリックします。私は、タイトル部のフォントが大きいと感じるため、フォントサイズを小さくしたいと思います。アルファベットが強制的に大文字に変更される設定に『none』指定をしました。ここにタイトル部の修飾をする記述を(青字部分)を書き加えています。今回は、変更箇所が箇所が見にくくなるので、設定変更しなかった属性や値は記述していません。子テーマで変更を記述しない場合、親テーマの設定が、そのまま継承されています。0.5em;/*borderまでの上下、左右の余白*/前回もお話ししましたが、ボーダーには、none(線なし)、solid(単線)、double(2本線)、groove(立体的に窪んだ線)、ridge(立体的に隆起した線)、inset(ボーダーで囲まれた領域全体が窪んだ印象になる線)、outset(ボーダーで囲まれた領域全体が立体的に隆起した印象になる線)、dashed(破線)、dotted(点線)などがあります。色の指定も、カラーネームや、『#16進数』のカラーコードで表記できます、カラーネームの場合、『#』は必要ありませんが、カラーコードの場合、『#』が必要なので、注意しましょう。最後に『ファイルを更新』ボタンを押して、設定を適用します。2結果を確認する設定が反映されました。結果の確認1さて、トップページに表示されている記事と、記事タイトル部をクリックしたり、『この記事を読む』をクリックしたあとに飛ぶ記事全文が表示されているページで、タイトルの文字色が異なっていることに気付きます。Fourteen』はじめてのテーマカスタマイズ(第8回)〕などで設定した設定が反映されています。任意のフォントファミリーの指定例でも、トップページに表示されているタイトルでは、さきほど設定した親テーマ側のスタイルシート(図『親テーマの設定』参照)の下の行の設定が反映されています。#2b2b2b;}そのため、フォントの色が違っているのです。記事本文と同じ色に指定したい場合は、ここで色を設定すればいいし、本来の記事とは別の色にして強調するといったことができるよう、個別に指定することもできます。3トップページの記事タイトルのフォント色を変更する親テーマにならい、さきほど指定した子テーマのスタイルシートの下に、色の値を変えた行を追加で記述します。私は記事と同じ色のフォントにしたいと思いますので、以前に基本フォントの設定で使った『#7d7d7d』にします。最後に、下部の『ファイルを更新』ボタンを押します。#7d7d7d;}4結果を確認するトップページの記事タイトルの色は変更され、同じ色になりました。結果の確認2長くなりましたので、今回はここまで。次回は、記事タイトルの上下に表示されているカテゴリや、日付や投稿者などの部分の設定を確認したいと思います。『BIOS/UEFI(EFI)』って何だ?関連コンテンツよろしくお願いします(*^_^*)訪問ありがとうございます。