モレキャンディ

メインページ ►Moodle サイトの 管理 ► サイトの外観 ► テーマ ►Morecandy

テーマ

• テーマ設定
• 標準テーマ
• 新しいテーマをインストールする
• テーマFAQ

モレキャンディ
タイプ	テーマ
セット	該当なし
ダウンロード	近日公開
問題点	近日公開
討論	近日公開
メンテナ	メアリーエヴァンス

これはMary Evansによって書かれ、Moodle.orgで共有されたMoodleのための寄稿された（サードパーティの）テーマです。

Morecandyのカスタマイズ

以下は、Morecandyを使用してMoodleサイトをカスタマイズするための簡単な手順です。

スライドショーを追加する方法

これがあなたのMoodleサイトにこのカルーセルを追加するために必要なすべてのHTMLです。 簡単な手順は次のとおりです。

1. あなたのMoodleサイトのホームページに進み、管理ブロックから[フロントページ設定]を選択し、まだ有効になっていない場合は[サイトトピック]を有効にします。
2. 設定を保存してホームページに戻り、[編集を有効にする]をクリックします。
3. [サイトトピック]領域を開き、このページの下部からエディタのHTML部分にカルーセルHTMLをコピーして貼り付けて保存します。
4. エディタで通常のビューに戻ると、4つのプレースホルダ画像が表示されます。各画像をマウスで順番に選択するだけで、エディタの画像アイコンをクリックして編集できます。ここであなたがアップロードするあなた自身のイメージを選ぶことができます。どのサイズでも機能しますが、特にブロックがある場合は、サイトのトピック領域のサイズを考慮してください。
5. あなたの画像を追加した後あなたの仕事を保存して座ってそれがどのように動作するかを見ます。
6. この編集部分に慣れたら、独自のキャプションを追加できます。
7. これはプロトタイプにすぎず、非常に基本的なものですが、最小限の手間でできることを示していることも忘れないでください。

<！ - このコードをコピーしてあなたのサイトのトピックまたはコースのトピックに貼り付けてください - >
<div id = "frontpage-slider"クラス= "カルーセルスライド"> <！ - アニメーション用スライドのクラス - >
  <div class = "carousel-inner">
    <div class = "item active"> <！ - 最初のアイテムなのでアクティブなクラス - >
      <img class = "img-sensitive" src = "https://placehold.it/960x200" alt = "" />
      <div class = "carousel-caption">
        <p>最初のキャプションテキストはこちら</p>
      </div>
    </div>
    <div class = "item">
      <img class = "img-sensitive" src = "https://placehold.it/960x200" alt = "" />
      <div class = "carousel-caption">
        <p> 2番目のキャプションテキストはこちら</p>
      </div>
    </div>
    <div class = "item">
      <img class = "img-sensitive" src = "https://placehold.it/960x200" alt = "" />
      <div class = "carousel-caption">
        <p> 3番目のキャプションテキストはこちら</p>
      </div>
    </div>
    <div class = "item">
      <img class = "img-sensitive" src = "https://placehold.it/960x200" alt = "" />
      <div class = "carousel-caption">
        <p> 4番目のキャプションテキストはこちら</p>
      </div>
    </div>
  </div> <！ -  /.carousel-inner  - >
  <！ - 次のコントロールと下のコントロール
        href値はこのカルーセルのIDを参照しなければなりません - >
    <a class="carousel-control left" href="#frontpage-slider" data-slide="prev"> ‹</a>
    <a class="carousel-control right" href="#frontpage-slider" data-slide="next">› </a>
</div>
<！ -  / END  - >