WordPress ではエンターキーを押すと「
」と表示され行間が広がります。
でも「
」を使うことにより、見出し「h2」「h3」の前後が空きすぎてしまったり、狭すぎたりする場合があります。
「
」の本来の目的は「改行禁止」なので「改行させたくない」シーンで用いられます。
ノーブレークスペースとは
英語などわかち書きをする言語において、文の途中で改行(行の折り返し)をする場合は単語と単語の間(スペース)で行う。テキスト処理ソフトは、スペースがある箇所はどこでも自動的な改行をしても良いものとみなすが、ノーブレークスペースはこれを防ぐ。Wikipedia
いい加減に「margin」で設定してみました。
marginで余白を設定
似たようなもので「padding」がありますが、違いはこんな感じになります。
書き方【1】
marginの後に数値を入れていきます。左から時計回りに「上 右 下 左」になります。
margin: 10px 5px 10px 5px;
書き方【2】
個別に指定していきます。top(上)、right(右)bottom(下)、left(左)。
margin-top: 30px;
margin-right: 5px;
margin-bottom: 20px;
margin-left: 5px;
CSS(見出しの例)
数値は元々設定してあるフォントや文字のサイズ、行の高さ(line-height)などによって、人によってかなり違いが出てきます。
.article h2 { font-size: 30px; padding: 30px 10px 30px 10px; margin: 70px 0px 35px 0px; background-color: #F5DA81; }
を削除
全て手作業で消すのは大変なのでプラグインの力を借りました。
◆プラグインSearch Regexは文章を一括で置き換えることができて便利
バックアップをとってから文字を置き換えます。
検索の欄に「
」と入力し「削除」を選択したら「検索」をクリック。
なんと全部で11,535もの「
」を使っていました。
ざっと確認したら「すべて置換」をクリックすると全て削除されます。
後書き
改行をしたい時は基本的に<p></p>
タグの他に<br>
を使います。
それでも上手くいかない場合は、当記事のように「margin」で余白を作ると良いです。
HTML の量も減ったし、記事を作成している最中に余白を気にしなくて良くなったのでやって良かったです。