ホームページデザイン
作成中です - 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>
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」タグで囲まれているから、ということを覚えておいてください。
あなたのラベルの編集中、フォーマットをコントロールしているタグを間違って削除した場合、あなたのテキストが適切に表示されなくなります。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.
