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

前回までのカスタマイズをもとに、これから文字設定や修飾を用いて図のようにコンテンツエリアの見栄えをよくしていきたいと思います。
コンテンツエリアの変更プランは以下の通り。

変更1:フォントの設定
変更2:『この記事の続きを読む』の設定と修飾
変更3:幅の調整
変更4:タイトルの設定変更と修飾

スタイルシートやphpの編集が必要ですが、今回から数回に渡り、図をたくさん入れて、丁寧にお話していきます。

 

〔テーマの編集〕がしやすくなるプラグイン

先日のブログでお話したのですが、うっかりでも、スタイルシートやPHPを、NOTEPADで上書きしたくありません。
ファイルの中身を確認するだけでも、BOMなしUTF-8に対応したテキストエディタか、管理画面の〔外観〕-〔テーマの編集〕を使うようにします。PHPやスタイルシートを編集するのに向いたテキストエディタは、数多くのフリーウェアがありますから、ネット上で検索して、好みのものを使えばいいと思いますが、〔テーマの編集〕で作業したい場合、行数表示や入力支援機能を持つプラグインを使うと便利です。
これからスタイルシートの編集が続くので、ここで、1つプラグインを、ご紹介しておくことにしました。
私は『Advanced Code Editor』を利用しています。背景も10種類から選べますし、検索機能や、設定値の色表示、コメントの記号挿入などの機能もありますし、横に行数も表示されるので、こうしたプラグインを利用すると、スタイルシートやPHPが編集しやすくなると思います。

Advanced Code Editor
Advanced Code Editor

インストール方法
これまでのように、管理画面の〔プラグイン〕-〔新規追加〕の画面から、検索に「Advanced Code Editor 」と入力してクリックすると、『今すぐインストール』をクリックできる画面になります。インストール後は有効化してください。

 

プラグインのインストール
プラグインのインストール

 

フォントの設定を変更する

それでは、カスタマイズをはじめます。
管理画面の〔外観〕-〔テーマの編集〕をクリックします。ちょっと親フォルダのスタイルシートを確認したいので、〔編集するテーマを選択〕から、親テーマのフォルダにし、「選択」ボタンをクリックします。
目下のところ、スイタイルシートとfunction.phpは、親テーマと同一内容のファイルではありませんね。
親テーマに記述されている内容を、そのまま編集したほうが良いものは、親テーマからファイルの内容も含めてコピーしていますし、内容ごとコピーすると編集しにくい、コピーするのがマズいファイルは、子テーマ用に別途、空のファイルを作成して、編集しています。
フォントの種類やサイズといったサイトのスタイルを指定しているのは、スタイルシートです。子テーマ側のスタイルシートで、とくに設定を指定しない場合は、親テーマのスタイルシートに記述された内容が、子テーマのスタイルにも反映されています。

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

親テーマのスタイルシート100行近辺に、記事のタイトルや本文などに関わるフォント設定箇所があります。つまり、この要素や属性・値を子テーマのスタイルシートにコピペして、値を変更すれば、本文記事などに関わるフォントの基本設定が変更できるのです。親テーマの設定そのままで良いものは、子テーマのスタイルシートに記述する必要はありませんが、あとで見直したときに違いを比べやすいよう、ここでは、すべての設定を変えてみます。

補足
もし、〔テーマの編集〕から、親テーマのスタイルシートを閲覧していて、不慮の操作が加わってしまったとしても、画面下の『ファイルを更新』をクリックしなければ、内容は保存されません。
『ファイルを更新』ボタンを押さないように注意して、他のメニューでもクリックして戻ってくれば、オリジナルの状態のままのスタイルシートを再び閲覧することが可能です。
心配なら、バックアップでコピーをとっておくと良いでしょう。ファイル1つ1つ取るのも面倒ですから、親テーマのフォルダ、まるまるオリジナルを保存しておけば、いつでもオリジナルに復元できます。

 

①子テーマのスタイルシートに該当部分を記述する
まずは、親テーマと同じ記述を、子テーマのスタイルシートに記述します。そして、自分が設定したい内容に修正し、最後に『ファイルの更新』ボタンを押します。記述ミスがなかったとしても、キャッシュが原因でブラウザ上に変更が反映されないこともあるので、もし設定内容が変わっていなかったら、キャッシュをクリアします。
私の設定変更は、以下の通りです。

子テーマのスタイルシートの設定変更
子テーマのスタイルシートの設定変更

 

/****** 基本のフォント設定 ******/
body,
button,
input,
select,
textarea {
color: #7d7d7d;/* フォントの色 */
font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, ’メイリオ’, sans-serif;/* フォントの種類 */
font-size: 14px;/* フォントサイズ */
font-weight: 300;/*フォントの太さx*/
line-height: 1.6;/*行の高さ*/
}

記事本文に関わるフォントの設定内容の意味は、図のなかのコメントとして、/* フォントの色*/ といったように表示しています。
私は黒よりも、グレー寄りの色に変えました。サイズや行の高さなどは、自分で数値を変えて、バランス良く調整します。
このフォントファミリーの指定順は、Macユーザーへの思いやり込みのWindows環境の一例です(*^_^*)。

②確認作業

書体やフォントサイズなど、設定箇所が変更されました。私の環境ですが、左側がもともと表示されていたMS Pゴシック、右側が新たに適用されたメイリオです。

元フォント(MS Pゴシックと設定変更後(メイリオ)
元フォント(MS Pゴシックと設定変更後(メイリオ)

 

色や大きさといった項目は分かるけど、フォントの種類が、どうして、もともとMS Pゴシックだったのか、どうしてメイリオが適用されたのかとか、Macユーザーへの思いやりとは何なのかとか、理由を知りたいという方もいらっしゃると思います。もちろん、フォントファミリーの指定にも、規則性があります。ただ、長くなりますので、今回はここまで、続きは次回にしたいと思います。

それでは、また、お会いできることを願って。