どうもこんにちは、管理人です。
最近、皆さんから情報提供がすごく、香盤情報がどんどん集まり大変ありがとうございます🙇その中で、文字を装飾する方が出てきて、サイトの表現が上がり大変嬉しく思っています。
そこで、サイト情報提供していただく皆さんが文字の装飾ができるように少しテクニックを紹介したいと思います。（私もネットで勉強しながら記載します）
文字の装飾方法（基本編）
具体的な文字の装飾方法について解説したいと思います。覚えてしまえばそんなに難しく有りません。または、管理人のXにこんなふうに表現したいなどの連絡いただければ私の方で修正しますので、気軽に連絡ください。
基本情報
情報登録画面に『その他情報』を入力するボックスがあります。下記図参照ください。
今回は、その他情報のところに入力していただくと、文字の色が変わったり文字の表現を変えることができます。
改行する
改行コードは、下記になります。
テスト１<br>テスト２表示例
テスト１
テスト２文字の後ろにこのコードをいれることにより改行されます。行間をあけたいときは、改行コードを2つつなげて記載してください。
こんな感じです。
テスト１<br><br>
テスト２表示例
表示はこんな感じになります。
テスト１
テスト２文字を太くする
太文字は、<b>タグを使うことにより表現できます。
具体的なコードを紹介します。
<b>テスト</b>表示例
上記をコピーしていただきテストの文字を好きな文字に変えてください。
このような感じで表示できます。
テスト文字の下にアンダーバーをつける
文字の下にアンダーバーをつけるには下記のようなコードを記載します。
<u>テスト</u>表示例
上記をコピーしていただきテストの文字を好きな文字に変えてください。
このような感じで表示できます。
太文字とアンダーバーを組み合わせる
太文字とアンダーバーを組み合わせたときのコードを紹介します。
<b><u>テスト</u></b>表示例
こんな感じで表示できます
テスト文字に色を付ける
色を付けるには、下記のコードを記載します。下記のコードを使って色の指定をすることにより文字の色を変えることができます。
<span style="color: blue;">この文字は青色です</span>
<span style="color: pink;">この文字はピンク色です</span>
<span style="color: red;">この文字は赤色です</span>
<span style="color: yellow;">この文字は黄色です</span>
<span style="color: green;">この文字は緑色です</span>
<span style="color: purple;">この文字は紫色です</span>表示例
この文字は青色ですこの文字はピンク色です
この文字は赤色です
この文字は黄色です
この文字は緑色です
この文字は紫色です
※表示例では行間を開けるため『改行コード』”<br>”を２つつけています。
文字を中央に表示する
タイトル通り文字を中央にするコードです。
<div style="text-align: center;">
ここに中央寄せしたいテキストを記述します。
</div>表示例
太文字＋色＋センター表示
太文字、赤色、センターに表示するときのコード例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>太字・色付き・中央寄せ</title>
</head>
<body>
<p style="color: red; text-align: center;">
<b style="font-weight: bold;">これも青字で太字、中央寄せのテキストです。</b>
</p>
</body>
</html>表示例
このような感じで表示できます。
青字で太字、中央寄せのテキストです。
文字の色を変える
文字の色を順番に変えるコードは少し難しいですが下記のコードで可能です。
下記のコードをコピーし、『この文章が赤→橙→黄→緑→青に順番に変わります。』の部分に好きな文字をいれてください。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.rainbow {
font-size: 18px;
animation: colorCycle 5s linear infinite;
}
/* 0%→100%で順に色が変わる */
@keyframes colorCycle {
0% { color: #ff0000; } /* 赤 */
20% { color: #ff7f00; } /* 橙 */
40% { color: #ffff00; } /* 黄 */
60% { color: #00aa00; } /* 緑 */
80% { color: #0000ff; } /* 青 */
100% { color: #ff0000; } /* 戻る（ループが自然） */
}
</style>
</head>
<body>
<p class="rainbow">この文章が赤→橙→黄→緑→青に順番に変わります。</p>
</body>
</html>表示
こんな感じに色が変わります。
この文章が赤→橙→黄→緑→青に順番に変わります。
コメント