今回は、記事の中程にある見出しをデザインされたものに変更します。
見出しは、文のまとまりを区切る役目を果たしますので、読みやすくなります。
見出しの変更をする前にやっておくべきなのが、<h2>と<h3>タグの変更です。
見出しには、h2、h3という文の重要度を示すタグという命令方式が使われます。
さくらブログのテンプレートは、h2とh3の指定が好ましい形では無いので、この見出し変更作業をする前に下記「<h2>と<h3>タグ変更」をされる方が良いと思います。
「さくらブログの<h2>と<h3>タグ変更方法」のタグの入れ替えが終わっているものとして記載しています。
「さくらブログの<h2>と<h3>タグ変更方法」を終えると下記のようになります。
・元タグ設定
<h1>→ブログのタイトル
<h2>→日付
<h3>→記事タイトル
・タグ変更後
<h1>→ブログのタイトル
<h2>→記事タイトル
<h3>→見出し
上記のタグ変更をやっていない方は、この記事内の<h3>を<h2>に読み変えて見てください。
見出しのデザインを変更するには、CSSを使用します。
見出しは、h3タグなので記事で<h3>指定すれば自動的に見出しのデザインが変わるようにしていきます。
さくらブログの【デザイン】→【デザイン設定】→適応チェックされているテーマタイトルをクリックします。
CSSが表示されます。
下記を、CSSの一番下に追加してください。
/* ▼-----<h3>中見出しデザイン変更-----▼ */
h3 {
padding: 4px 10px;
color: #111;
background-color: #CBCBCB;
border-left: 8px solid #019AFA;
border-bottom: 1px solid #4B4B4B;
}
/* ▲-----<h3>中見出しデザイン変更、ここまで-----▲ */追記できたら、下の【保存】ボタンを押してください。
これで、中見出し用の<h3>タグの設定が出来ました。
因みに、この見出しデザインは、このブログで使用されているものではありません。
実際に中見出しh3タグを使ってみよう！
記事内に見出しを付けます。
まずは、いつも通りに記事を書きます。
見出しにしたい言葉を記事文章の間に差し込みます。
今回は、「サポートに関する評判」という見出しを付けたとして説明します。
記事の中に「サポートに関する評判」という文字を入れて記事を書いてください。
記事を書く際に表示される画面で、右上にある【< >通常エディター】ボタンのが表示される状態にしてください。
もし、【< >通常エディター】ボタンになっていない場合は、右上のボタンが【< >リッチテキスト】となっているはずなので、クリックして【< >通常エディター】ボタンの状態にしてください。
右上のボタンが【< >通常エディター】になっていると、その下に細かいボタン群が表示されます。
その中に【< >】こういう形のボタンが出ていると思います。
【< >】ボタンにカーソルを乗せると「ソースコード」という文字が表示されます。
【< >】ソースコードボタンを押してください。
記事のソースコードがウインドーで表示されます。
<div>サポートに関する評判</div>
先ほど書いた記事の中に見出しにするつもりの「サポートに関する評判」という部分が、上記のようになっていると思います。
文字の頭と尻についているタグを下記のように書き換えます。
<div>サポートに関する評判</div> ↓上記を下記のように変更します
<h3>サポートに関する評判</h3>変更したら下にある【OK】ボタンを押してください。
【OK】を押してもセーブはされていませんので、注意してください。
書いてる途中の記事本文を見ると、少し文字が大きくなっただけ見えるはずです。
画面下の【プレビュー】をして記事ページを確認してみてください。
プレビューするとデザインされた見出しになっていると思います。
問題無ければ、【保存】ボタンを押してセーブしておきましょう。
見出しデザインを探す
「ブログ 見出し」などで、検索をすれば色々なデザインの見出しを紹介しているサイトがあります。
殆どがサンプルコード付きなので、気に入ったデザインのコードをコピペで使用可能です。
h3 {
この部分にコピペすべし！
}上記のように{ }の間に好きなデザインの見出しコードを貼ってやれば、そのまま使えます。
この<h3>タグの見出しの下に<h4>タグ、<h5>タグをCSSに追加すれば、色々なデザインの見出しを付ける事が出来ます。
好きなデザインの見出しを作ってください。
