カスタマイズ

メインカラーの変更

テンプレートのカラーを変更するには、いくつかのステップが必要で、いくつかの方法があります。

簡単な方法

注: この方法では、Notionの色を上書きすることになります。

このテンプレートのメインカラーを最も簡単に変更する方法は、Notionのグリーンカラーを自分のカスタムカラーで上書きすることです。以下の手順に従って、変更を行うことができます。

以下のスニペットを、Superサイトの設定 > コードページ > CSSタブに貼り付けてください。

:root {
	--primary-color: #3B9DEF !important;
}

HEXコードを自分の好きな色に置き換えます。色を選ぶ際は、こちらのツールを使用。
次に、ナビゲーションバーとフッターの色をSuper内で更新し、カラーテーマを統一。

ヒント: 上記の方法を使用する場合、以下のスニペットを追加して、ナビゲーションバーとフッターの色も同様の方法で更新できます。手動で行う場合は、Superの設定から変更することも可能です。

.super-footer, .super-navbar__cta {
  background: var(--primary-color)!important;
}

より時間のかかる方法

Notionの色を犠牲にしない、もう一つのメインカラー変更方法は少し時間がかかります。

Notion内の色を使用しているすべてのブロックで、手動で色を更新します。右クリックして色の設定を変更してください。
次に、ナビゲーションバーとフッターの色をSuper内で更新し、統一します。
ブランドカラーに合わせてさらに微調整するためには、以下のコードスニペットを使って、デフォルトの色の値を調整できます。（選択した色の名前「blue」を適用したいカスタムHEXコードに置き換えてください）

:root {
	--color-blue: #3B9DEF !important;
}

コールトゥアクションボタン

Ascentには、リンクをコールトゥアクションボタンに変える機能があります。以下の例をご覧ください。デフォルトでは、背景色は上記で説明した --primary-color 変数を使用して設定されています。

Call to action button

For a link to become a button it must be a single bold text block on its own line with a link. You can customise the appearance of the button using the code snippet below. To change it, head to your site settings (cog icon), into the 'Code' page and inside the 'CSS' tab, simply paste the snippet below and update the values to your liking. This will also affect the padding and border radius styles of the Navbar call to action button.

リンクをボタンにするためには、リンクが含まれた太字テキストブロックが1行だけである必要があります。以下のコードスニペットを使用して、ボタンの外観をカスタマイズすることができます。変更するには、サイト設定（歯車アイコン）に進み、「Code（コード）」ページ内の「CSS」タブにこのスニペットを貼り付け、値を好みに合わせて更新してください。これにより、ナビゲーションバーのコールトゥアクションボタンのパディングやボーダーの角のスタイルにも影響を与えます。

:root {
	--cta-color-text: #FFFFFF!important;
	--cta-color-bg: var(--primary-color)!important;
	--cta-padding: 12px 22px!important;
  --cta-border-radii: 50px!important;
}

フォントのカスタマイズ

サイト > テーマページで、別のフォントを選択するだけで簡単に変更できます。

イラストのカスタマイズ

Streamlineと提携した無料のイラストセットを使用して、さまざまなイラストをカスタマイズして埋め込むことができます。

Illustrations

Illustrations can add a bit of color or visual interest to your site that helps build engagement with your users. In combination with a Super template, these free illustrations can quickly bring your new website to life. If you can't find the illustration you need here, look for thousands more at Streamline.

super.so

Customizing iconsアイコンのカスタマイズ

デフォルトのイラストを簡単に絵文字やカスタムアイコンに置き換えることができます。Notionには、色を変更できる豊富なアイコンが組み込まれており、それを活用できます。

コードスニペット

以下のカスタマイズオプションでは、以下のスニペットをサイト設定 > コード > CSSタブに貼り付ける必要があります。コード内の値を変更して、デザインを調整します。

コールアウトアイコンのサイズ変更

.notion-callout__icon span {
    width: 42px !important;
    height: 42px !important;
}

Re-enable page header on homepage

#page-index .notion-header {
    display: block!important;
}