あーりーです。
WordPress（ワードプレス）でブログを書いています。
WordPressではテーマを選ぶことができます。
テーマとは、ブログデザインのテンプレートのようなものです。
ぼくはSimplicity2というテーマを使っています。
これまでにいくつか、Simplicity2に関する記事を書いてきました。
こんな感じで↓
WordPressテーマをSimplicity2にした理由
WordPressの無料テーマSimplicity2の使い方
Simplicity2でアイキャッチを設定する
Simplicity2でブログタイトルを画像にする
Simplicity2 吹き出しの表示方法と注意点
今回もSimplicity2のことです。
ちょっとしたカスタマイズについて。
ブログを見やすくするために
今回のカスタマイズは、ブログを見やすくするためのものです。
なお、カスタマイズは自己責任でお願いいたします。
見出しの上に空白をつくる方法
ブログには「見出し」があります。
その見出しの上に空白を作る方法です。
※テーマはSimplicity2です。
ちなみに見出しとはどれのことかと言うと…
見出しとはコレのこと
↑これのことです。
ブログの本文中にある、このちょっとしたタイトルみたいなものが見出しです。
いろいろなブログで、
見出しの上に空白を作ると見やすくてイイよ～
と言われています。
それで、ぼくも自分のブログの見出しの上に空白を作ることにしました。
空白はどうすれば作れるのか
見出しの上に空白を作るには、どうすればいいのか。
２つ方法があります。
ひとつは、改行を入れて空白をつくる方法。
もう一つは、スタイルシートをいじって空白を作る方法。
ここでは、スタイルシートをいじる方法をメモしておきます。
スタイルシートを表示する
スタイルシートをいじるには、まずそのスタイルシートを画面に表示させる必要があります。
どうやって表示させればいいのか。
以下の手順です。
手順
１．WordPressの管理画面を開く
２．画面左にあるメニューの「外観」
３．「テーマの編集」
４．スタイルシート (style.css)をクリック
スタイルシートに文字を追加
これで画面にスタイルシートが表示されました。
あとは、このスタイルシートの下のほうの余白に、文字を追加します。
ぼくが追加したのは、こんな文字です。
.article h2 {
border-left: 4px solid #222222;
margin-top: 90px;/* 見出し上の空白*/
margin-bottom: 20px;/* 見出し下の空白*/
}
margin-topが見出し上の空白を意味する
margin-topという項目があります。
上の例では９０に設定されています。
これが見出しの上の空白です。
この数値が大きいほど、見出しの上の空白は広くなります。
小さいほど、狭くなります。
ここの数値はある程度大きくしておいて、見出しの上に空白をつくっておいたほうが、文章が見やすいと言われています。
コードを貼りつけたらファイルを更新
上のコードをスタイルシートの下のほうにある空いてる部分に貼りつけたら…
「ファイルを更新」をクリックします。
これで適用されます。
そのほかの文字の意味
せっかくなので上のコードのその他の部分の意味も書いておきます。
h2は見出しを意味する
h2は「見出しに関する設定ですよ～」という宣言のようなものです。
１行目にこれがあるので、その下は見出しに関するいろいろな設定ということになります。
border-leftは見出し左の線の太さ
border-leftは、見出しの左横に表示される線の太さです。
上の例では４です。
この数値を大きくすると、線が太くなります。
小さくすると、線が細くなります。
margin-bottomは見出し下の空白を意味する
margin-bottomは、見出しの下の空白の広さです。
上の例では２０です。
ここの数値はあまり大きくしないほうが、ブログが見やすいそうです。
まとめ
以上～。
一番書きたかったのは、見出しの上に空白を作る方法です。
見出しの上に空白ができると、見出しごとの文章のまとまりがハッキリして読みやすいですね。
こうしてちょっとしたカスタマイズができると、自分のブログへの愛着もちょっぴりアップします。
おしまい
覚えたての吹き出しを無理やり使ってみましたよ。（達成感）
