OmniWebのカスタムCSS・カスタムHTML機能で、テンプレートをさらに自分好みにカスタマイズ。フォントの追加、アニメーション、外部ウィジェットの埋め込み方法を解説します。
OmniWebのテンプレートはそのままでも美しいデザインですが、「もう少しこだわりたい」という方のためにカスタムCSSとカスタムHTML機能を用意しています。Webフォントの追加、ボタンのアニメーション、Instagram埋め込み、LINE予約ボタンの設置など、自由にカスタマイズが可能です。この機能はHTML/CSSの基本的な知識がある方向けの上級機能です。
エディタの左サイドバーで「全体設定」→「詳細設定」グループを開きます。「カスタムCSS」テキストエリアに、CSSコードを直接入力できます。入力したCSSは公開サイト全体に適用されます。
Google Fontsなどの外部フォントを読み込んで、サイトのテキストに適用できます。カスタムHead HTML に @import ルールを、カスタムCSS にフォント指定を記述します。
CSSアニメーションを使って、要素にふわっと表示される効果やホバー時の変化を追加できます。
カスタムHead HTML を使って、外部サービスのウィジェットやスクリプトをサイトに埋め込めます。LINE公式アカウントのチャットウィジェット、Instagramフィード、予約システムなどが設置できます。
カスタムCSS・HTMLは自由度が高い分、使い方を間違えるとサイトの表示が崩れる可能性があります。以下のポイントに注意してください。
大きな変更をする前に、現在のCSS/HTMLをメモ帳などにコピーしておきましょう。
PCで見た目が良くても、スマホで崩れることがあります。必ずプレビューでスマホ表示も確認してください。
信頼できるサービスのスクリプトのみ埋め込んでください。不明なスクリプトはセキュリティリスクになります。
初心者でも簡単にホームページを作れるOmniWebの始め方。アカウント登録・テンプレート選択・サイト設定・支払い・公開の5ステップを画面付きで解説します。
ホームページのテンプレート選びに迷わない。飲食店・美容サロン・クリニックなど業種別75種類のテンプレートの特徴と、最適な選び方を解説します。
ノーコードでホームページを編集する方法を完全ガイド。ドラッグ＆ドロップのエディタ操作、20種のセクション、カラー・フォント変更、画像アップロードまで網羅。
AIでホームページを自動作成する方法。既存サイトのURLを入力するだけで、AIがデザイン・構成・テキストを解析し新しいサイトを自動生成します。
ホットペッパー、食べログ、EPARK...ポータルサイトへの手数料が経営を圧迫していませんか？自社HPで集客の主導権を取り戻す方法を解説します。
競合のアクセス数、流入キーワード、サイト構成を無料ツールで丸裸に。5分でできる競合分析の具体的手順と、分析結果の活かし方を解説します。