PART1コンテンツエリアの見ばえを良くする前回までのカスタマイズをもとに、これから文字設定や修飾を用いて図のようにコンテンツエリアの見栄えをよくしていきたいと思います。コンテンツエリアの変更プランは以下の通り。変更4:タイトルの設定変更と修飾スタイルシートやphpの編集が必要ですが、今回から数回に渡り、図をたくさん入れて、丁寧にお話していきます。〔テーマの編集〕がしやすくなるプラグイン先日のブログでお話したのですが、うっかりでも、スタイルシートやPHPを、NOTEPADで上書きしたくありません。ファイルの中身を確認するだけでも、BOMなしUTF-8に対応したテキストエディタか、管理画面の〔外観〕-〔テーマの編集〕を使うようにします。PHPやスタイルシートを編集するのに向いたテキストエディタは、数多くのフリーウェアがありますから、ネット上で検索して、好みのものを使えばいいと思いますが、〔テーマの編集〕で作業したい場合、行数表示や入力支援機能を持つプラグインを使うと便利です。これからスタイルシートの編集が続くので、ここで、1つプラグインを、ご紹介しておくことにしました。Editor』を利用しています。背景も10種類から選べますし、検索機能や、設定値の色表示、コメントの記号挿入などの機能もありますし、横に行数も表示されるので、こうしたプラグインを利用すると、スタイルシートやPHPが編集しやすくなると思います。」と入力してクリックすると、『今すぐインストール』をクリックできる画面になります。インストール後は有効化してください。プラグインのインストールフォントの設定を変更するそれでは、カスタマイズをはじめます。管理画面の〔外観〕-〔テーマの編集〕をクリックします。親フォルダのスタイルシートを確認したいので、〔編集するテーマを選択〕から、親テーマのフォルダにし、「選択」ボタンをクリックします。目下のところ、スイタイルシートとfunction.phpは、親テーマと同一内容のファイルではありませんね。親テーマに記述されている内容を、そのまま編集したほうが良いものは、親テーマからファイルの内容も含めてコピーしていますし、内容ごとコピーすると編集しにくい、コピーするのがマズいファイルは、子テーマ用に別途、空のファイルを作成して、編集しています。フォントの種類やサイズといったサイトのスタイルを指定しているのは、スタイルシートです。子テーマ側のスタイルシートで、とくに設定を指定しない場合は、親テーマのスタイルシートに記述された内容が、子テーマのスタイルにも反映されています。親テーマのスタイルシート親テーマのスタイルシート100行近辺に、記事のタイトルや本文などに関わるフォント設定箇所があります。この要素や属性・値を子テーマのスタイルシートにコピペして、値を変更すれば、本文記事などに関わるフォントの基本設定が変更できるのです。親テーマの設定そのままで良いものは、子テーマのスタイルシートに記述する必要はありませんが、あとで見直したときに違いを比べやすいよう、ここでは、すべての設定を変えてみます。補足もし、〔テーマの編集〕から、親テーマのスタイルシートを閲覧していて、不慮の操作が加わってしまったとしても、画面下の『ファイルを更新』をクリックしなければ、内容は保存されません。『ファイルを更新』ボタンを押さないように注意して、他のメニューでもクリックして戻ってくれば、オリジナルの状態のままのスタイルシートを再び閲覧することが可能です。心配なら、バックアップでコピーをとっておくと良いでしょう。ファイル1つ1つ取るのも面倒ですから、親テーマのフォルダ、まるまるオリジナルを保存しておけば、いつでもオリジナルに復元できます。1子テーマのスタイルシートに該当部分を記述するまずは、親テーマと同じ記述を、子テーマのスタイルシートに記述します。自分が設定したい内容に修正し、最後に『ファイルの更新』ボタンを押します。記述ミスがなかったとしても、キャッシュが原因でブラウザ上に変更が反映されないこともあるので、もし設定内容が変わっていなかったら、キャッシュをクリアします。私の設定変更は、以下の通りです。いったように表示しています。私は黒よりも、グレー寄りの色に変えました。サイズや行の高さなどは、自分で数値を変えて、バランス良く調整します。このフォントファミリーの指定順は、Macユーザーへの思いやり込みのWindows環境の一例です(*^_^*)。書体やフォントサイズなど、設定箇所が変更されました。Pゴシック、右側が新たに適用されたメイリオです。Pゴシックだったのか、どうしてメイリオが適用されたのかとか、Macユーザーへの思いやりとは何なのかとか、理由を知りたいという方もいらっしゃると思います。フォントファミリーの指定にも、規則性があります。長くなりますので、今回はここまで、続きは次回にしたいと思います。それでは、また、お会いできることを願って。『BIOS/UEFI(EFI)』って何だ?関連コンテンツよろしくお願いします(*^_^*)訪問ありがとうございます。