「ホームページデザイン」の版間の差分
Mitsuhiro Yoshida (トーク | 投稿記録) 編集の要約なし |
Mitsuhiro Yoshida (トーク | 投稿記録) (Done.) |
||
(同じ利用者による、間の11版が非表示) | |||
1行目: | 1行目: | ||
{{スクラップブック}} | {{スクラップブック}} | ||
[http://moodle.org moodle.org]テーマは、標準的なMoodleダウンロードに同梱されていません。しかし、テーマをデザインする方は、自由に[http://moodle.org moodle.org]のホームページデザインを参考にしてください。 | [http://moodle.org moodle.org]テーマは、標準的なMoodleダウンロードに同梱されていません。しかし、テーマをデザインする方は、自由に[http://moodle.org moodle.org]のホームページデザインを参考にしてください。 | ||
センターセクションは、H1およびPタグ (あなたがcssファイルに定義してください) を使用して作成されています。コードは、「管理 > フロントページ > フロントページ設定 > | センターセクションは、H1およびPタグ (あなたがcssファイルに定義してください) を使用して作成されています。コードは、「管理 > フロントページ > フロントページ設定 > トピックセクションを表示する」を有効にした場合に表示される単一のHTMLブロックに記述してください。コードは、ラベルに記述する方が良いでしょう。ラベル作成時にコードを表示するには、HTMLエディタの編集ツールバー3行目の「HTML」ボタンをクリックしてください。 | ||
<pre> | <pre> | ||
<div class="frontblock"> | <div class="frontblock"> | ||
<h1 class="frontblock fronthead p1"> | <h1 class="frontblock fronthead p1">Moodleへようこそ!</h1> | ||
<p class="fronttext p1"> | <p class="fronttext p1"> | ||
テキスト ... | |||
</p> | </p> | ||
</div> | </div> | ||
<div class="frontblock"> | <div class="frontblock"> | ||
<h1 class="frontblock fronthead p2"> | <h1 class="frontblock fronthead p2">Moodleコミュニティ</h1> | ||
<p class="fronttext p2"> | <p class="fronttext p2"> | ||
テキスト ... | |||
</p> | </p> | ||
</div> | </div> | ||
<div class="frontblock"> | <div class="frontblock"> | ||
<h1 class="frontblock fronthead p3"><span class="nolink"> | <h1 class="frontblock fronthead p3"><span class="nolink">Moodle開発</span></h1> | ||
<p class="fronttext p3"> | <p class="fronttext p3"> | ||
テキスト ... | |||
</p> | </p> | ||
</div> | </div> | ||
<div class="frontblock"> | <div class="frontblock"> | ||
<h1 class="frontblock fronthead p4"><span class="nolink"> | <h1 class="frontblock fronthead p4"><span class="nolink">Moodleダウンロード</span></h1> | ||
<p class="fronttext p4"> | <p class="fronttext p4"> | ||
テキスト ... | |||
</p> | </p> | ||
</div> | </div> | ||
</pre> | </pre> | ||
H1およびPタグは、ブロックに合うよう整えられます。このコードは、あなたのサイトアピアランスをコントロールするため使用しているスタイルシートに追加してください。例えば、これらのルールをmoodle/theme/standardのstyles_fonts.cssに記述することができます。スタイルシートを編集するには、ファイルをテキストエディタで開いてコードを編集した後、サーバに保存してください。 | |||
<pre> | <pre> | ||
87行目: | 85行目: | ||
}</pre> | }</pre> | ||
このフォーマットが動作するのは、ヘッディングが「heading 1」を指定して、それぞれのテキスト段落が「div」タグで囲まれているから、ということを覚えておいてください。 | |||
あなたのラベルの編集中、フォーマットをコントロールしているタグを間違って削除した場合、あなたのテキストが適切に表示されなくなります。また、あなたがテキストを編集する場合、HTMLエディタではプレインテキストのように見えることを理解してください。美しい線のようなものは、あなたがテキストを保存するまで閲覧することはできません。 | |||
[[Category:管理者]] | [[Category:管理者]] |
2008年9月4日 (木) 23:17時点における最新版
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エディタではプレインテキストのように見えることを理解してください。美しい線のようなものは、あなたがテキストを保存するまで閲覧することはできません。