「ホームページデザイン」の版間の差分

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エディタではプレインテキストのように見えることを理解してください。美しい線のようなものは、あなたがテキストを保存するまで閲覧することはできません。

@@ 1行目: / 1行目: @@
 {{スクラップブック}}
-作成中です - [[利用者:Mitsuhiro Yoshida|Mitsuhiro Yoshida]] 2008年7月7日 (月) 08:30 (CDT)
+[http://moodle.org moodle.org]テーマは、標準的なMoodleダウンロードに同梱されていません。しかし、テーマをデザインする方は、自由に[http://moodle.org moodle.org]のホームページデザインを参考にしてください。
-The [http://moodle.org moodle.org] theme is not included in the standard Moodle download, however theme designers are welcome to take ideas from its homepage design.
+センターセクションは、H1およびPタグ (あなたがcssファイルに定義してください) を使用して作成されています。コードは、「管理 > フロントページ > フロントページ設定 > トピックセクションを表示する」を有効にした場合に表示される単一のHTMLブロックに記述してください。コードは、ラベルに記述する方が良いでしょう。ラベル作成時にコードを表示するには、HTMLエディタの編集ツールバー3行目の「HTML」ボタンをクリックしてください。
-The centre sections are created using H1 and P tags (defined in your css file). The code should be placed in the single html block that is formed when you switch the setting for "Include a topic section" to 'yes' in your Admin Site Setting (yourmoodle/admin/site.php).  It works well if you put the code in a label.  To get to the code view when creating the label, use the <> bottom on the second row of tools on the editing toolbar.
 <pre>
 <div class="frontblock">
-<h1 class="frontblock fronthead p1">Welcome to Moodle!</h1>
+<h1 class="frontblock fronthead p1">Moodleへようこそ!</h1>
 <p class="fronttext p1">
-text...
+テキスト ...
 </p>
 </div>
 <div class="frontblock">
-<h1 class="frontblock fronthead p2">Moodle Community</h1>
+<h1 class="frontblock fronthead p2">Moodleコミュニティ</h1>
 <p class="fronttext p2">
-text...
+テキスト ...
 </p>
 </div>
 <div class="frontblock">
-<h1 class="frontblock fronthead p3"><span class="nolink">Moodle Development</span></h1>
+<h1 class="frontblock fronthead p3"><span class="nolink">Moodle開発</span></h1>
 <p class="fronttext p3">
-text...
+テキスト ...
 </p>
 </div>
 <div class="frontblock">
-<h1 class="frontblock fronthead p4"><span class="nolink">Moodle Downloads</span></h1>
+<h1 class="frontblock fronthead p4"><span class="nolink">Moodleダウンロード</span></h1>
 <p class="fronttext p4">
-text...
+テキスト ...
 </p>
 </div>
 </pre>
-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.
+H1およびPタグは、ブロックに合うよう整えられます。このコードは、あなたのサイトアピアランスをコントロールするため使用しているスタイルシートに追加してください。例えば、これらのルールをmoodle/theme/standardのstyles_fonts.cssに記述することができます。スタイルシートを編集するには、ファイルをテキストエディタで開いてコードを編集した後、サーバに保存してください。
 <pre>
@@ 87行目: / 85行目: @@
 }</pre>
-Remember, this formatting works because the headings are designated "heading 1" and the div tags wrap each paragraph of the text.
+このフォーマットが動作するのは、ヘッディングが「heading 1」を指定して、それぞれのテキスト段落が「div」タグで囲まれているから、ということを覚えておいてください。
-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.
+あなたのラベルの編集中、フォーマットをコントロールしているタグを間違って削除した場合、あなたのテキストが適切に表示されなくなります。また、あなたがテキストを編集する場合、HTMLエディタではプレインテキストのように見えることを理解してください。美しい線のようなものは、あなたがテキストを保存するまで閲覧することはできません。
 [[Category:管理者]]

Documentation

「ホームページデザイン」の版間の差分

2008年9月4日 (木) 23:17時点における最新版