「ホームページデザイン」の版間の差分
Mitsuhiro Yoshida (トーク | 投稿記録) 編集の要約なし |
Mitsuhiro Yoshida (トーク | 投稿記録) (Done ... need some brush up.) |
||
89行目: | 89行目: | ||
このフォーマットが動作するのは、ヘッディングが「heading 1」を指定して、それぞれのテキスト段落が「div」タグで囲まれているから、ということを覚えておいてください。 | このフォーマットが動作するのは、ヘッディングが「heading 1」を指定して、それぞれのテキスト段落が「div」タグで囲まれているから、ということを覚えておいてください。 | ||
あなたのラベルの編集中、フォーマットをコントロールしているタグを間違って削除した場合、あなたのテキストが適切に表示されなくなります。また、あなたがテキストを編集する場合、HTMLエディタではプレインテキストのように見えることを理解してください。美しい線のようなものは、あなたがテキストを保存するまで閲覧することはできません。 | |||
[[Category:管理者]] | [[Category:管理者]] |
2008年9月3日 (水) 17:34時点における版
作成中です - 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」タグで囲まれているから、ということを覚えておいてください。
あなたのラベルの編集中、フォーマットをコントロールしているタグを間違って削除した場合、あなたのテキストが適切に表示されなくなります。また、あなたがテキストを編集する場合、HTMLエディタではプレインテキストのように見えることを理解してください。美しい線のようなものは、あなたがテキストを保存するまで閲覧することはできません。