ホームページの文章を目立たせるテクニックをひとつ。
スタイルシートをカスタマイズすることで背景を炭治郎柄にすることができます。
背景色を炭色にして、日本の伝統色の「花緑青」を重ねます。
テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章
テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章テキスト文章
1）以下を半角英数でキーボードの手打ちをしてください。
囲みたいテキストを＜DIV class=”tnjr”＞ テキスト文章 ＜/DIV＞で、囲みます。
2）style.cssに以下のコードをコピペします。
.tnjr {
padding: 2rem; /*文字列の周囲のスペース*/
color: #ffffff; /*文字の色、ここでは白*/
font-weight:600; /*文字の太さ*/
text-shadow:1px 2px 3px #030; /*濃緑色で文字に影を作る*/
background-color: #312726; /*薄墨色の背景色*/
background-image: linear-gradient(45deg, #00a381 25%, transparent 25%, transparent 75%, #00a381 75%, #00a381),
linear-gradient(45deg, #00a381 25%, transparent 25%, transparent 75%, #00a381 75%, #00a381); /*背景色に重ねる「花緑青」*/
background-size: 40px 40px; /*花緑青のタテヨコサイズ*/
background-position: 0 0, 20px 20px; /*花緑青の位置*/
}
1）、2）のツーステップでできます。
そのまま、スタイルシートにコピペでもいいですし、柄の色をアレンジしてみてください。