@Wikiを始めるために

一言コメント

2009-01-10T18:01:25+09:00

- IT道場の皆さん、お気軽に書きこんでください。 -- 倉持＠IT普及 (2007-09-08 21:05:58) - 広告がうざいねぇ。 -- 田村 (2007-09-09 06:18:37) - おはようございます。今朝見ました。 -- 水野　 (2007-09-10 09:31:44) - 遅くなりすみません。仕事が一段落したので、詳しく見ていきたいと思います。 -- 大塚 (2007-09-10 10:29:25) - 暇 -- sakyori (2007-09-10 15:53:38) - 皆さん、コメントありがとうございます。解説についても御評価を。 -- 倉持＠IT (2007-09-11 00:11:28) - 解説は、順番にやってける形でとてもいいとおもいますｂ -- 坂より (2007-09-11 01:22:27) - おお、嬉しいひとからコメントだぁ、ありがとう。 -- 倉持＠IT (2007-09-11 01:43:44) - 解説とは、何のことを言っているのですか？ -- 水野　洋 (2007-09-11 22:24:46) - 基本的に「ここだけの操作ですむのは」は楽だと思います。どの位の文字を一度に送れるのでしょうか？ -- 水野　洋 (2007-09-11 22:28:21) - 「何、何、これは何。」時間をかけてじっくりみたい。（昨夜少し、今日仕事休み。） -- 渡邊有子 (2007-09-12 12:35:17) - ＞渡邊さん、コメントありがとうございます。これがWikiという、CMSの一種です。ナイスなリアクション，嬉しいです。 -- 倉持＠IT (2007-09-13 11:39:02) - ＞水野さん、FTPなどで送信する必要はありません。入力フォームで書きこみます。 -- 倉持＠IT (2007-09-13 11:40:25) - 右の上のトップページを見ましたが、アカウント作成画面がありました。アカウントを作る必要はあるのですか？アカウントを作ったら、倉持さんが作ったようにＷＩＫＩを作ることになるのですか？このページをこのようにコメントを入れて使うんですよね？ -- mizuno (2007-09-15 22:32:14) - 今日はトップページを見てみます。 -- 水野　洋 (2007-09-15 22:33:03) - このページにあるものを実際に各地区の担当者が作ることになるのですね。 -- 水野　洋 (2007-09-15 22:38:27) - ＞水野さん：このサイトは，トップタイトルに示す通り、＠Wikiを利用してHPを構築する方法を、メニューの上から順を追って、示しています。 -- 倉持＠IT (2007-09-17 00:08:52) - ＞水野さん：よって、まずはアカウントを作成してください。そのあとは「トップページ」に記載している通りに行ってみてください。それで分からないことがあれば、御指摘下さい。よろしくお願いします。 -- 倉持＠IT (2007-09-17 00:12:49) 長文のご質問、御意見などは、[[メールフォーム]]にお願いいたします。 - bbs皆で見ています。 -- mizuno (2007-09-27 21:18:56) - ここの@Wikiは"@Wiki初心者ガイド"みたい(^_^) -- plqah (2009-01-10 18:01:25) #comment()

メールフォーム

2007-09-30T23:10:17+09:00

***メールフォーム長文のご質問、御意見などは、こちらでメール送信してください。管理者宛のEメールとして送信されます。 #mailform ---- #paint() ----

新規ページの作成

2007-09-20T21:15:55+09:00

***新しいページを作る Webサイトは、1枚だけでなく、複数のページ郡で構成されるのが通例です。そこで、Webサイトの入口であるトップページが一段落したら、より内容を充実させるべく、「新しいページ」を作成してみましょう。 #image(http://www39.atwiki.jp/ibaraki-it/pub/sum-wiki-menu.png,center,title=拡大画像,http://www39.atwiki.jp/ibaraki-it/pub/wiki-menu.png) まずはログインした状態で、「＠Wikiメニュー」ー「新しいページ」を選択すると、下図のような画面になります。 #image(http://www39.atwiki.jp/ibaraki-it/pub/sum-new-page.png,http://www39.atwiki.jp/ibaraki-it/pub/new-page.png,center,title=拡大画像) 1.の「ページ名」には、新規ページの内容にあった名前を入れておくとよいと思います。あとで「メニュー」の方に追記する名前にもなります。 2.は、特にいじる必要はありませんので、そのまま「新規ページ作成」をクリックすると、トップページの時と同様の「編集画面」が表示されますので、同様に内容を記述していきます。 ----

トップページ

2007-09-19T23:14:30+09:00

＊＊@wikiでアカウント作成 http://atwiki.jpにアクセスし、ユーザーアカウントを作成します。その際、まずは[[こちら>http://www33.atwiki.jp/atwikibeginner/]]に目を通しておいてください。 #image(center,http://www39.atwiki.jp/ibaraki-it/pub/sum-start.png,http://www39.atwiki.jp/ibaraki-it/pub/start.png,title=拡大画像) こちらで、&color(red){ユーザーID}と、HP担当者が受信できる&color(red){メールアドレス}、このWikiシステムにログインするための、&color(red){パスワード}を入力し、「利用規約に同意して登録」をクリックすると、登録したメールアドレス宛てに「認証メール」が送信されます。なお、これらの情報は、基本的に「&color(red){半角英数}」で記述してください。特に「ユーザーID」は、自分WikiのURLに反映される情報であるため、「空白文字」や「ドット」などは利用できませんので、注意してください。 ***認証メールユーザー登録が完了すると、@Wikiからメールが来ます。 #image(center,http://www39.atwiki.jp/ibaraki-it/pub/sum-@Wiki-mail-1.png,http://www39.atwiki.jp/ibaraki-it/pub/@Wiki-mail-1.png,title=拡大画像) このメールにある、「御利用までの流れ」の順に従い、クリックしていくと、認証が完了し、自分Wikiを利用できます。このメールには、今後Wikiシステムを利用してゆく上で、必要な情報が記載されていますので、別途テキスト・ファイルなどにして保存しておいてください。 ---- ***自分Wikiの初期状態ここまで来れば、あとは「[[＠Wikiガイド>http://www1.atwiki.jp/guide/]]」を読めば出来ます。というのもなんですので、とりあえず、導入部分を御紹介します。 #image(center,http://www39.atwiki.jp/ibaraki-it/pub/sum-top.png,http://www39.atwiki.jp/ibaraki-it/pub/top.png,title=拡大画像) こんな風に画像の張りつけも、リンクを張ることも出来ます。ただし、画像ファイルは、別途アップロードする必要がありますので、画像ファイルのアップロードには、多少の準備が必要になります。([[写真を載せる]]を参照) ---- ***ログイン画面認証メールで送られてきた，ログインのリンクをクリックすると、下記のようなページが表示されますので、ユーザーIDとパスワードを入力して、ログインしてください。 #image(center,http://www39.atwiki.jp/ibaraki-it/pub/sum-@Wiki-1.png,http://www39.atwiki.jp/ibaraki-it/pub/@Wiki-1.png,title=拡大画像) すると、管理者画面に移動します。 ---- ***管理者画面 #image(center,http://www39.atwiki.jp/ibaraki-it/pub/sum-after-login.png,http://www39.atwiki.jp/ibaraki-it/pub/after-login.png,title=拡大画像) こちらで、各種の設定を行うことになります。まずは「サイト名」をふさわしいものに変更してみましょう。左段組みの「基本設定」をクリックすると、右段組みの内容が、基本設定に関するものに変更されます。その中の最上段に「サイト名」がありますので、これを書き換えて、最下段にある「変更」をクリックすると、このサイトのトップタイトルが変更されます。 ----

新規ページをメニューに追加

2007-09-17T19:21:29+09:00

***Wikiのメニュー HTMLでは、別ページと相互リンクを張る場合、それぞれのページに、位置関係に即したリンクを記述しなければなりませんが、前述の通り、Wikiはページを構成するパーツを別々に保存していて、共通のパーツ(メニューやトップタイトルなど)は、同じ物を各ページに当てはめて表示させています。そのおかげで、各ページのメニュー・ブロックに表示されるパーツを１箇所だけ書き換えれば、全てのページのメニュー・ブロックに、それぞれ反映されるわけです。更新作業の軽減を念頭においた、CMSならではの便利さ、と言える機能ですね。では、早速新規に作成したページを、メニューに追加してみましょう。 ***管理者画面へ移動まずはログインし、&color(red){管理者画面}に移動します。そして管理者画面の左段組みの、7項目めほどにある、「&color(blue){メニュー選択・編集}」をクリックします。すると右段組みの内容が変更され、&color(blue){「メニュー」を編集するにはここをクリック}というリンクが表示されますので、これをクリックします。 ***編集画面ここからは、トップページや新規ページの編集と同様の編集画面になります。メニューの項目は、一般にリスト＋アンカーという構成でマークアップされることが推奨されているので、行頭に「-(マイナス)」を付けたリストの各項目を、「&html([[)」と「&html(]])」で囲むことでリンクを張っています。(テキスト整形のルール参照）また、リンクの内容もURLを記述する必要はなく、新規ページ作成時に付けた「&color(red){ページの名前}」をそのまま記述すれば、Wikiが自動的にリンクを張ってくれます。つまり、新規ページをメニューに登録するためには、次のような記述を追記することになります。 &html(

-[[新規ページ名]]

) これをメニューブロックの中の、適当と思われる位置に挿入するだけで、メニューへの登録は完了です。ちなにみ，当Wikiでは、下図のような記述になっています。 #image(http://www39.atwiki.jp/ibaraki-it/pub/sum-menu.png,center,title=拡大画像,http://www39.atwiki.jp/ibaraki-it/pub/menu.png) 最後に「&color(blue){ページ保存}」をクリックして、表示確認してみてください。 ----

CSSカスタマイズ

2007-09-17T19:11:23+09:00

**スタイルシート(CSS)を編集前述の[[テンプレートの利用]]では、＠Wikiが用意してくれているスタイルを適用して、見栄えを大幅に変更しました。更に細やかなスタイル設定をしたい場合には、CSSの知識を活用して、よりきめ細やかな見栄えの変更が出来ます。CSSの知識をお持ちの方は、是非チャレンジしてみてください。逆に、全くCSSを学習したことが無い方は、下準備を整えてから臨まれることをお薦めします。まずは、ログインし、&color(blue){＠Wikiメニュー}にある「&color(red){設定}」ボタンから「&color(red){管理画面}」に入ります。 ---- ***管理画面から「CSSカスタマイズ」を選択管理画面に移動しましたら、まずは「&color(red){CSSカスタマイズ}」をクリックします。 #image(http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/sum-css-custom.png,http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/css-custom.png,center,title=拡大画像) ---- ***基本デザインのCSSをクリック次いで、ページ上段の方にある、「&color(red){基本デザインのCSS}」をクリックします。 #image(http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/sum-DesigningCSS.png,http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/DesigningCSS.png,center,title=拡大画像) すると、現在適用されている「基本デザイン」のCSSが全て表示されます。 ---- ***現在のCSS情報をコピーここにあるCSS情報を(表示外にあるものもスクロールして)&color(red){全て選択}し、&color(red){コピー}します。 #image(http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/sum-CopyCSS.png,http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/CopyCSS.png,center,title=拡大画像) ---- ***ユーザー定義CSS欄にペーストページを戻して、&color(red){ユーザー定義CSS}の欄に、コピーしてきたCSS情報を&color(red){ペースト(貼りつけ)}します。 #image(http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/sum-PastCSS.png,http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/PastCSS.png,center,title=拡大画像) この際、「&color(red){基本デザインのCSSを無効化する}」にチェックを入れておいてください。 ---- ***変更を保存以上の手順が間違いなく完了したことを確認し、最下段にある「&color(red){変更}」をクリックして、変更を保存します。 #image(http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/sum-ChangeCSS.png,http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/ChangeCSS.png,center,title=拡大画像) 以上で、Wikiが自動的に挿入していたCSSは読み込まれなくなり、「ユーザー定義のCSS」が適用されるようになりました。あとは、CSSの知識を活用して、ユーザー定義CSSの内容を書き換えていけば、より自由なデザインを適用できます。 ---- ***カスタマイズの事例当解説サイトでは、h1要素(冒頭の「＠Wikiを始めるために」をマークアップしている)に対して適用されていた「color」プロパティを「black」に変更して，チョッと渋くしています。また、右段組みに表示されるメニュー・リストも、「li a」セレクタに対して、「color:white;display:block；」を施し、プロックレベル要素でホバーさせて、ホバー時に「color」と「border-color」を青くなるよう，変更しています。少々敷居の高いCSSではありますが、英単語アレルギーさえ無い方でしたら、ちょっとのルールを覚えるだけで、すぐに使えるようになります。機会を見て是非チャレンジしてみて下さい。 ----

表とリスト

2007-09-17T19:07:55+09:00

HPの世界では、よく「一覧表」形式になっているデータを見掛けます。また、「箇条書き」のようにデータを列挙する形式のデータも多用されます。 Wikiでもこれらを表現できる書式が用意されています。それぞれ御紹介しましょう。 ***一覧表(テーブル) HTMLを習得した人でも、HTMLでテーブルを組むのは、なかなか手間がかかるものですが、Wikiでは、とても簡単に記述することが出来ます。書式は非常に単純かつ視認性の高いもので、以下のようになります。 &html(

｜項目１｜項目１のデータ｜
｜項目２｜項目２のデータ｜

) と記述するだけで、以下のような一覧表が表示されます。 | 項目１ | 項目１のデータ | | 項目２ | 項目２のデータ | また、各セルのスタイルを設定するオプション指定も出来ます。詳しくは&color(blue){テキスト整形のルール}に解説されていますが、ここでは文字色と背景色を変更してみます。 |BGCOLOR(#333333):COLOR(white):項目１|COLOR(blue):項目１のデータ| |BGCOLOR(#333333):COLOR(white):項目２|COLOR(blue):項目２のデータ| #image(http://www39.atwiki.jp/ibaraki-it/pub/sum-table.png,center,title=拡大画像,http://www39.atwiki.jp/ibaraki-it/pub/table.png) コツとしては、セルの区切りを表す「&color(blue){|}(セパレータ)」のすぐ後に、オプションの「COLOR(blue):」などをくっつけて記述することでしょうか。スペースなどが入ってしまうと、不具合がでるようです。 ---- ***リスト HTMLでは3種類のリストが用意されています。Wikiでもこれら全てを表現できるのですが、ここではよく用いられる「&color(blue){箇条書きリスト}」と「&color(blue){連番つきリスト}」の2種類を表現してみましょう。 [[新規ページをメニューに追加]]でも少々触れていますが、箇条書きリストの書式は以下の通りです。 &html(

-リスト項目１
-リスト項目２
-リスト項目３

) と記述すると、以下のような表示になります。 -リスト項目１ -リスト項目２ -リスト項目３連番型リストは、上記の「−(マイナス)」を「+(プラス)」にするだけで、 &html(

+リスト項目１
+リスト項目２
+リスト項目３

) と記述すれば、 +リスト項目１ +リスト項目２ +リスト項目３のように，リスト項目に連番を振ったリストが構成されます。 ----

写真を載せる

2007-09-17T18:58:06+09:00

**@Wikiに写真を載せる HPは、概ねテキスト(文字)と画像で構成されています。写真好きな方は、HPに自前のデジカメ画像などを張り付け、多くの人に見て欲しいと思われることでしょう。また、当サイトのような解説サイトでは、スクリーンショット画像も多用しますし、案内地図や、記念写真など、画像なくしては、要を得ないケースも少なくありません。このような場合には、&color(blue){画像ファイルをアップロード}し、それをWikiに&color(blue){読み込ませるよう記述}する必要があります。 ---- ***画像ファイルについてまず、HPの世界で標準的に扱える画像ファイルのタイプを把握する必要があります。HPの世界では、よくデジカメなどで作成される&color(blue){JPEG画像（拡張子は.jpgまたは.jpeg)}、案内図・イラストなど色数の少ない画像に用いられる&color(blue){GIF画像(.gif)}、GIFの代替として開発された&color(blue){PNG画像(.png)}の3種類です。もしファイル・タイプがこれらのものでない場合は、GIMPなどの画像編集ツールを利用して、加工する必要があります。また、画像のサイズを揃えるなどの下準備もこのGIMPで行うことが出来ます。 GIMPは無償で利用できますが、少々慣れが必要です。ネット上に多くの情報が提供されていますので、御興味のある方は、検索エンジンなどで調べてみてください。もちろん、デジカメにバンドルされてくるようなソフトでも結構ですし、プロ仕様のPhotoShopなどをお持ちの方は、それらでも同じことが出来ます。 ---- **画像のアップロード＠Wikiでは、画像のアップロード法を2通り用意してくれています。一つめは、FTPツールを用いないで行う方法。二つ目が、FTPツールを用いる方法です。 ***FTPツールを用いない方法まずは、簡易に行うことのできる「&color(blue){FTPツールを用いない方法}」を御紹介します。こちらは、1ファイルずつしかアップロードできないという欠点があるのですが、非常に気軽に行うことが出来ます。操作としては、「&color(blue){ログイン}」して、「&color(blue){＠Wikiメニュー}」の中の「&color(blue){編集}」ー「&color(blue){このページにファイルをアップロード}」を選択すると表示される画面から、「&color(blue){参照}」をクリックして、御自分のPCの中に保存されている画像ファイルを指定します。 #image(sum-upload.png,center,http://www39.atwiki.jp/ibaraki-it/pub/upload.png,title=拡大画像) アップロードする画像ファイルが指定できましたら、「&color(blue){アップロード}」をクリックして、作業は完了です。この方法は、とても気軽にアップロードを行うことが出来ます。 #image(sum-upload2.png,center,http://www39.atwiki.jp/ibaraki-it/pub/upload2.png,title=拡大画像) ***FTPツールを用いる場合こちらの方法は、少々面倒な準備が必要ですが、複数のファイルを一括してアップロードできるという利点があります。HP上で画像を多用したいような場合には、こちらの方法の方が、作業効率の上で有利です。多くの方はWinodowsマシンを御利用になっていることと思います。WindowsのFTPツールとしては、よく利用される「[[FFFTP>http://www2.biglobe.ne.jp/~sota/ffftp.html]]」や、無償のWebブラウザとして有名な、Firefoxのプラグインとして利用できる「[[FireFTP>http://norahmodel.exblog.jp/1405872/]]」などが、定番ツールとしてお薦めです。詳細は各サイトを御覧頂くとして、&color(blue){FTPアカウントの設定}を御紹介します。私の利用しているFireFTPの場合は、下図のように設定しています。 #image(http://www39.atwiki.jp/ibaraki-it/pub/ftp-accounts.png,center,title=FireFTPでのアカウント設定) 「&color(blue){Account Name}」には、何でもよいのですが、&color(red){分かり易い日本語}を入力し、この＠WikiのFTPアカウントであることが分かるような名前をつければよいでしょう。「&color(blue){Host}」には&color(red){URLの中のホスト+ドメイン部(http://を除いた「www.○○.jp」など）}、「&color(blue){Login}」には&color(red){＠Wikiのユーザー名}、「&color(blue){Password}」には&color(red){＠Wikiのログインパスワード}を設定し、「OK」をクリックします。 ---- ***アップロード後の画像ファイル一つめの「このページにファイルをアップロード」の方法でアップロードした場合は、その時に表示していたページと同じディレクトリ内に、画像ファイルは格納されたように扱われます(詳細には触れません)。これに対して、２つ目の「FTPツールを用いて画像ファイルをアップロード」すると、「自分WikiのURL/pub」の中に，画像ファイルは格納されます。よって、アップロード法によって、記述する画像へのパスは異なりますので、注意が必要です。詳しくは後述します。なお、いずれの方法であれ、HPで利用するファイルは、全て「半角英数文字」のファイル名で保存し、アップロードするように注意してください。ひらがなや漢字をはじめ、「半角カタカナ」を含む、あらゆる「2バイト文字」および「空白文字」は御法度ですので、&color(red){IMEを終了させて「名前を付けて保存」}されるよう、お薦めします。 ---- ***いよいよ画像の張りつけ以上で準備は整いましたので、画像を張り付けるための記述を追加します。書式は、 -「FTPツールを用いない場合」&html(

#image（画像ファイル名）

) #image(sum-image-edit2.png,title=拡大画像,center,http://www39.atwiki.jp/ibaraki-it/pub/image-edit2.png) -「FTPツールを用る場合」&html(

#image（（http：//から始まる）自分WikiのURL/pub/画像ファイル名）

) #image(http://www39.atwiki.jp/ibaraki-it/pub/sum-image-edit.png,http://www39.atwiki.jp/ibaraki-it/pub/image-edit.png,title=拡大画像,center) ちなみに、この場合の、当Wikiの画像パスは、「&html(http://www39.atwiki.jp/ibaraki-it/pub/画像ファイル名)」となっています。更にこの画像にリンクを設定したい場合には、「画像ファイル名」の後に「,(カンマ)」をいれて、リンク先のURLを列記します。 &html(

#image（（パスつき）画像ファイル名,リンク先URL）) とします。更に、この画像のレイアウトの指定、マウスが乗ったときに表示するツールチップなどをオプションで指定できます。詳しくは、[[こちら>http://www1.atwiki.jp/guide/pages/265.html#id_1a6e334f]]をご参照下さい。 ----

トップページの書き換え

2007-09-17T18:41:37+09:00

**トップページを書き換える今度は、＠Wikiの初期状態を変更し、それぞれが発信したい情報を追記していきます。まずは、先の管理者画面の左段組みの中に、&color(blue){「トップページ選択・編集」}がありますので、これをクリックします。すると、右段組みの内容が変更され、&color(blue){「トップページ」を編集するにはここをクリック}というリンクが表示されます。これをクリックすると、下記のような入力フォームが表示されますので、まずは、このフォームの中を全て選択して、削除します。 #image(center,http://www39.atwiki.jp/ibaraki-it/pub/sum-edit.png,http://www39.atwiki.jp/ibaraki-it/pub/edit.png,title=拡大画像) この状態で「ページ保存」をクリックすると、それまで表示されていたトップページがまっさらになりますので、とりあえず「ようこそ○○のHPへ」と記述し、最後に「改行」を入れて、「ページ保存」してみてください。 #image(center,http://www39.atwiki.jp/ibaraki-it/pub/sum-welcom.png,http://www39.atwiki.jp/ibaraki-it/pub/welcom.png,title=拡大画像) 下図は、「ページ保存」ではなく、「プレビュー」した場合ですが、入力したテキストが、HP上で表示されているのが分かると思います。 #image(center,http://www39.atwiki.jp/ibaraki-it/pub/sum-welcom2.png,http://www39.atwiki.jp/ibaraki-it/pub/welcom2.png,title=拡大画像) このように、この入力フォーム内に文字を記述し、「ページ保存」するだけで「HPの更新」が「完了」することができるのが、Wikiシステムの便利さだといえます。また、見出しを付けたり、リストを構成したりする場合は、この「編集画面」の下の方に、「テキスト整形のルール」が解説されています。是非目を通しておいてください。 ----

メニュー

2007-09-17T00:28:30+09:00

#right(){&color(white){カウンタ：&counter()}} ***Menu -[[トップページ]] -[[はじめにやること]] -[[トップページの書き換え]] -[[見出しと段落]] -[[写真を載せる]] -[[表とリスト]] -[[テンプレートの利用]] -[[CSSカスタマイズ]] -[[新規ページの作成]] -[[新規ページをメニューに追加]] ---- -[[小ネタ]] ---- ***プラグイン・テスト -[[ブログ・フィード]] -[[一言コメント]] -[[メールフォーム]] ---- ***＠Wiki関連 -[[@ウィキガイド>http://atwiki.jp/guide/]] -[[@wiki 便利ツール >http://atwiki.jp/tools/]] -[[@wiki>http://atwiki.jp]] ---- **更新履歴 #recent(20)