※当サイトでは、アフィリエイト広告を利用させていただいております。
こんにちは、ハヤです。
今回は【ブログテーマ「SWELL」の文字の余白を空ける方法】を記録します。
筆者のブログ状況を簡単に紹介します。
・WordPress歴4年目
・使用テーマはSWELLを使用しています。
・cocoon歴約3年、SWELL歴1か月
それではどうぞ。
文字の間隔を空ける方法
▼やること
※今回は記事全体に反映させるために外観＞カスタマイズ＞追加ＣＳＳで入力します。
もう少し詳細を紹介していきます。
入力方法（このパートで完結）
➀追加CSSのページを開く
ダッシュボード「外観」>「カスタマイズ」→赤枠「追加CSS」を選択
➁「追加CSS」のページを開き、以下のCSSを入力します。
/* 投稿記事の余白 */
.post_content > * {
margin-bottom: 4em;
}
※赤文字の4emについて数字を変えれば、幅調整ができます。
追加CSSに上記のコードが入力できれば完了です。
➂文字幅が変わっているか確認
CSS入力前
SWELLテーマの間隔になります。
CSS入力後（今回ゴール）
※上記、緑文字の4emの数字を変えれば、幅を調整することができます。
私はある程度余白が欲しかったので4emにしています。
ここはお好みで調整してみてください。
emとは、文字の大きさをものさしにした単位です。
1emと書くと、その文字1つ分の高さと同じ大きさになります。
だから余白に1emを指定すると、文字1つ分の高さぶんの空きができます。
文字サイズによって余白サイズは変わります。
今回の4emで言えば、4文字分のスペースを空けることができます。
文字を間隔を空けたかった理由
私は最初の3年間ほどブログテーマ「Cocoon」を使い、クラシックエディターで記事を書いていました。
その後、投資資金に余裕ができたことをきっかけに、ブログを本格的に改善しようと思い、迷った末に「SWELL」を選びテーマ変更しました。
ただ、実際に使ってみると「Cocoon」とは操作感が大きく異なり、慣れるまで時間がかかりました。慣れるために丸2日かかりました。
また、クラシックエディターからブロックエディターに切り替えたことで、空白や段落の間隔が狭く感じるようになりました。その違和感から、意識して文字間隔を空けようと決めました。
↓過去にまとめた「段落と改行」についての記事もあります。よかったらご覧ください。
SWELLメモ（備忘録）
・1回改行しても自動的に幅を詰められる使用になっているらしい
・エンターを4回以上連打すれば空白になった
・『ブロックを選択するには［/］を入力』があっても改行扱いにならない
・スペーサーで幅を広げる方法もあったが、毎回入力が面倒
・今回のCSSを入力すると「SWELL」には効果を発揮するが、「cocoon」は間隔がより広くなってしまう。
どちらにしろ「cocoon」側の記事のリライトは必要（時間をかけて）
・編集中の間隔は狭いが、公開した記事は広くなってる
まとめ：SWELLに変えてから1か月ほど
3年間使っていた「Cocoon」から「SWELL」に変更したことで、わからないことがたくさん出てきました。
Cocoon時代は気にせず使っていた改行も、テーマが変わると幅が違い、自分好みに調整したいと思うようになりました。
おそらくブログを始めてすぐの段階なら、SWELLへの移行もスムーズだったかなと思います。
しかし数年続けてからだと、どうしても修正に時間がかかってしまいますね。徐々に操作方法に慣れていきます。
というわけで今回は以上です。
※この記事にはアフィリエイトリンクが含まれており、ご利用していただいた場合に小額の報酬を得ることがあります。
■関連記事
◆達成記事
★よく読まれる記事
