一部ページでは、ソースをカスタムできます（上級者向け）

トップページと記事ページで、デザイン（CSS）のカスタムやカスタムタグ（html）の追加ができます。

Interviewzのテンプレートを使用しつつもサイズやカラーなどを自社サービスにあわせて微調整することができたり、広告やアナリティクス関連のタグを仕込むことができたりと、利用の幅が広がります。

カスタムCSSのクラス名一覧はこちら

※カスタム後の挙動に関しては当社で責任を負いかねます。表示くずれや不具合を避けるため、カスタムはhtmlやCSS、JavaScriptなどの言語を扱える方が行うようにしてください

どこで設定する？

プロジェクト管理画面内の下記ページにあるボタンから設定することができます。

記事＞記事編集：画面右下の「カスタムCSSを入力」ボタン

サイト設定＞ Topページデザイン設定：最下部の「カスタムCSSを入力」ボタン

サイト設定＞サイト：最下部の「カスタムHTMLを入力」ボタン

カスタムCSSのクラス名一覧はこちら

カスタムCSSを適応した事例

実際にカスタムCSSを適応した、Interviewz事例をご紹介します。

婚活タイプ診断

上記の婚活タイプ診断では、下記のカスタムを実装しています。

Googleフォントを活用した、カスタムフォントをタイトルに設定（婚活タイプ診断部分）
PC、SPでテキストのサイズを変更
"診断スタート"ボタンの色を変更し、グラデーションを設定しております
"診断スタート"ボタンホバー時にボタン色を変更

カスタムCSSの設定内容

/* Google Fonts から WDXL Lubrifont JP N（Regular 400 & Bold 700）を読み込み */
@import url("https://fonts.googleapis.com/css2family=WDXL+Lubrifont+JP+N:wght@400;700&display=swap");

/* ───── Main Title ───── */
.toppage__mainTitle {
font-family:
"WDXL Lubrifont JP N",
-apple-system,
BlinkMacSystemFont,
"Helvetica Neue",
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif !important;
font-weight: 700;
line-height: 1.5 !important;
font-size: 40px !important; /* SP default */
}

@media (min-width: 768px) {
.toppage__mainTitle {
font-size: 100px !important; /* PC */
 }
}

/* ───── Button ───── */
.toppage__button {
display: inline-block;
padding: 0.75em 2em;
color: #fff;
background: linear-gradient(135deg, #ff273c 0%, #0088ff 100%);
border: none;
border-radius: 4px;
text-decoration: none;
font-family: inherit;
font-size: 1rem
cursor: pointer;
transition: background 0.3s ease;
}

.toppage__button {
color: white !important;
}

.toppage__button:hover,
.toppage__button:focus-visible {
background: linear-gradient(135deg, #0088ff 0%, #ff273c 100%);
outline: none;
}