こちらの記事ではLMS Maker のサイト全体のデザインの変更方法についてご紹介します。

サイトのデザインの設定は「メニュー」>「外観」>「カスタマイズ」に進みます。

全般

ロゴ

  1. サイトロゴ : ウェブサイトの左上に表示されるロゴです
  2. 固定ロゴ :ページをスクロールした時に表示されるロゴです
  3. Retina ロゴ : 高画質のロゴ
  4. 固定ロゴ Retina : 高画質の固定用ロゴ
  5. レッスンロゴ : レッスン時に表示されるロゴ 例) http://tinyurl.com/yxs2bcmq 
  6. モバイル用のロゴ : スマホでサイトを見たときのロゴ
  7. ロゴの幅 
  8. サイトのアイコン : デスクトップのタブに表示されるロゴ(ファビコン)

レイアウト

ページのレイアウトの設定ができます。

スタイリング

メインの色、メインコンテンツの背景、ボックス化された背景のカスタマイズ

 

タイポグラフィ

ボディフォントと見出しフォントのカスタマイズ

追加機能

読み込みアイコンのカスタマイズと追加機能の有効化/無効化:ポップアップ背景画像、RTLサポート、スムーズスクロール、グラフメタタグを開く、トップに戻る、Googleテーマ、プリロード…

  1. RTLサポート: ヘブライ語など右から読む言語の場合はONにします。
  2. スムーズなスクロール : ONにするとマウススクロールをした時にスムーズにスクロールできます。
  3. グラフメタタグを開く:Facebookなどのソーシャルネットワーキングサイトでページを共有するときに主に使用されるオープングラフメタタグを有効にするにはオンにします。
  4. トップに戻る:オンにすると、トップへのスクロール機能を追加するBack To Topスクリプトが有効になります。
  5. Google Theme : オンにするとAndroidのGoogle Chromeでのツールバーの色を設定します。
  6. プリロード:サイトを読み込むアニメーションのON・OFF
  7. 読み込みアイコン:サイトを読み込む際のアニメーションを設定できます
  8. ポップアップ背景
  9. ウィジェット ログインテキスト

参考画像

↑ Google Themeの例

 

↑ポップアップ背景・テキストの例

 

ユーティリティ

  1. 自動ログインを無効にする:クッキーを使用して、ログインをクリックしたユーザーを自動でログインさせます
  2. 登録後のリダイレクト:ユーザーの登録後に指定のページにリダイレクトします。(空欄で トップページにリダイレクトします。)
  3. ログインリダイレクト:ユーザーのログイン後に指定のページにリダイレクトします。(空欄で トップページにリダイレクトします。)
  4. Google Analytics:GoogleアナリティクスのIDを入力します。 (例 UA-xxxxx-x)
  5. Facebook Pixel:Facebook Pixelを入力
  6. Page Builder:ここはそのままで大丈夫です。

サイドバー

固定サイドバー:ページをスクロールしてもサイドバーが付いてくるようにします。

カスタムCSS

CSSを追加できます。

カスタムJS

JSを追加できます。

404ページ

404ページで表示される画像を設定できます。

 

ヘッダー

設定

  1. 検索窓の表示:ヘッダーテンプレート1またはヘッダーテンプレート2のスタイル2のみの検索フォームを有効または無効にできます。
  2. 検索テキスト:ヘッダーで検索するためのテキストを入力できます。
  3. ヘッダーの右側にサイドバーを表示:ヘッダーの右側のサイドバーを有効または無効にすることができます。
  4. メニューのプロフィールアイテム:上の図のようにユーザーのメニューに表示する項目を設定できます。

トップバー

ヘッダーより上にバーを表示できます。

レイアウト&メインメニュー

ヘッダーのレイアウトを設定できます。

固定メニュー

オンにすると、ページをスクロールするときにスティッキーメニューを有効にします。

 

ページタイトル

各ページのタイトルに関する設定ができます。この設定はデフォルト設定となります。ここのページのタイトル設定は以下の方法で設定できます。

↑各投稿ページ、固定ページなどにこの項目があります。

 

ブログ

ブログに関する設定を行うことができます。

講座

レイアウト

講座紹介ページのレイアウトを設定できます。

アーカイブ

講座一覧の表示方法を設定できます。

Single

講座紹介ページの内容を設定できます。 タブの並び替え等を行うことができます。

機能

  1. ログインポップアップを有効にする:ログインしていない状態で「講座を受講する」ボタンを押した時にログインポップアップが表示されます
  2. 非表示広告:設定した広告を非表示にする場合はOKにします。
  3. 新しいコース期間:作成した講座が「新着講座」としてPRされる期間を設定できます。

 

ソーシャルシェア

共有ボタンの順番や表示設定

 

イベント

イベントページの設定ができます。

 

フォーラム

フォーラムページの設定ができます。

 

コレクション

コレクションページの設定ができます。

 

ポートフォリオ

ポートフォリオの設定ができます。

 

製品

WooCommerceを使用した時の設定をすることができます。

 

レスポンシブ

ウェブサイトをスマホで見たときに、スマホ仕様になるかどうかを設定できます。

ハンバーガーアイコン(オフキャンバスメニュー)は以下のようなデザインになります。

 

 

フッター

フッターの列数、色、コピーライトのテキストについて設定できます。

 

ウィジェット

WordPressの各ウィジェットについて設定ができます。

WordPressのウィジェットについてはこちらのサイトをご確認ください。

 

メニュー

WordPressの各メニューについて設定ができます。

WordPressのメニューについてはこちらのサイトをご確認ください。

 

まとめ

以上の方法でLMS Makerの基本的なデザインの変更をすることができます。実際の個々のページのデザインの変更方法についてはまた別の記事でご紹介させていただきます。

何かご質問がある場合はお気軽にクラレボにお問い合わせ下さい。

 

動画