ホームページデザイン

作成中です - Mitsuhiro Yoshida 2008年8月30日 (土) 09:40 (CDT)

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 Downloads</span></h1>
<p class="fronttext p4">
text...
</p>
</div>

The H1 and P tags are then styled to match the blocks. This code should be added to the stylesheets you are using to control the appearance of your site. For example, you might place these rules in styles_fonts.css in moodle/theme/standard. To edit the stylesheet, you will need to open the file in an editor, add the code, and save it back to the server.

.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;
}

Remember, this formatting works because the headings are designated "heading 1" and the div tags wrap each paragraph of the text.

If, when working on your label, you accidentally delete any of the tags that control the formatting, your text will not be rendered properly. Also realize that when you edit the text, it will look like plain text in the html editor. You won't see the nice borders and such until you save the changes.