1. 文字背景の装飾・見出し
前回の文字の装飾に続き、はてなブログ中での文字背景の装飾などを利用した見出しについて紹介する。
2. 背景の着色による見出し
以下のデザインはCSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選を参考にしている。
背景着色
単純に文字の背景に着色するには
<span style="background:#FFCCFF;color:red;padding:0.3em;"><b>背景を着色した見出し<b></span>
背景を着色した見出し
縦線の見出し
<span style="padding: 0.25em 0.5em;color:black;background: transparent;border-left: solid 5px #7db4e6;"><b>縦線の見出し</b></span>
縦線の見出し
本ブログで使用している見出しデザイン。縦線を入れるためにborder-leftを指定。また縦棒を長くするのと、文字との間隔を入れるためpadding:0.25em 0.5em;として上下と左右の余白を入れる。
縦線と下線の見出し
<span style="padding: 0.25em 0.5em;color:blue;background: #f4f4f4;border-left: solid 5px #7db4e6;border-bottom: solid 3px #d7d7d7;"><b>縦線+下線の見出し</b></span>
縦線+下線の見出し
縦線に下線を加えた見出し。上の縦線に下線を加えるにはborder-bottomを追加する。
蛍光ペン風
<span style="background: linear-gradient(transparent 70%, #a7d6ff 70%);"><b>蛍光ペン風</b></span>
蛍光ペン風
蛍光ペン風にするにはバックグラウンドをグラデーション設定として、透明色を用いればよい。background: linear-gradient(transparent 70%, #a7d6ff 70%);
数値やカラーコードを変えれば、蛍光ペンの太さや色をが変えることができる。
2. 要素の組み合わせによる見出し
2色の下線
<div style="position: relative;display:block;border-bottom: solid 3px #cce4ff;bottom: 0px; width: 25%;"><b>2色の下線</b><div style="border-bottom: solid 3px #5472cd;position: relative;bottom:-3px; width:20%;"></div></div>
もともとのCSSは疑似要素:afterを用いているが、インラインで記述はできないので、<div style="メイン">文字<div style="afterの記述"></div></div>とした。基本的には2つのスタイルを記述して要素をつくり、それらを重ねるという作業になる。bottom:-3pxは線の位置微調整で、調整しないと下のように微妙にずれてしまう。基本的には数値を入れて、位置を確認しながら調整する作業になる。
吹き出し
<span style="position: relative;padding:0.4em;background: #e0edff;black:white;font-weight:bold;">吹き出し見出し</span>
<span style="position: relative;content: '';top: 2.75em;left: -7em;border: 15px solid transparent;border-top: 15px solid #e0edff;width: 0;height: 0;"></span>
吹き出し見出し
吹き出しも、もともとのCSSは:afterを用いるが、上と同様にインライン記述で2つの要素を重ね合わせて作成する。ばらばらに記述すると以下のようになるが、top;とleftを用いて吹き出しの形になるように数値を調整する作業を行う。
吹き出し見出し
リボン風
<span style="position: relative;content: '';border: none;border-bottom: solid 15px transparent;border-right: solid 20px rgb(149, 158, 155);"></span>
<span style="position: relative;left:-1.2em;top:-0.5em;padding: 0.5em;background: #a6d3c8;color: white;">リボン風見出し</span>
リボン風見出し
吹き出し同様に2つの要素を組み合わせて、リボン風にすることもできる。
3. 多重の影による見出し
前回文字の装飾で紹介したtext-shadow: スタイル1,スタイル2,・・・;をとして多重に適用することで、HTMLのみで凝った見出しを作ることができる。
(CSSでテキストを彩る装飾サンプル集 | ONE NOTESを参考にした)
立体感のある見出し
<span style="font-size:4em;text-align:center;line-height:0.95em;font-weight:bold;color: #FF6F00;text-shadow:0 0.01em 0 #999,0 0.02em 0 #888,0 0.03em 0 #777,0 0.04em 0 #666,0 0.05em 0 #555,0 0.06em 0 #444,0 0.08em 0 #000;">立体見出し</span>
立体見出し
影のオフセット位置(下方向)と色を少しづつ変化させることで、立体感がある文字装飾を行っている。
縁取り見出し
<span style="background:black;font-size:4em;padding-left:0.3em;padding-right:0.3em;text-align:center;font-weight:bold;color: #000; text-shadow:-1px 0 yellow,0 1px yellow,1px 0 yellow,0 -1px yellow;"> 縁取り</span>
縁取り
バックグラウンドとフォントを同じ色にして、影の位置を上下左右(-1px 0, 0 1px, 1px 0, 0 -1px)にずらして縁取りのみの文字を作っている。
ネオンサイン風
<span style="background:black;font-size:4em;padding-left:0.3em;padding-right:0.3em;text-align:center;font-weight:bold;color: white; text-shadow:0 0 0.10em #2962FF,0 0 0.15em #2962FF,0 0 0.80em #2962FF,0 0 1.00em #2962FF;">ネオン風</span>
ネオン風
影の位置を変えずに、ぼかし距離と色を少しづつ変化させていくことで、光っているように見せている。
グラデーションに着色された文字
<span style="font-size:4em;text-align:center;font-weight:bold;color: transparent;background: linear-gradient( 45deg,#E60012 20%,#F39800 30%,#FFF100 40%,#009944 50%,#0068B7 60%,#1D2088 70%,#920783 80%);-webkit-background-clip: text;">鮮やかな見出し</span>
鮮やかな見出し
文字色をtransparent、バックグラウンドをグラデーションにして、-webkit-background-clip:text;とすることでテキストの文字の部分だけグラデーションが残る。
