パソコンのプログラミングをまともに勉強したことがありませんので、ソースコードなんかチンプンカンプン。
というわけで、これまでサイトのカスタマイズはあまりしてきませんでした。ていうか、やり方が分からない場合が多いんですけどね。
かねがねカスタマイズしまくりの達人のワードプレス・サイトを見てきて不思議に思うのは、バージョンアップで最新版に更新したら、上書きされてせっかくのカスタマイズ内容が消えてしまうことがあるはずなんだけど、どういうふうにしているのだろうということです。更新前にカスタマイズした分をどこかにコピーしておいて、更新後にまたその内容をペーストするなりして入れ直すのは面倒くさそうですし。
ある時、検索していて、その解決策が見つかりました。
「子テーマ」を作り、カスタマイズする時はそれを書き換えるようにすれば、「親テーマ」をそのまんまにしていても、変更がサイトに反映されるのです。そしてバージョンアップにより「親テーマ」が変化しても、「子テーマ」はカスタマイズした状態を保つので、安心して最新版に更新できるというわけです。
で、我がサイトにも子テーマを作り、それをいじって、前々から調整したいと思っていたことをやってみることにしました。
子テーマを有効化したら、どういうわけか、ヘッダーはデフォルトの画像になるし、タイトルの文字は黒文字になるし、背景の色も変わるし、各ブログの右上の、コメント数を表示する漫画の吹き出しみたいな欄が四角形の欄になるし、理由がよく分からない変化がありました。とりあえずダッシュボードで直せるところは直しました。背景の色は気分転換で以前と違うものにしました。コメント数欄の変更方法は分かりませんでした。
そうそう、ヘッダー上部の余白も随分小さくしました。
そんなことはさておき、変えてみたかったことは、記事の左右の余白（広過ぎると思います）と、テーブル（表組み）のセルの余白（上下の隙間がやや大きい）です。
記事の左右の余白を狭くすることは結局できませんでした。
テーブルのセルの余白調整には成功しました。
子テーマにコピペしたソースコードを次のように変えました。
.entry-content td,
.comment-content td {
border-top: 1px solid #ddd;
padding: 6px 10px 6px 0; ← 一番右の 0 は 0px ではないのですね。
↓ ↓ ↓
.entry-content td,
.comment-content td {
border: 1px solid #ddd;
padding: 1px 2px 1px 3px;
paddingはセルの内側の余白で、「padding:」の右の4つの数字は左から順に上、右、下、左のようです。
「border-top」を「border」にすることにより、テーブルのみでは表示されなかった縦線が表示されるようにもなりました。今までは縦線を入れる時には、「セルのプロパティ」で枠線の色を指定していました。
ビジュアルエディタのプラグインは「TinyMCE Advanced」を使っているのですが、セルの高さが、数値をどういじっても変化しないので（高くなるように変化させることはできましたが）、半ばあきらめていたところでした。
もとの設定をいじるのは怖いことですが、子テーマのおかげで、思い切った変更ができるようになって良かったです。
最後に、参考にさせていただいたサイトのページを以下に挙げておきます。まことにありがとうございました。本当はもっとたくさんのサイトを閲覧したのですが、あちこち訪れ過ぎて、どこに何が載っていたのか分からなくなってしまいました。
【重要】WordPressテンプレートのカスタマイズ前に・・・子テーマをつくってのカスタマイズ方法 -CSS篇-
TwentyEleven ヘッダータイトル周りの余計な余白部分をなくす
コメントを残す