パーツ番号 02-13-02 ・ CSSのみ

和風縦書きキャッチコピー

淡い和紙調の背景に大きな縦書きキャッチコピーを配した見本です。WordPressで作る工芸品ブランドや和食店のトップビジュアルに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-13-02-wrap">
          <p class="d02-13-02-sub">SINCE 1985</p>
          <p class="d02-13-02-main">四季を纏う、暮らしの道具。</p>
        </div>

CSS

.d02-13-02{background:linear-gradient(135deg,#fdf6ec,#f5ece0)}
        .d02-13-02-wrap{display:flex;gap:12px;align-items:center;height:100%}
        .d02-13-02-main{writing-mode:vertical-rl;text-orientation:upright;font-family:"游明朝","Yu Mincho",serif;font-size:22px;font-weight:700;letter-spacing:.15em;color:#7c2d12;margin:0}
        .d02-13-02-sub{writing-mode:vertical-rl;text-orientation:mixed;font-size:10px;letter-spacing:.05em;color:#b45309;margin:0}

クラス名 .d02-13-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。