ワードプレスで記事を書いていて、改行をしても、記事にはスペースとしては反映されないということはなかったでしょうか？

ワードプレスの５系以降になりますが、ビジュアルエディタが標準で導入されているので、html,cssがわからなくても、スペースを差し込めるようになっています。

紛らわしくて申し訳ございませんが、ここでいうスペースとは半角スペースや全角スペースのことではなく、

「ここに、これだけの何も書いていない高さをとりたい」

という場合のスペース、すなわちスペーサーのことになります。

※また、このページに挿入している画像はパソコンで見た場合の画面になります。

スペースを入れたい直下のブロックを選択する

まずは、対象の記事やページを編集できる状態にしてください。

固定ページであれば、
「固定ページ」→「固定ページ一覧」

投稿であれば、
「投稿」→「投稿一覧」

対象のページで「編集」を選んでいただき、編集画面に入ったら、スペースを入れたい直下のブロックにカーソルを合わせてください。

ブロックとは、見出しや記事のひとくくりの単位になります。

カーソルを合わせると、上記のように、プラスマークとブロックの追加という黒い吹き出しが出てきます。

スペースを挿入する

それではいよいよ実際にスペースを挿入します。

先ほどのプラスボタンを押してください。
押すと左(上記)のようなポップアップが出てきますので、ブロックの検索で「スペーサー」と入力してください。

スペーサーのアイコンが出てきますので、選択してください。

これで上部にスペーサーが挿入されました。

スペースの幅を調整する

挿入しただけでは、幅が大きすぎると思いますので、調整をします。

スペーサーの下部中央に丸い青があると思いますので、そこにカーソルを近づけ、カーソルが変形するころまで持って行ってください。

カーソルが変形すると、上下させることで、スペーサーの幅が変わります。

ページを保存する

スペーサーの幅の調整が終わりましたら、ページを更新します。

画面右上に青い更新ボタンがありますので、押してください。

以上で、作業は完了です。

実際のページも見て、スペースが入っているか確認をしてください。

お疲れ様でした。

おまけ ソースコードでスペースを入れる場合

以下は、htmlやcssといったソースコードにてスペースを入れる方法です。

必要がない場合は読んで頂かなくて構いません。

スタイルを直接記述

cssをhtmlタグに直接記述する場合はstyleを使います。

「カスタムHTML」のブロックを挿入し、以下のように記述します。

<div style="height:50px;"></div>

上記のようにdivタグに直接styleを記述しています。

とりあえずここだけにスペースを入れたいという場合は直接書いてしまってもいいかもしれません。

heightは高さをとります。

高さだけとって<div>の中には何も記述されていないので、結果として指定した分スペースがとられる形になります。

クラス化する

上記のように直接styleをタグに記述すると、今度は他の場所も同様にスペースを入れていく場合に、何度も同じことを記述する必要が出てきて効率的ではありません。

あとで変更したい場合も、全ての箇所の記述を変更していくことになり、大変手間がかかってしまいます。

そうならないように、外部にクラス化してしまうと記述が冗長になりません。

ワードプレスの場合、以下に記述する場所が設けられています。

左メニューより「外観」→「カスタマイズ」を選択します。

画面が開いたら、「追加CSS」を選択します。

記述スペースが出てくると思いますので、以下のようにクラスを作成します。

.spece_middle {
  height:50px;
}

「.」ドットはクラスを表します。

ここにはありませんが、「#」シャープはidを表します。

クラスにはデザインや見た目を変える場合に使用し、idはタグの名前付けなど、そのタグを指定したい場合に使用します。

上記のようにクラス化しておけば、先ほどのスペース設定場所のタグには以下のように記述できます。

<div class="space_middle"></div>

このように記述すれば、あとで高さを全て25pxに変更したいという場合も、１箇所変更すれば全て変わるようになります。

上記のように、複数箇所で使用するものはクラス化するなどして共通化すると効率よくホームページ制作できるようになります。

マージンで入れる場合

さらに考えを進めると、class=”space_middle”と書いていくことも面倒です。

共通部分に書いてあげるだけで全ての箇所を変える方法があります。

marginという記述を使用します。

例えば、h2見出しの下は共通してスペースをとりたいという場合に使えます。

h2の下部に50pxのスペースをとりたい場合は以下のように記述します。

h2 {
	margin: 0 0 50px 0;
}

ホームページの全てのh2見出しの下に50pxのスペースがとられるようになります。

marginですが、右側の数字の続きは以下のような規則があります。

margin: 5px;上下左右全て5px
margin: 5px 10px;[上下]5px [左右]10px
margin: 5px 10px 8px;[上]5px [左右]10px [下]8px
margin:5px 8px 10px 2px;[上]5px [右]8px [下]10px [左]2px

理屈ではなく、丸暗記してしまうとお仕事もスムーズになります。

マージンが４つの時は、上から時計回りに「上」「右」「下」「左」です。

マージンが３つの時も、上から時計回りに「上」「右+左」「下」です。