SWELLで見出しのスペース余白を一括変更する方法

こんにちは、ぴよこです。

私はSWELLのテーマを使っているのですが、「もうちょっと見出しの下のスペースを狭くしたいな」と常々思っていました。

調べてみたところ、テーマ設定で変更できないようだったので、CSSをカスタマイズして修正しました。

CSSを変更するには、webサイト制作の知識が必要になるので、やりたくても出来ない人は多いんじゃないでしょうか?

そんな人に向けて、この記事では、「SWELLでCSSを使って見出しの余白を変更する方法」をシェアしたいと思います。

目次

Google Chromeを使用する

この作業には、Google Chromeのブラウザを利用します。

Chrome使ってないよという人は、あると便利なので、この機会に是非インストールしてみて下さい。サイトデザインを変更する時によく使います。

変更したい見出しを選択する

SWELLの見出し行間の変更方法

修正したい見出しを、クリックしながら文字をなぞって選択状態にし、右クリックを押します。(上の図では色が変わってないけど、選択できていれば色が変わります。)

項目の中から、検証を選択します。

デベロッパーツールを表示して、該当コードを探す

SWELLの見出し行間の変更方法

すると、デベロッパーツールが下の方に出現します。表示されているのは、ページのソースコード。

hは、見出しを表すので、赤枠で囲った<h3 class=”wp-block-heading” 〜の部分を選択します。

この選択した部分がHTMLで、ページを構成する要素です。このHTMLをレイアウトして、装飾するのが右側に表示されているCSSになります。

CSSコードをコピーする

SWELLの見出し行間の変更方法CSSのコピー

該当するHTMLコードを選択すると、右下の方に以下のCSSソースコードが表示されます。<h3 class=”wp-block-heading” 〜の見出しを装飾するCSSコードには、h3の文字が必ず含まれています。

なんとこのコード、クリックすると編集できるのです。(ページ更新すると元に戻る)私はいつもこの画面で編集して、見た目をチェックしてから、本当の(?)CSSに書くという風にしています。

このコードを、選択してコピーします。コピーはctrl(またはcmd)+Cでコピーできます。

wordpressの追加CSSに貼り付ける

wordpressの管理画面

wordpressにログインし、外観→カスタマイズをクリック。

wordpressのカスタマイズ画面

すると、カスタマイズメニューが表示されるので、一番下の追加CSSを選択します。

wordpressのカスタマイズ追加CSS画面

追加CSSに、先ほどのコードを貼り付けます。ctrl(またはcmd)+Vで貼り付けができます。

marginは「余白」のことで、上の設定だと、見出し上部分の余白は3em、左右が0、下部分が1emとなります↓

margin: 上 左右 下;

この下の「余白」を変更し、詰めました。emは、1.2など、小数点も使えるので細かく調整できます。

CSS変更後の見た目

ビフォーアフターは以下の様になりました↓

<Befor>

見出し変更前

<After>

間延びした間が詰まってちょうどいい感じになりました!

注意点は、「投稿を編集」の画面で見ても変わらないので、必ずプレビュー画面でデザインの確認をすること。

これで、毎回段落ごとに余白を変更する必要がなくなりました。毎回面倒だなと思っていたので、かなり楽です。もちろん、h3の見出し以外でも同じように変更できるので、試してみて下さい。

それでは、一緒に頑張りましょう!チャオ!

↓この記事がちょっとでも良いと思ったら、ぜひポチッとお願いします^^↓

ブログランキング・にほんブログ村へ 人気ブログランキング
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

未経験から在宅のフリーwebデザイナー歴5年→アフィリエイター歴6年くらい(1年目数万円→2年目→300万ちょっと→3年目目以降600万〜800万)→3年ブランクを経て再びブログに挑戦中。主婦ブロガー。
デザイナー時代から在宅で仕事をしてきた為、もう外で働けない人。
家にいながらお金を稼ぐ方法を、四六時中考えています。

コメント

コメントする

目次