文字装飾、リンク装飾

文字やリンクの装飾ができるCSSの一覧です。よく使いそうなものをAddQuicktagに登録しておくと便利です。

文字装飾

小さい文字
太字
大きい文字
もっと大きい文字
黄色マーカー
黄色マーカー(下線)
黄色マーカー太字(下線)
赤字
太赤字
振り仮名フリガナ

<span class="smalltxt">小さい文字</span>
<span class="boldtxt">太字</span>
<span class="bigtxt">大きい文字</span>
<span class="bigbigtxt">もっと大きい文字</span>
<span class="marker-yellow">黄色マーカー</span>
<span class="marker">黄色マーカー(下線)</span>
<span class="marker-b">黄色マーカー太字(下線)</span>
<span class="colorRed">赤字</span>
<span class="boldtxt colorRed">太赤字</span>
<ruby>振り仮名<rt>フリガナ</rt></ruby>

スタイル付き数字リスト

数字リストの数字部分を装飾するクラスです。色はテーマカラーと連動します。

丸囲み数字(やわらかい印象のサイト向け)

<ol>タグにmaruというクラスを指定します。

  1. リスト項目リスト項目
  2. リスト項目リスト項目
  3. リスト項目リスト項目
<ol class="maru">
 	<li>リスト項目リスト項目</li>
 	<li>リスト項目リスト項目</li>
 	<li>リスト項目リスト項目</li>
</ol>

四角囲み数字(カッチリした印象のサイト向け)

<ol>タグにsikakuというクラスを指定します。

  1. リスト項目リスト項目
  2. リスト項目リスト項目
  3. リスト項目リスト項目
<ol class="sikaku">
 	<li>リスト項目リスト項目</li>
 	<li>リスト項目リスト項目</li>
 	<li>リスト項目リスト項目</li>
</ol>

リンクボックス

「a-box」というクラスを指定すると、リンクが矢印付きのボックスで囲まれます。ボックス全体をリンクにして、クリックしやすくするのが目的です。矢印は、テーマカラーと連動します。

これはリンクボックス

<a class="a-box" href="https://hannya-builder.com/guide/">これはリンクボックス</a>

テキストリンク(グレー)

テキストリンクをあまり目立たせたくない場合は「 class=”a-gray”」を記述します。

WordPressテーマ・般若ビルダー購入者サイト

<a class="a-gray" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー購入者サイト</a>

丸矢印リンク

リンク内に「class=”arrow-(orange/red/blue/pink/green)”」を指定します。

WordPressテーマ・般若ビルダー公式サイト
WordPressテーマ・般若ビルダー公式サイト
WordPressテーマ・般若ビルダー公式サイト
WordPressテーマ・般若ビルダー公式サイト
WordPressテーマ・般若ビルダー公式サイト

文章中で設定するとこんな感じになります。

<a class="arrow-orange" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー公式サイト</a>
<a class="arrow-red" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー公式サイト</a>
<a class="arrow-blue" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー公式サイト</a>
<a class="arrow-pink" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー公式サイト</a>
<a class="arrow-green" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー公式サイト</a>

文章中で設定すると<a class="delta-red" href="#">こんな感じ</a>になります。

インデント付き

インデントを付けるにはリンク内に「class=”arrow-b-(orange/red/blue/pink/green)”」を指定します。

WordPressテーマ・般若ビルダー公式サイト(テキストリンクが長いときはスマホだと折り返されてしまうことが多いので、インデントが効くと良いかもしれない。)

<a class="arrow-b-orange" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー公式サイト(テキストリンクが長いときはスマホだと折り返されてしまうことが多いので、インデントが効くと良いかもしれない。)</a>

三角矢印リンク(2個)

リンク内に「class=”delta2-(orange/red/blue/pink/green)”」を指定します。

WordPressテーマ・般若ビルダー公式サイト
WordPressテーマ・般若ビルダー公式サイト
WordPressテーマ・般若ビルダー公式サイト
WordPressテーマ・般若ビルダー公式サイト
WordPressテーマ・般若ビルダー公式サイト

<a class="delta2-orange" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー公式サイト</a>
<a class="delta2-red" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー公式サイト</a>
<a class="delta2-blue" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー公式サイト</a>
<a class="delta2-pink" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー公式サイト</a>
<a class="delta2-green" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー公式サイト</a>

インデント付き)

インデントを付けるにはリンク内に「class=”delta2-b-(orange/red/blue/pink/green)”」を指定します。

WordPressテーマ・般若ビルダー公式サイト(テキストリンクが長いときはスマホだと折り返されてしまうことが多いので、インデントが効くと良いかもしれない。)

<a class="delta2-b-orange" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー公式サイト(テキストリンクが長いときはスマホだと折り返されてしまうことが多いので、インデントが効くと良いかもしれない。)</a>

三角矢印リンク(3個)

リンク内に「class=”delta3-(orange/red/blue/pink/green)”」を指定します。

WordPressテーマ・般若ビルダー公式サイト
WordPressテーマ・般若ビルダー公式サイト
WordPressテーマ・般若ビルダー公式サイト
WordPressテーマ・般若ビルダー公式サイト
WordPressテーマ・般若ビルダー公式サイト

文章中で設定するとこんな感じになります。

<a class="delta3-orange" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー公式サイト</a>
<a class="delta3-red" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー公式サイト</a>
<a class="delta3-blue" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー公式サイト</a>
<a class="delta3-pink" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー公式サイト</a>
<a class="delta3-green" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー公式サイト</a>

文章中で設定すると<a class="delta3-red" href="#">こんな感じ</a>になります。

インデント付き

インデントを付けるにはリンク内に「class=”delta3-b-(orange/red/blue/pink/green)”」を指定します。

WordPressテーマ・般若ビルダー公式サイト(テキストリンクが長いときはスマホだと折り返されてしまうことが多いので、インデントが効くと良いかもしれない。)

<a class="delta3-b-orange" href="https://hannya-builder.com/guide/">WordPressテーマ・般若ビルダー公式サイト(テキストリンクが長いときはスマホだと折り返されてしまうことが多いので、インデントが効くと良いかもしれない。)</a>

ページ内ジャンプリンク(スクロール)

サンプル

押してみる?👈押すとスクロール

確認用

<a href="#a1">押してみる?</a>&#x1f448;押すとスクロール

設定方法

1.移動させたい場所(見出しなど)にID(id=”a1″、id=”a2″など)を付ける
2.移動開始場所に、リンクを指定する。リンクの中身は「#」+「ID」

ページ内リンク移動地点

スクロールでここまで移動しました。

確認用

<h3 id="a1">ページ内リンク移動地点</h3>

以上「文字装飾、リンク装飾」でした。

その他のカスタマイズTOPに戻る