この記事ではメインサイトの「アメブロメーカー」で配布している見出し素材や、このアメブロの見出し素材を、カスタマイズする方法を紹介します。
なお、見出しの作り方・設置方法・注意点は👇の記事で解説しています。当ブログの見出し素材をはじめて使う人は確認して下さいね。
見出しの色を変更
色は「#1234ab」のように半角の「#6桁の英数字」のコードで表現されます。
まずは使いたい色を決めて、コードを探しましょう。👇のサイトなどが便利です。
色コードが決まったら、見出しのHTMLコードを一部書き換えます。
見出し線の色を変える
例えば下記の枠線見出しの場合
<h2 style="border: 3px solid #fca60d; padding: 0.5em 0.7em;">見出しのテキスト</h2> <p> </p>
「border: 3px solid #fca60d;」の「#fca60d」が色を決めています。（borderは線の意味）
これを下記のように変更しました。
<h2 style="border: 3px solid #008080; padding: 0.5em 0.7em;">見出しのテキスト</h2> <p> </p>
色のコードが「#fca60d」から「#008080」に変わっていますね。
線は「border」で表現されるので、「border: ;」の色コードを変えると好きな色に変更できます。
見出しの塗りつぶし色を変える
背景が塗りつぶされた見出しの場合、
<h2 style="background: #f5c7ca; padding: 0.5em 0.7em;">見出しのテキスト</h2> <p> </p>
「background: #f5c7ca;」の「#f5c7ca」が色を決めています。（backgroundは背景の意味）
これを下記のように変更しました。
<h2 style="background: #f5deb3; padding: 0.5em 0.7em;">見出しのテキスト</h2> <p> </p>
色のコードが「#f5c7ca」から「#f5deb3」に変わっていますね。
背景は「background」で表現されるので、「background: ;」の色コードを変えると好きな色に変更できます。
色コードを変えれば、好きな色の見出しを使えます。
見出しの文字サイズ変更
当サイトの見出し素材には、文字サイズを調整するコードを入れています。
例えば下記の見出しなら、コード緑線の「font-size: 24px;」という部分ですね。
<h2 style="font-size: 24px; background-color: #fbe4ee; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 10px 10px; background-size: 20px 20px; padding: 0.5em 0.7em;">見出しのテキスト</h2> <p> </p>
この「24px」の数字を変えれば、見出しの文字サイズを変更できます。
実際に下記見出しの文字サイズを変更してみましょう。
<h2 style="font-size: 20px; background-color: #fbe4ee; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 10px 10px; background-size: 20px 20px; padding: 0.5em 0.7em;">見出しのテキスト</h2> <p> </p>
文字サイズの調整も簡単ですね。
「大見出し」「中見出し」「小見出し」の順に文字サイズを小さくすると、バランスが取れた記事となります。
もちろん「中見出し」にする時は「<h2>～</h2>」を「<h3>～</h3>」に、「小見出し」にする時は「<h2>～</h2>」を「<h4>～</h4>」にしておきましょう。
「大見出し」「中見出し」「小見出し」で文字サイズを変えて使って下さい。
見出しの幅を文字サイズに合わせる
例えば「中見出し」「小見出し」を文字サイズに合わせた幅で利用する場合に使える方法です。
見出しのコードに下記を加えて下さい。
display: inline-block;
例として先ほどの文字サイズを小さくした見出しの幅を調整します。
<h2 style="font-size: 20px; background-color: #fbe4ee; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 10px 10px; background-size: 20px 20px; padding: 0.5em 0.7em;">見出しのテキスト</h2>
<p> </p>
このコードに「display: inline-block;」を加えます。
<h2 style=" display: inline-block; font-size: 20px; background-color: #fbe4ee; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 10px 10px; background-size: 20px 20px; padding: 0.5em 0.7em;">見出しのテキスト</h2> <p> </p>
幅が狭くなりましたね。中に書く文字の量に応じて、幅が自動調整されます。
文字サイズと幅を小さくすると、「中見出し」や「小見出し」として使いやすいですね。
見出しを角丸にする
見出しの4隅を丸くする方法です。
見出しのコードに下記を加えて下さい。
border-radius: 10px;
「10px」の数字を変更すると、丸みの調整もできます。（数字が大きくなると丸みが強くなります）
実際に下記見出しの4隅を角丸に変更します。
<h2 style="background-color: #fbe4ee; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 10px 10px; background-size: 20px 20px; padding: 0.5em 0.7em;">見出しのテキスト</h2>
<p> </p>
このコードに「border-radius」を加えます。
<h2 style="border-radius: 10px; background-color: #fbe4ee; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 10px 10px; background-size: 20px 20px; padding: 0.5em 0.7em;">見出しのテキスト</h2> <p> </p>
丸みを出すと優しい印象となりますね。
「うまくできない」など困った方は、記事下のコメント欄から遠慮なく質問して下さいね。
メインサイトの「アメブロメーカー」では、350種類以上の見出し素材を用意しています。
この初級編ブログでも一部を紹介しています。
見出し素材見出しの知識・見出しを好みにカスタマイズする方法今ココ