カテゴリー: WordPressでCSS編集

まだスマホだけ変えるとかその知識がないので、とりあえずパソコン表示に集中しようと思う。

文字の大きさを整えていくが、他人の作ったものだからすべて調整できなくてもいいと考える。
記事本文の見栄えが最優先。
次にトップページとかウィジェット。

クラス指定の例

記事本文は「entry-content p」と指定すればいいだろう。
検索結果は「entry-summary p」かな。

単位は何を使うべきか

色んな情報が入り混じっていてよくわからない。

• pxだと古いIEは大きさ調整できない？
• rem使用でIEで一部バグがある？
  ただし条件が限定的であり、問題ない場合が多いかな？
• オペラはrem非対応？

IEの利用者結構いるみたいだ。
でも不具合が生じる条件は限定的とある。
あとオペラだけどほとんどいなくないか？
あそこ確か中国が買い取ったんじゃなかたっけ。
日本人は使わないだろ。

結論を言うとrem指定を採用しようと思う。
本来従うべきものはCSSの規準であるべきであろう。
emやremを推奨しているようにみえる。

先に述べたように記事本文が是正されさえすればいいのだ。
rem使用に限っては、px指定も保険でいれるという手法がある。
オペラ対策なのでしょうね？
これは記事本文くらいに施せばいいと思う。

.entry-content p {
font-size: 16px;
font-size: 1.6rem;
}

ブラウザだが、やはり時勢にある程度従ったものを使うべきだと思う。
面倒くさいんで以上であります。

remとemの組み合わせ

.entry-content p {
font-size: 1.6rem;
margin-bottom: 1.4em;
}

例えば上のような場合、font-sizeはremでよいとしよう。
margin-bottomのemは、更新されたp要素のfont-sizeを基準にするようだ。
ちなみに、font-sizeとmargin-bottomの並び順は問わない。
この場合のemは親を参照しないということだ？

よくemの説明で親要素を参照するなどと見かけるが、表現が正しくないのかな？
親要素参照はfont-size限定か。
この場合のmarginは、その要素自身の値を参照しているようだ。

文字の大きさの初期化

html {
font-size:62.5%;
}

rem使用にあたって初期設定が必要と思われる。
このようにあらかじめ10pxにあわせておくのが主流だろうか？
16px × 62.5% = 10px

これに関しても注意点があると思う。
html {font-size:10px;}
と初期設定するという記事を見かけたが、たぶんこれは意味が無いのでは？
pxで問題ないのなら、終始pxを使えばいいわけだから。

あとhtmlでなくbodyに指定している記事を見かけたがこれも違うっぽい。
/*
この値をremは参照しない。
body {font-size:62.5%;}
*/

編集途中

基礎知識

記事を見やすくするテクニックの一つ。
line-heigt

この記事の主役。
marginの相殺に関しても少し触れている。
margin

記事の上部を整える

1. 記事タイトル。
2. 投稿者名などheader情報。
3. 記事本文。

このような順に並んでいるとして、2と3の間のmarginを考える。
当然に一定値でなければならないが、headerの方でmargin調整するようにした。

記事本文のmargin-topは0にしたい。
marginの相殺という性質はあるが、明示的に0指定した方がいいだろう。
記事の最上部にいずれの要素が来るかは不明だ。
その場合でも次のプロパティを使用することで解決できる。
first-child

記事主文のmargin

記事本文の主な構成は、p要素およびH系要素であろう。
H系要素は、H2のみを使用すると仮定する。

pやH2など主文のmarginだが、横方向は0でよいとして縦をどうするかである。
例外的にpre・imgなどを使用する場合もあり、その時でも一定marginをとりたい。
主文のmarginが0指定だと崩れる可能性が高い。

pの上下と、H2の下は、同数値とることにした。
H2のmargin-topに限って広めにとることで、段落にメリハリが出るだろう。

単位だが、remをベースにしたらいいと思う。
クラス指定は次のような感じだ。

.entry-content  p {～}

カテゴリー表示で子カテゴリーありだと、配置崩れがひどいので修正。

前提

• テーマ「Sparkling」でのみ確認。
• Chromeでのみ確認。
• 子カテゴリーまでという状態で確認。

ウイジェットのクラス指定

ウィジェットのスタイルは統一したい。
サイドバー以外に、記事の下にウィジェットが配置するパターンもあるのだ。
結論だけ言うと、当テーマではwidgetクラスを使う。
LIの場合は次のように指定する。ULは省略しないほうがいいだろう。

.widget ul li {～}

行間はLIで設定

LIタグの基本値を先に決める。
margin-bottomは0にすべきだ。
入れ子構造により二重に取り、下が広くなりすぎるため。

• margin-topで行間を調整した。他marginは0とした。
• paddingは0とした。

子カテゴリーのズレはULで設定

子カテゴリーの配置は、右にずらさねばならない。
UL（親のpadding）で調整か、LI（子のmargin）で調整のいずれかだが。

今回はULで調整した。
LIで何回も計算させるよりスマートなはず、と仮定した。
現時点では問題ないようにみえる。

• padding-leftで横ズレを調整した。他paddingは0とした。
• marginは0とした。

全体のバランス

見栄えをよくするためには、全体を見る必要がある。
margin-topのみ設定するということで、上が空きすぎたとする。
その場合、上に位置する要素にもmarginかpaddigが設定されているはずで、そちらでスタイル調整する。