WordPress テーマSimplicity2で見出しの上に空白を作る

シェアする

  • このエントリーをはてなブックマークに追加
PR

あーりーです。

WordPress(ワードプレス)でブログを書いています。

WordPressではテーマを選ぶことができます。

テーマとは、ブログデザインのテンプレートのようなものです。

ぼくはSimplicity2というテーマを使っています。

これまでにいくつか、Simplicity2に関する記事を書いてきました。

こんな感じで↓

WordPressテーマをSimplicity2にした理由
WordPressの無料テーマSimplicity2の使い方
Simplicity2でアイキャッチを設定する
Simplicity2でブログタイトルを画像にする
Simplicity2 吹き出しの表示方法と注意点

今回もSimplicity2のことです。

ちょっとしたカスタマイズについて。

スポンサーリンク

ブログを見やすくするために

今回のカスタマイズは、ブログを見やすくするためのものです。

なお、カスタマイズは自己責任でお願いいたします。

見出しの上に空白をつくる方法

ブログには「見出し」があります。

その見出しの上に空白を作る方法です。

※テーマはSimplicity2です。

ちなみに見出しとはどれのことかと言うと…

見出しとはコレのこと

↑これのことです。

ブログの本文中にある、このちょっとしたタイトルみたいなものが見出しです。

いろいろなブログで、

見出しの上に空白を作ると見やすくてイイよ~

と言われています。

それで、ぼくも自分のブログの見出しの上に空白を作ることにしました。

空白はどうすれば作れるのか

見出しの上に空白を作るには、どうすればいいのか。

2つ方法があります。

ひとつは、改行を入れて空白をつくる方法。

もう一つは、スタイルシートをいじって空白を作る方法。

ここでは、スタイルシートをいじる方法をメモしておきます。

スタイルシートを表示する

スタイルシートをいじるには、まずそのスタイルシートを画面に表示させる必要があります。

どうやって表示させればいいのか。

以下の手順です。

手順

1.WordPressの管理画面を開く

2.画面左にあるメニューの「外観」

3.「テーマの編集」

4.スタイルシート (style.css)をクリック

スタイルシートに文字を追加

これで画面にスタイルシートが表示されました。

あとは、このスタイルシートの下のほうの余白に、文字を追加します。

ぼくが追加したのは、こんな文字です。

.article h2 {
border-left: 4px solid #222222;
margin-top: 90px;/* 見出し上の空白*/
margin-bottom: 20px;/* 見出し下の空白*/
}

margin-topが見出し上の空白を意味する

margin-topという項目があります。

上の例では90に設定されています。

これが見出しの上の空白です。

この数値が大きいほど、見出しの上の空白は広くなります。

小さいほど、狭くなります。

ここの数値はある程度大きくしておいて、見出しの上に空白をつくっておいたほうが、文章が見やすいと言われています。

コードを貼りつけたらファイルを更新

上のコードをスタイルシートの下のほうにある空いてる部分に貼りつけたら…

「ファイルを更新」をクリックします。

これで適用されます。

そのほかの文字の意味

せっかくなので上のコードのその他の部分の意味も書いておきます。

h2は見出しを意味する

h2は「見出しに関する設定ですよ~」という宣言のようなものです。

1行目にこれがあるので、その下は見出しに関するいろいろな設定ということになります。

border-leftは見出し左の線の太さ

border-leftは、見出しの左横に表示される線の太さです。

上の例では4です。

この数値を大きくすると、線が太くなります。

小さくすると、線が細くなります。

margin-bottomは見出し下の空白を意味する

margin-bottomは、見出しの下の空白の広さです。

上の例では20です。

ここの数値はあまり大きくしないほうが、ブログが見やすいそうです。

まとめ

以上~。

一番書きたかったのは、見出しの上に空白を作る方法です。

見出しの上に空白ができると、見出しごとの文章のまとまりがハッキリして読みやすいですね。

こうしてちょっとしたカスタマイズができると、自分のブログへの愛着もちょっぴりアップします。

おしまい

覚えたての吹き出しを無理やり使ってみましたよ。(達成感)

吹き出しの作りかたはこちら

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする