Kajabi（カジャビ）で作成したサイトの上部にある一番目立つ部分であるHero（ヒーロー）セクションをカスタマイズする方法について解説いたします。
前回の記事はこちら
解説動画はこちら
サイトを構成するセクションのひとつ「Hero」
今回は、Kajabi（カジャビ）作成したサイトのHero（ヒーロー）セクションをカスタマイズする方法を解説します。
サイトを構成するセクションのひとつである「Hero」ですが、サイトトップに表示される重要なセクションになります。
編集画面
「Hero」をクリックすると編集画面が表示され、「Text」を選択すると文章が編集できます。
まずは「Background」（背景）から編集します。
「Hero」の「SECTION SETTINGS」の「Background」の「Background Image」の「Select Image」で画像をアップロードできますが、ここでは2880×1200サイズが推奨されています。タブレットやスマホでも見やすいのでお勧めです。
私の場合の該当の画像を選択して、サイズを調整して「Hero」に戻ります。
ここでは細部の調整が必要ですが、この手順により画像が変更されました。
背景を動画に設定する場合
背景を動画に設定する場合、「Video Actions」から動画をアップロードします。
次に「Background Media Type」を「Video」に変更すると、背景を動画に設定することができます。
ちなみに「None」にすれば背景を単色に変更することも可能です。
各項目の設定をした後は必ず「Save」で設定を保存してください。
「Text」を編集
次に「Text」を編集します。
文字の大きさを調整して、メインキャッチとサブキャッチの大きさを分けます。
文字の表示範囲を変更したい場合、「Width」⇔「〇（数字）columns」の間で表示範囲を設定することができ、
「12 columns」に設定すると横幅いっぱいにテキストが表示されます。
その下に「Desktop Layout」と「Mobile Layout」がありますが、ここではサイトを表示する端末別にテキストや背景色を変更することができます。
「Call To Action」にある「Include CTA」では、チェックを入れるとボタンが表示されるようになり、その下の「Text」でボタンに表示する文字を編集することができます。
ボタン押下時のアクションなどを設定する場合
続けて「Button Action」ではボタン押下時のアクションを設定することができます。
「Go To a Landing Page」はランディングページへ、「Go To Checkout Page」では決済ページへ、「Download a file」ではファイルをダウンロードさせることができます。
他にもポップアップを表示させたり、ページ内の特定のセクションに移動させることもできます。
今回は「Go To URL」を選択して下の欄にはサイトのURLを入力します。
続けて「Open in New Tab」にチェックを入れることで、ボタンをクリックすればブラウザの新しいタブで内容が表示されるようにでき、他にもボタンの幅を選ぶこともできます。
「Button Width」を「Full」にすれば画面幅を一杯に使ってボタンが表示され「Auto」にすれば自動で設定してくれます。
「Button Background Color」ではボタンの色を変更することができ、同様に「Button Text Color」ではボタンの文字色を変更することができます。
背景を微調整する
ここまでの設定では背景の影響で文字が見にくいので、そちらを改善します。
「Hero」にある「SECTION SETTINGS」の中の「Background 」にある「Background Color」で背景の色を変更します。
ここでは文字に対して目立ちやすくするための色に変更しますが、色によってはせっかく設定した背景の動画が見にくくなるので注意して色を調節します。
これで背景が薄暗くなって文字が見やすくなりました。
各項目の設定をした後は必ず「Save」で設定を保存してください。
「Settings」について解説
ここで「Settings」について簡単に解説します。
「Favicon」ではトップに表示されるファビコンを設定することができます。
「Style Guide」ではページ全体の背景色を設定することができ、背景に画像を設定することもできます。
「Button Background Color」ではページにある全てのボタンの色を変更することができます。
「Hero」に表示される文字のフォントを変更したい場合、「Fonts」を選択します。
「Body Font」ではメインキャッチを、また「Heading Font Weight」ではサブキャッチのフォントを設定できます。
細かく設定するには
さらに細かく設定するには、ここで文字の色や大きさを変更することができます。
注意点として、モバイルなどで自身のサイトが表示された際のレイアウトを確認しておきましょう。
端末でのプレビュー方法
上部にあるボタンでそれぞれの端末でのプレビューを見ることができます。
このプレビューを参考にしながら各端末でのレイアウトを調整して下さい。
その際、スマホで表示される背景色を変更する場合は、「Mobile Layout」を選択して調整します。
各項目の設定をした後は必ず「Save」で設定を保存してください。
以上、Kajabi（カジャビ）作成したサイトのHero（ヒーロー）セクションをカスタマイズする方法を解説しました。
Kajabiの無料お試し期間を14日→30日に増やす方法（さらにKajabiマスタークラスをゲットする方法）
もしあなたがKajabiを使ってみたいとお考えでしたら、以下のバナーをクリックして表示されたお申し込みページからKajabiにお申し込みください。
そうすると、通常は14日間のお試し期間が倍以上となる「30日間お試し」の権利を手にいれることができますので、無料で使える期間が長くなります。（お試し期間内に解約すれば課金はされません。）
また、Kajabiの使い方を全て動画でわかりやすく解説した「Kajabiマスタークラス」をプレゼントいたしますので、ぜひ弊社のリンクからお申し込みいただけると嬉しいです。
「Kajabiマスタークラス」の申請方法
上記のバナー経由で申し込まれた後は弊社の問い合わせフォームからその旨をご連絡ください。
↓
問い合わせフォーム
・Kajabiマスタークラスの受け取りを希望する旨
・Kajabiに申し込まれた際のメールアドレス
・オンライン講座アカウント作成用のメールアドレス
以上を3点をご記入の上、お問い合わせください。
（本当に弊社のリンクでお申し込みいただいたかどうかを確認の上、1-2営業日程度でKajabiマスタークラスを差し上げます。）
Kajabiの導入をご検討されている方はぜひご活用くださいね！
