Team:Chiba/Internal/foredit

From 2008.igem.org

(Difference between revisions)
(リンクバーの作り方)
 
(32 intermediate revisions not shown)
Line 1: Line 1:
-
Wikiの編集のためのページです。
+
<html><link rel="stylesheet" href="https://2008.igem.org/wiki/index.php?title=User:Maiko/chiba.css&action=raw&ctype=text/css" type="text/css" /></html>
 +
>[[Team:Chiba/Internal|戻る]]
 +
iGEM用Wikiの編集のための小技(?)&基本手順紹介ページです。
-
<style type="text/css">
 
-
<!--
 
-
ここにスタイルシートの内容
+
Wiki操作はだいたい*[http://ja.wikipedia.org/wiki/Wikipedia:%E7%B7%A8%E9%9B%86%E3%81%AE%E4%BB%95%E6%96%B9#.E7.94.BB.E5.83.8F.E3.83.BB.E9.9F.B3.E5.A3.B0.E3.83.BB.E5.8B.95.E7.94.BB wikipedia-Wikiの編集の仕方]を参照すればできますが、ちょっとした補足をこのページで行いたいと思います。
-
-->
+
どうやらiGEMのWikiは普通のWikiと違い、使えないタグなどもあるようです。
-
</style>
+
-
<html>
+
ここで紹介する入力例の最初の"<"は例として表示するために日本語入力の"<"になっています。
-
<head>
+
-
<title>TAG index Webサイト</title>
+
そのままコピペしても使えないのでご注意ください。
-
<style type="text/css">
 
-
<!--
 
-
h1 { color: red; }
+
==基本操作==
-
p { color: green; }
+
===みんなで編集しよう!===
 +
ユーザ名、パスワードを入力してログイン!
-
-->
+
あとは画面左上のeditボタンを押せば、Wiki編集スタートです!
-
</style>
+
-
</head>
+
書きたいことを入力し終わったら、まずはShow overviewボタンで完成図を確認。
-
<body>
+
-
<h1>この文字は赤になります</h1>
+
それで大丈夫そうなら、Save Pageボタンを押して編集完了!とっても簡単よ!
-
<p>この文字は緑になります</p>
 
-
<p>この文字も緑です</p>
 
-
<p>しつこいけどこの文字も緑です</p>
 
-
</body>  
+
===注意点===
-
</html>
+
*日本語入力をしない!
 +
::このページは日本語用ぺージ(と勝手に決めている)なので日本語を使っていますが、大会用のページには日本語入力はできません。
 +
::例えば℃を日本語の"℃"で入力すると、海外のPCでは文字化けが起こります。常に英語で"°C"と入力するように心がけましょう。
 +
::盲点として、数字や(かっこ)、および!マークなども要注意です!!
 +
*小文字を使う!
 +
::例えば"dH<sub>2</sub>O"。多少めんどうですが"dH<sub>2</sub>O"と入力すればすぐ表示されます。
 +
==基本技==
 +
===リンクバーの作り方===
 +
{| style="color:white(色);
 +
" cellpadding="3" cellspacing="3" border="0" width="100%(バーの幅)" align="center" class="menu" |
 +
!align="center"|(リンク先1)
 +
!align="center"|(リンク先2)
 +
!align="center"|(リンク先3)
 +
 +
|}
-
<font face="Arial">この部分のフォントを変更します</font>
+
と入力しています。特にChibaのWikiでは以下のようなものを使っています。
 +
{| style="color:white;" cellpadding="3" cellspacing="3" border="0" width="100%" align="center" class="menu" |
 +
!align="center"|[[Team:Chiba/j|ホーム]]
 +
!align="center"|[[Team:Chiba/Team/j|メンバー紹介]]
 +
!align="center"|[[Team:Chiba/Project/j|プロジェクト紹介]]
 +
!align="center"|[[Team:Chiba/Parts/j|作成したDNAパーツ]]
 +
!align="center"|[[Team:Chiba/Internal|ノート]]
 +
|}
-
<html>  
+
===テーブルの作り方===
-
<head>  
+
以下のように入力すると
-
<title>TAG index Webサイト</title>  
+
<table width="315" border="2" cellpadding="0" cellspacing="0" bordercolor="#000000"><tr>
 +
<td width="50">井山</td>
 +
<td width="257">Edinburgh 2006 </td>
 +
</tr>
 +
<tr>
 +
<td>杉山</td>
 +
<td>Mississippi state 2006 </td>
 +
</tr>
 +
<tr>
 +
<td>香取</td>
 +
<td>toronto 2006 </td>
 +
</tr>
 +
</table>
-
<style type="text/css">
 
-
<!--
 
-
p {
+
<table width="315" border="2" cellpadding="0" cellspacing="0" bordercolor="#000000">
-
font-size: 200%;
+
<tr>
-
font-weight: bold;
+
<td width="50">井山</td>
-
font-family: "MS P明朝","MS 明朝",serif;
+
<td width="257">Edinburgh 2006 </td>
-
}
+
</tr>
 +
<tr>
 +
<td>杉山</td>
 +
<td>Mississippi state 2006 </td>
 +
</tr>
 +
<tr>
 +
<td>香取</td>
 +
<td>toronto 2006 </td>
 +
</tr>
 +
</table>
-
-->
+
このように表示されます。便利なので実験ノートに使ってみてください。
-
</style>
+
-
</head>
 
-
<body>
 
-
<p>明朝体のフォント</p>
 
-
</body>  
+
===よく使ってるテーブル的な背景の作り方===
-
</html>
+
%の部分はテーブルやテーブルの隙間の幅のサイズを示しています。
 +
<table border=0 width="100%"><tr><td width="75%" valign="top">
 +
<div style="background:#aaaaaa;padding:3px;">
 +
左側コンテンツのタイトル
 +
</div><div style="background:#dddddd;padding:5px;">
 +
左側コンテンツの内容
 +
</div></td>
 +
<td width="1%">
 +
<!-- spacing --></td>
 +
<td width="24%" valign="top"><div style="background:#aaaaaa; padding:3px;">
 +
右側コンテンツのタイトル
 +
</div>
 +
<div style="background:#dddddd;padding:5px;">
 +
右側コンテンツの内容
 +
</div></td></tr></table>
 +
 
 +
===スタイルシート===
 +
Chiba2008のWikiは以下のスタイルシートで統一しています。
 +
ページを編集する際は、このスタイルシートをページの頭に貼り付けてから編集してください。
 +
<html><link rel="stylesheet" href="https://2008.igem.org/wiki/index.php?
 +
title=User:Maiko/chiba.css&action=raw&ctype=text/css" type="text/css" /></html>
 +
 
 +
 
 +
===簡易スタイルシート===
 +
あまり使わないとは思いますが一応紹介まで。
 +
 
 +
====スタイルシートの内容の一例====
 +
*文字の色を変える
 +
<html><head><style type="text/css">
 +
<!--
 +
h1 { color: red; }
 +
p { color: green; }
 +
-->
 +
</style></head><body>  
 +
<h1>この文字は赤になります</h1>
 +
<p>この文字は緑になります</p>
 +
<p>この文字も緑です</p>
 +
<p>しつこいけどこの文字も緑です</p>
 +
</body>
 +
</html>
 +
 
 +
 
 +
*文字のサイズを変える
 +
<html><head><style type="text/css">
 +
<!--
 +
p {font-size: 200%;
 +
font-weight: bold;
 +
font-family: "Century Gothic","MS 明朝",serif; }
 +
-->
 +
</style></head><body>
 +
<p>明朝体のフォントが出るはずなんですが…試した結果ここのWikiじゃだめみたいです。英語だけ変化しました。</p></body></html>
 +
 
 +
===カレンダー===
 +
{{#calendar: title=カレンダーの名前 |year=2008(表示したい西暦) | month=04(表示したい月)}}
 +
 
 +
ChibaのWikiで使っている以下のカレンダーはこのタイトル部分に"Team:Chiba/Calendar-Home"と入力したものです。
 +
 
 +
{{#calendar: title=Team:Chiba/Calendar-Home |year=2008 | month=04}}
 +
 
 +
 
 +
===カウントダウン===
 +
iGEMにはたくさんの重要な締め切りがあります!
 +
 
 +
忘れずに期限を守るためにもこのカウントダウン機能は有効です!
 +
 
 +
Wiki凍結(10/29)まで<html>
 +
<script type="text/javascript"><!--
 +
today = (new Date()).getTime();jamboree = new Date(2008, 9, 29, 23, 59, 59, 999);
 +
document.write('<b>' + Math.ceil((jamboree-today)/(1000*60*60*24)) + '</b>');
 +
// --></script></html>日<br>
 +
 
 +
これを表示させるには以下のような入力が必要になります。
 +
ちなみに期限が過ぎるとマイナス表示になります。
 +
 
 +
 
 +
Wiki凍結(10/29)まで<html>
 +
<script type="text/javascript"><!-- today = (new Date()).getTime();
 +
jamboree = new Date(2008, 9, 29, 23, 59, 59, 999);
 +
document.write('<b>' + Math.ceil((jamboree-today)/(1000*60*60*24)) + '</b>');
 +
// --></span>
 +
</html>日<br>

Latest revision as of 14:42, 14 December 2008

>戻る

iGEM用Wikiの編集のための小技(?)&基本手順紹介ページです。


Wiki操作はだいたい*wikipedia-Wikiの編集の仕方を参照すればできますが、ちょっとした補足をこのページで行いたいと思います。

どうやらiGEMのWikiは普通のWikiと違い、使えないタグなどもあるようです。


ここで紹介する入力例の最初の"<"は例として表示するために日本語入力の"<"になっています。

そのままコピペしても使えないのでご注意ください。


Contents

基本操作

みんなで編集しよう!

ユーザ名、パスワードを入力してログイン!

あとは画面左上のeditボタンを押せば、Wiki編集スタートです!

書きたいことを入力し終わったら、まずはShow overviewボタンで完成図を確認。

それで大丈夫そうなら、Save Pageボタンを押して編集完了!とっても簡単よ!


注意点

  • 日本語入力をしない!
このページは日本語用ぺージ(と勝手に決めている)なので日本語を使っていますが、大会用のページには日本語入力はできません。
例えば℃を日本語の"℃"で入力すると、海外のPCでは文字化けが起こります。常に英語で"°C"と入力するように心がけましょう。
盲点として、数字や(かっこ)、および!マークなども要注意です!!
  • 小文字を使う!
例えば"dH2O"。多少めんどうですが"dH<sub>2</sub>O"と入力すればすぐ表示されます。

基本技

リンクバーの作り方

{| style="color:white(色);
" cellpadding="3" cellspacing="3" border="0" width="100%(バーの幅)" align="center" class="menu" |
!align="center"|(リンク先1)
!align="center"|(リンク先2)
!align="center"|(リンク先3)
…
|}

と入力しています。特にChibaのWikiでは以下のようなものを使っています。

テーブルの作り方

以下のように入力すると

<table width="315" border="2" cellpadding="0" cellspacing="0" bordercolor="#000000"><tr>
<td width="50">井山</td>
<td width="257">Edinburgh 2006 </td>
</tr>
<tr>
<td>杉山</td>
<td>Mississippi state 2006 </td>
</tr>
<tr>
<td>香取</td>
<td>toronto 2006 </td>
</tr>
</table>


井山 Edinburgh 2006
杉山 Mississippi state 2006
香取 toronto 2006

このように表示されます。便利なので実験ノートに使ってみてください。


よく使ってるテーブル的な背景の作り方

%の部分はテーブルやテーブルの隙間の幅のサイズを示しています。

<table border=0 width="100%"><tr><td width="75%" valign="top">
<div style="background:#aaaaaa;padding:3px;">
左側コンテンツのタイトル
</div><div style="background:#dddddd;padding:5px;">
左側コンテンツの内容
</div></td>
<td width="1%">
<!-- spacing --></td>
<td width="24%" valign="top"><div style="background:#aaaaaa; padding:3px;">
右側コンテンツのタイトル
</div>
<div style="background:#dddddd;padding:5px;">
右側コンテンツの内容
</div></td></tr></table>

スタイルシート

Chiba2008のWikiは以下のスタイルシートで統一しています。 ページを編集する際は、このスタイルシートをページの頭に貼り付けてから編集してください。

<html><link rel="stylesheet" href="https://2008.igem.org/wiki/index.php?
title=User:Maiko/chiba.css&action=raw&ctype=text/css" type="text/css" /></html>


簡易スタイルシート

あまり使わないとは思いますが一応紹介まで。

スタイルシートの内容の一例

  • 文字の色を変える
<html><head><style type="text/css"> 
<!--
h1 { color: red; } 
p { color: green; } 
--> 
</style></head><body> 
<h1>この文字は赤になります</h1> 
<p>この文字は緑になります</p> 
<p>この文字も緑です</p> 
<p>しつこいけどこの文字も緑です</p> 
</body> 
</html>


  • 文字のサイズを変える
<html><head><style type="text/css"> 
<!-- 
p {font-size: 200%; 
font-weight: bold; 
font-family: "Century Gothic","MS 明朝",serif; } 
--> 
</style></head><body> 
<p>明朝体のフォントが出るはずなんですが…試した結果ここのWikiじゃだめみたいです。英語だけ変化しました。</p></body></html>

カレンダー

{{#calendar: title=カレンダーの名前 |year=2008(表示したい西暦) | month=04(表示したい月)}}

ChibaのWikiで使っている以下のカレンダーはこのタイトル部分に"Team:Chiba/Calendar-Home"と入力したものです。


April
MTWTFSS
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30


カウントダウン

iGEMにはたくさんの重要な締め切りがあります!

忘れずに期限を守るためにもこのカウントダウン機能は有効です!

Wiki凍結(10/29)まで

これを表示させるには以下のような入力が必要になります。 ちなみに期限が過ぎるとマイナス表示になります。


Wiki凍結(10/29)まで
 <script type="text/javascript"><!-- today = (new Date()).getTime();
 jamboree = new Date(2008, 9, 29, 23, 59, 59, 999);
 document.write('' + Math.ceil((jamboree-today)/(1000*60*60*24)) + '');
 // --></span>
 </html>日