カスタムCSS・HTML活用ガイド
OmniWebのカスタムCSS・カスタムHTML機能で、テンプレートをさらに自分好みにカスタマイズ。フォントの追加、アニメーション、外部ウィジェットの埋め込み方法を解説します。
OmniWebのテンプレートはそのままでも美しいデザインですが、「もう少しこだわりたい」という方のためにカスタムCSSとカスタムHTML機能を用意しています。Webフォントの追加、ボタンのアニメーション、Instagram埋め込み、LINE予約ボタンの設置など、自由にカスタマイズが可能です。この機能はHTML/CSSの基本的な知識がある方向けの上級機能です。
カスタムCSSの使い方
エディタの左サイドバーで「全体設定」→「詳細設定」グループを開きます。「カスタムCSS」テキストエリアに、CSSコードを直接入力できます。入力したCSSは公開サイト全体に適用されます。
CSSでWebフォントを追加する
Google Fontsなどの外部フォントを読み込んで、サイトのテキストに適用できます。カスタムHead HTML に @import ルールを、カスタムCSS にフォント指定を記述します。
CSSでアニメーションをつける
CSSアニメーションを使って、要素にふわっと表示される効果やホバー時の変化を追加できます。
カスタムHTMLで外部ウィジェットを埋め込む
カスタムHead HTML を使って、外部サービスのウィジェットやスクリプトをサイトに埋め込めます。LINE公式アカウントのチャットウィジェット、Instagramフィード、予約システムなどが設置できます。
注意事項・トラブルシューティング
カスタムCSS・HTMLは自由度が高い分、使い方を間違えるとサイトの表示が崩れる可能性があります。以下のポイントに注意してください。
大きな変更をする前に、現在のCSS/HTMLをメモ帳などにコピーしておきましょう。
PCで見た目が良くても、スマホで崩れることがあります。必ずプレビューでスマホ表示も確認してください。
信頼できるサービスのスクリプトのみ埋め込んでください。不明なスクリプトはセキュリティリスクになります。