すたすた式
Vaster2
追記：line-height の記入場所について新しい記事を書きました。他のやり方がわかったので、このページの .widget に記入するやり方は不要になります。
[Vaster2] 「記事本文の行間をあける」 line-height の記入場所 | すたすた式
Vaster2「記事本文の行間をあける 」line-height の記入場所です。
CSSで line-heightを設定すれば、行間を調整出来るということはわかりましたが、一体どこに設定すればいいかわかりませんでした。
やっぱり body{ のところかな？とか、記事のフォントと書いてある .main-outer p{ のところ？、記事ページの .main-outer{ のところと手当たり次第に記述しましたが一向に変わりませんでした。
しばらく運用して分かったこと。
.widget に追加すると、記事本文のほかに記事タイトル、関連記事の文章も影響を受けます。
ただ、あまり広げすぎなければ問題はないとも思います。
もし影響をを受けるのが嫌でしたら、こちらの方法がいいと思います。 Bloggerのテンプレート「Vaster」をカスタマイズ①、記事の文字や行間を設定しよう。|Never Enough
また、文章などが Pタグ <p>~</> で囲われていれば .main-outer p { のところの line-height が効くようです。
結論から言えば、.widgetのところに記述したら出来ました。
素人なので、このやり方でいいのかはわかりませんが、希望通り行間が広くなったので良しとしました。
HTMLを編集します。必ずバックアップを取ってから作業してください。
Boggerのテーマ==>HTMLの編集
コードが書いてあるボックス内を一度クリックしたあとCtrl + F で.widget を検索
margin:initial;の下に line-height:1.7; を追加、（数字は好みで調整して下さい）※1.7から2.0くらいで悩んでいます。
これで、記事本文の行間が広くなります。
chromeの検証機能を使ってみました。
記事を表示して、行間を広げたい文章をマウスでドラッグ、右クリック、検証をクリック。
.widgetのところにline-height:1.4;を発見
line-heightの数字のところをクリックすると、数字を変更できるようになり、その場で見た目の変化を確認できるし、ここではないかと思いました。
いろいろ大変でしたが、結果オーライです。
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿