見出し要素

article, aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section {
 display: block;
}

h1 { margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; }
h2 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-weight: bold; }
h3 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; font-weight: bold; }
h4 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; font-weight: bold; }
h5 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; font-weight: bold; }
h6 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; font-weight: bold; }

w3cのスタイルはh4が 1em 、bootstrapはh6が1rem、なので一般的には、p要素と同じサイズで表示されるといった違いがあります。

つまり、ブートストラップの方が、タイトルがでかく表示されるようになります。

Raindropsテーマは、ゴシック体をベースに　英語版のRaindropsは投稿タイトルにセリフ体を使っています。セリフ体を使うかゴシック体を使うかによって、必要なフォントサイズは、大きく変化します。

これは、WEBページを作成する場合にどんなフォントを使うかによって、ベースフォントサイズも変化するという事を示すものです。

ベースフォントサイズを変更する場合、この英語用の2.3emのイレギュラーなフォントサイズを、取り除いて見出し用のフォントサイズのサイズの比率を統一しようと試みましたが、それはなかなか困難でした。

line-height

line-heightは、1.5といった形で、単位をつけずに指定するといいなんてよく言いますよね。Raindropsのデフォルトのベースフォントサイズは13pxですが、最大の20pxまで変化させるとどのような事が起きるのか、

当初は、p　要素のline-heightの事は、全く考えもしなかったことでした。ベースフォントのサイズを大きくすると、間が抜けるのです。

---

補正前

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

---

補正後

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

---

日本語　補正前

　吾輩（わがはい）は猫である。名前はまだ無い。

　どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始（みはじめ）であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶（やかん）だ。その後（ご）猫にもだいぶ逢（あ）ったがこんな片輪（かたわ）には一度も出会（でく）わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙（けむり）を吹く。どうも咽（む）せぽくて実に弱った。これが人間の飲む煙草（たばこ）というものである事はようやくこの頃知った。

---

日本語　補正後

　吾輩（わがはい）は猫である。名前はまだ無い。

　どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始（みはじめ）であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶（やかん）だ。その後（ご）猫にもだいぶ逢（あ）ったがこんな片輪（かたわ）には一度も出会（でく）わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙（けむり）を吹く。どうも咽（む）せぽくて実に弱った。これが人間の飲む煙草（たばこ）というものである事はようやくこの頃知った。

---

英語の場合だと、補正する事で　間延びした感じが修正されるのですが、日本語の場合だと、つまり過ぎる印象で、日本語の場合は補正を行わないことも考えましたが、とりあえず補正して、出荷

この雰囲気がどこから来るのか考えてみると、一文字の中で、黒い部分の面積が日本語だと多いため、ちょっと息苦しく感じるのではないかと、自分なりには考えています。

こんなことをやっている最中、Raindropsのサポートフォーラムに、投稿本文のフォントサイズを変えたいという質問があり、誰かが回答してくれていました。

.entry-content{
 font-size:18px!important;
}

いやいや、importantまではいらないんですけどね

.entry-content{
 font-size:18px;
}

こんなの、、、て思いながら、いや、こんな時だから、と試してみると、結構うまく動く。

ほら、「簡単だよねー」WEBで時々ささやかれる常套句、でも　しばらく経過するといろいろなバランスの問題が生じ始めて、修正が重なる事になるかもしれない。

チョットしたスタイルの変更が、スタイルシートのいたるところで行われると、簡単には、元に戻れない。理由は簡単で、「その時、何が問題でどう変更したのか忘れてしまうから、」そして、その時その時のスタイル指定がこれまでどのような対処だったのかを思い出すより、ぱっと解決方法が浮かんでしまう簡単さが、全体を迷路に迷い込ませてしまう。

このテーマも、そんなことを延々と繰り返してきた。

今回の変更もその繰り返しに過ぎないものなのかもしれないが、アイディアを、ジリジリ進めてみる。「筋が悪かったら、いつでも戻すから、なんて　自分に言いながら、」

新着記事