9. 外観のカスタマイズ

本マニュアルでの設定例は、Luxlinerのデモサイトを例とした設定を紹介しています。必ずしも全く同じ設定にする必要はありません。

目次

設定箇所

本ページ内の設定は全て、以下の外観カスタマイズ画面で設定を行います。

サイト全体設定

基本カラー

メインカラー、テキストカラー、リンクカラー、背景色をサイトのイメージに合わせて変更します。矢印の先が反映される箇所の例となります。

特にメインカラーは様々な箇所に影響があります。Luxlinerの申し込みページのデザインでもこのメインカラーが使われるようになっています。

背景色には、「#f9f9f8」などの薄めのグレーを推奨いたします。Luxlinerを使用するサイトでは、背景色に白(#ffffff)は非推奨です。

最後に必ず画面上部の公開ボタンを押して設定を反映して下さい。

タイトルデザイン

Luxlinerを使った会員サイトでは実際に使われることはあまりないと思いますが、サイト全体のデザインイメージに合うものを選択してください。

詳しくは以下の公式マニュアルを参照して下さい。
https://swell-theme.com/basic-setting/2318/#index_id9

最後に必ず画面上部の公開ボタンを押して設定を反映して下さい。

パンくずリスト

デフォルトのパンくずリストは、窪んだような見た目のデザインとなっています。上の例のように背景効果を無くすことで、フラットな見た目になります。

最後に必ず画面上部の公開ボタンを押して設定を反映して下さい。

ページャー

商品の目次ページ下部に表示されるページャーのデザインを指定します。サイト全体のデザインイメージに合うと思うものを選択してください。

最後に必ず画面上部の公開ボタンを押して設定を反映して下さい。

ヘッダー

ロゴ画像の設定

通常、ロゴ画像はすでにメディアライブラリに保存されていると思いますので、それを選択します。もちろん、新しくロゴ画像を用意して頂いても構いません。

画像サイズは右側のレビューを見ながら適宜調整して下さい。spはスマートフォンでサイトを見ている場合の画像サイズの指定となります。

SNSアイコンリストとキャッチフレーズ設定

こちらの設定の例ではヘッダーバーを表示させないように設定していますが、サイトの使い方に合わせて設定値を適宜変更して下さい。

SNSアイコンリスト

ロゴ画像と同じヘッダー設定内のヘッダーバー設定にあるSNSアイコンリストの表示設定を「非表示」に変更します。

キャッチフレーズ設定

ヘッダーバーにキャッチフレーズを表示させないために、キャッチフレーズの表示位置を「表示しない」に設定します。

最後に必ず画面上部の公開ボタンを押して設定を反映して下さい。

フッター

フッターに表示するコピーライトを設定します。(上の例ではデザインをカスタマイズしているため、フッターの見え方が実際と少し異なります。)

最後に必ず画面上部の公開ボタンを押して設定を反映して下さい。

トップページ

メインビジュアル

メインビジュアルを「表示しない」に設定します。(必要であれば画像や動画を設置してください)

なお、本マニュアルの順番通りに作業をしている場合、右のプレビュー画面でサイドメニューも表示されていると思いますが、10. 固定ページの全幅化 にてサイドメニューの表示・非表示について触れます。

最後に必ず画面上部の公開ボタンを押して設定を反映して下さい。

記事スライダー

記事スライダーを「設置しない」に設定します。(こちらも必要であれば設置してください)

最後に必ず画面上部の公開ボタンを押して設定を反映して下さい。

投稿・固定ページ

タイトル

タイトル下に表示する情報にある公開日更新日表示のチェックを外します。

最後に必ず画面上部の公開ボタンを押して設定を反映して下さい。

コンテンツのデザイン

各見出しのデザインをサイトイメージ合わせて変更して下さい。

最後に必ず画面上部の公開ボタンを押して設定を反映して下さい。

目次

目次の表示設定を必要に応じて変更して下さい。

投稿ページの目次の表示設定が、Luxlinerのコンテンツ内での目次の表示に影響します。

SWELLの目次機能の制限として、最低でも1つのH2見出しがページ内に配置されている必要があります。これは、SWELLでは最初のH2の手前に目次を自動生成するという仕様のためです。

目次の詳細は以下のSWELL公式マニュアルをご覧下さい。
https://swell-theme.com/basic-setting/2278/

最後に必ず画面上部の公開ボタンを押して設定を反映して下さい。

SNSシェアボタン

ページ内に表示するSNSシェアボタンの位置と表示に関する設定を変更します。

上記の例ではSNS関連ボタンは全て表示しない設定になっていますが、サイトの運用方針に応じて変更して下さい。

最後に必ず画面上部の公開ボタンを押して設定を反映して下さい。

サイト内検索

サイト内検索を使う場合、検索結果の表示をカスタマイズすることが可能です。詳しくはこちらをご覧ください。

その他

本マニュアルで扱ったのは一部の設定のみです。

その他の細かいデザイン調整を行う場合は、SWELL公式の設定マニュアルをご覧の上、ご自身のサイトイメージに合うよう設定を変更して下さい。
https://swell-theme.com/manual/

目次