とある Web サイトを Wordpress で構築している。インストールが小生の担当で、実際のコンテンツは別の担当に任せてはいるのだが、小生も勉強のため少しいじってみている。
テーマは Twenty Sixteen ベースにカスタマイズしている。といっても、Wordpress のダッシュボードにおけるテーマのカスタマイズ項目は少なく、個人的に余りいい感じに調整できない感があった。そこで、もう少しメニュー項目を見ていると、CSS ファイルを直接いじれる事がわかった。とかいいつつ、小生、CSS のことは余りわかっていない。
要望としては、ウィジェットの文字が小さすぎるのと、全体の周りに付く背景のボーダーの幅が太いのを、なんとかしたい。
そこで使えるツールが、Chrome のデベロッパーツールだ。まずは、いじりたいページを表示しておいて、Windows だと F12 かメニューから選んでこのモードに入ると、そのページの要素を確認できる表示が出る。その左上にボタンがあって、それを押した後、表示したページの、調べたい要素をクリックすると、その要素に関する色々な情報が出てくる。
とりあえず、ボーダーをクリックしたり、ウィジェットの文字をクリックすると、「Styles」の所に、現在設定されている色々な属性が表示される。その中で、関係しそうな数字を、その場で書き換えてみる。数字を一度クリックして編集状態にしてから、文字を書き換える。すると、リアルタイムでページの表示も変わるので、それが所望のパラメータ化がわかる。
よく見ると、どのファイル(style.css とか)の何行目でそれが設定されているかもでているので、Wordpress のダッシュボードの外観のテーマの編集画面で、style.css の該当行付近で数値が設定されている所を見つけて、書き換えて、「ファイルを更新」する。
できたっ、と Chrome でそのページをリロード（再読込み）しても反映されず。最初、なぜ？と悩んだが、キャッシュの関係らしい。Ctrl+F5 で、スーパーリロードしたら、style.css も再読込されるらしく、変更点が反映されてページが表示された。
文字や幅の大きさは、CSS の知識が無くても、こうやって簡単に変更できる。CSS を覚えると、フォントや文字の装飾なんかも自由にいじれるようになるらしい。マウスオーバー時の反応とかちょっと変えたい所もあるので、少し勉強してみるかな。
ちなみに、テーマはコピーしてそれを編集するのがいいらしいが、面倒で直接編集してしまった。まぁいいか。
