画面横に常に表示される「資料請求」「無料相談」などのCTAボタン（縦書き文字）を実装する方法を紹介します。
下にこの記事で紹介する見本CODE-PENを載せておきますので表示や動作などをご確認下さい。
See the Pen 画面横に常に表示されるCTAボタン｜縦書き by s sim (@s-sim) on CodePen.
目次
HTMLの書き方
共通パーツ化するとコーディングが省力化できる
画面横に常に表示されるCTAボタンを全ページで表示させたい場合は共通パーツ化するとコーディングが省力化できます。
- CSS：SASSで書く場合は、全ページ共通のパーツとして「_l-header.scss」ファイルに書くと良いです。
- WordPress：「header-parts.php」などに書いて共通パーツ化するとコーディングが省力化できます。
HTMLの書き方
以下、画面横に常に表示される縦書き文字のCTAボタンを実装するためのHTML全文です。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- headタグの内容は省略 -->
<!-- このサイトのCSS -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header class="l-header">
<!-- 内容は省略 -->
</header>
<!-- 画面横のCTAボタン -->
<div class="l-header-cta-button_wrapper">
<a href="#" class="l-header-cta-button_a">資料請求</a>
<a href="#" class="l-header-cta-button_a">無料相談</a>
</div>
<!-- スクロールできるようにメインタグを設置した -->
<main class="l-main">
<!-- 内容は省略 -->
<div class="red-sec"></div>
<div class="blue-sec"></div>
<div class="yellow-sec"></div>
<div class="green-sec"></div>
</main>
</body>上のコードはCODE-PENで実装状態を分かりやすくするために余計な要素が多々含まれていますが、画面横CTAボタンのHTMLコードのみを抜粋すると、下記のとおり非常にシンプルです。
<!-- 画面横のCTAボタン -->
<div class="l-header-cta-button_wrapper">
<a href="#" class="l-header-cta-button_a">資料請求</a>
<a href="#" class="l-header-cta-button_a">無料相談</a>
</div>このHTMLをWordPressであれば、「header-parts.php」に書けば全ページ共通のパーツとして使えます。
CSSの書き方
以下、画面横に常に表示される縦書き文字のCTAボタンを実装するためのCSS全文です。
@charset "UTF-8";
body {
font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック",
"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
line-height: 1.8;
font-size: 16px;
background-color: rgb(219, 220, 180);
}
.l-main{
height: 200vh;
}
.red-sec, .blue-sec, .yellow-sec, .green-sec{
height: 50vh;
}
.red-sec{
background-color: rgb(227, 199, 199);
}
.blue-sec{
background-color: rgb(169, 176, 200);
}
.yellow-sec{
background-color: rgb(241, 251, 183);
}
.green-sec{
background-color: rgb(178, 232, 183);
}
/* --------------------------------------------- */
/* 画面横のCTAボタン */
/* --------------------------------------------- */
/* */
.l-header-cta-button_wrapper {
position: fixed;
right: 0;
top: 20%; /* 画面上部20%の位置 */
transform: translateY(-20%); /* 上記に対して必要な記述 */
z-index: 20;
color: #fff;
font-size: 15px;
font-weight: 500;
display: flex;
flex-direction: column;
gap: 8px;
}
.l-header-cta-button_a {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 12px 12px 14px;
border-radius: 10px 0 0 10px;
border-top: 1px solid red;
border-left: 1px solid red;
border-bottom: 1px solid red;
border-right: none;
background-color: #333;
/* 縦書き関連のスタイル */
writing-mode: vertical-rl;
text-orientation: upright;
letter-spacing: 0.3em;
line-height: 1.2;
}上のコードもCTAボタンの実装状態が分かるようにmainタグを色付きで分割していますが、画面横CTAボタンに関するCSSのみを抜粋すると、下記のようになります。
/* --------------------------------------------- */
/* 画面横のCTAボタン */
/* --------------------------------------------- */
/* */
.l-header-cta-button_wrapper {
position: fixed;
right: 0;
top: 20%; /* 画面上部20%の位置 */
transform: translateY(-20%); /* 上記に対して必要な記述 */
z-index: 20;
color: #fff;
font-size: 15px;
font-weight: 500;
display: flex;
flex-direction: column;
gap: 8px;
}
.l-header-cta-button_a {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 12px 12px 14px;
border-radius: 10px 0 0 10px;
border-top: 1px solid red;
border-left: 1px solid red;
border-bottom: 1px solid red;
border-right: none;
background-color: #333;
/* 縦書き関連のスタイル */
writing-mode: vertical-rl;
text-orientation: upright;
letter-spacing: 0.3em;
line-height: 1.2;
}上記CSSのポイントはコメントアウトしてある箇所のとおりですが、箇条書きに書き出すと次のようになります。
- 「position: fixed;」で画面上に固定
- 「top: 20%;」「transform: translateY(-20%); 」で 画面上部20%の位置 */
- 縦書き関連のスタイルは、上記抜粋コード（4行分）を参照
