ホームページデザイン

出典: MoodleDocs

moodle.orgテーマは、標準的なMoodleダウンロードに同梱されていません。しかし、テーマをデザインする方は、自由にmoodle.orgのホームページデザインを参考にしてください。

センターセクションは、H1およびPタグ (あなたがcssファイルに定義してください) を使用して作成されています。コードは、「管理 > フロントページ > フロントページ設定 > トピックセクションを表示する」を有効にした場合に表示される単一のHTMLブロックに記述してください。コードは、ラベルに記述する方が良いでしょう。ラベル作成時にコードを表示するには、HTMLエディタの編集ツールバー3行目の「HTML」ボタンをクリックしてください。

<div class="frontblock">
<h1 class="frontblock fronthead p1">Moodleへようこそ!</h1>
<p class="fronttext p1">
テキスト ...
</p>
</div>

<div class="frontblock">
<h1 class="frontblock fronthead p2">Moodleコミュニティ</h1>
<p class="fronttext p2">
テキスト ...
</p>
</div>

<div class="frontblock">
<h1 class="frontblock fronthead p3"><span class="nolink">Moodle開発</span></h1>
<p class="fronttext p3">
テキスト ...
</p>
</div>

<div class="frontblock">
<h1 class="frontblock fronthead p4"><span class="nolink">Moodleダウンロード</span></h1>
<p class="fronttext p4">
テキスト ...
</p>
</div>

H1およびPタグは、ブロックに合うよう整えられます。このコードは、あなたのサイトアピアランスをコントロールするため使用しているスタイルシートに追加してください。例えば、これらのルールをmoodle/theme/standardのstyles_fonts.cssに記述することができます。スタイルシートを編集するには、ファイルをテキストエディタで開いてコードを編集した後、サーバに保存してください。

.fronthead {
  font-size:1.3em;
  letter-spacing:0.04em;
}

.fronttext {
  margin-top:5px;
  margin-left:20px;
  margin-right:10px;
  margin-bottom:20px;
}

div.frontblock {
  margin-top: 12px;
  margin-bottom: 25px;
  border: #DDD solid 1px;
  -moz-border-radius-bottomleft: 20px;
  -moz-border-radius-bottomright: 20px;
  font-size: 0.95em;
}

h1.frontblock {
  border: #DDD solid 1px;
  background-image: url(gradient.jpg);  
  background-position: top;  
  background-repeat: repeat-x;  
  padding: 1px 10px;
  display: inline;
  position: relative;
  top: -0.5em;
  left: 8px;
  font-weight: normal;
}

p.fronttext.p1 {
  min-height: 90px;
}
p.fronttext.p2 {
  min-height: 90px;
}
p.fronttext.p3 {
  min-height: 125px;
}
p.fronttext.p4 {
  min-height: 105px;
}

このフォーマットが動作するのは、ヘッディングが「heading 1」を指定して、それぞれのテキスト段落が「div」タグで囲まれているから、ということを覚えておいてください。

あなたのラベルの編集中、フォーマットをコントロールしているタグを間違って削除した場合、あなたのテキストが適切に表示されなくなります。また、あなたがテキストを編集する場合、HTMLエディタではプレインテキストのように見えることを理解してください。美しい線のようなものは、あなたがテキストを保存するまで閲覧することはできません。