wiki-kouza1 @ ウィキ

右メニュー

2010-05-26T19:31:30+09:00

#javascript(){

} **更新履歴 #recent(10) &link_editmenu2(text=ここを編集)

トップページ

2010-05-12T20:18:45+09:00

**Wikiで簡単HP講座にようこそ ***「ホームページを閲覧する」とはインターネット網を通じて、HTMLという書式で記述されたテキスト文書を、Webサーバーから取得し、これをWebクライアント（私たちのPCにインストールされているWebブラウザ）で、画面としてみることです。。ですので、自PC内でHTML文書を作成して、Webブラウザで表示させても同様にホームページとして、見ることが出来ます。 ***WikiとHTMLの関係従来、ホームページを作成して、公開する場合は、HTMLという書式に準じたテキストファイルを作成し、このファイルをWebサーバー内のハードディスク（記憶領域）に保存しなければならなかったため、最低限テキスト･エディタとFTPツールが必須でした。しかしWikiなどのCMS(Contents Management System)では、情報資源であるテキスト情報や画像ファイルなどを別個に保存し、アクセスがあった時に、WikiというプログラムがHTMLのタグなどを付与して返信してくることで、クライアントにはあたかも用意されたHTML文書を閲覧させているように振舞います。また、ほとんどのCMSはWebブラウザだけがあれば、追記や内容の編集などが手軽に行えます。下記のブログなどは、携帯電話からの電子メールでも更新作業が出来るものがあるほど、作業が簡単です。 Wikiのほかにも、代表的なCMSとして、Blog(ブログ)、Xoops(ズープス)、Plone(プローン)、Mixi(ミキシー)などが広く知られています。 ***Wikiとは何だろうか一言で言うと、「Wiki」は、Webサーバー上で動作するプログラムの一種です。このプログラムが、複雑なHTMLやCSSを自動的に生成して、ホームページとしての書式にしてくれているのです。また、その開発時の方針として、一般の閲覧者にもコンテンツの追記や編集が行える機能が盛り込まれましたが、設定を変更することで、ログインできる(パスワードを知らされている)人だけが、内容を変更できるようにも利用出来ます。この機能を利用して、お手軽にHPを作成し、公開していこうというのが、当講座の趣旨です。 ----- ***無料Wikiサービスの＠ウィキを使ってみよう無料でWikiのサービスを提供しているサイトの代表に、「＠ウィキ」があります。利用者も多く、手厚いサポート情報が用意されており、初心者にとっては、とても使いやすいサービスです。さらに、まっさらな「Wiki」にはない、入力支援用のプラグインや、様々な情報集約を自動で行うプラグインなどが用意され、より高度なHPを作成できるのも、うれしい配慮です。まずは、[[＠ウィキ>http://atwiki.jp/]]のサイトでアカウントを作成し、自分のWikiを作ってみましょう。 #html2(){

} この際に必要となる情報は、「ユーザー名」「メールアドレス」「パスワード」の３つです。あとはランダムに生成される画像を文字として読んで、最後に入力するだけです。 -「ご希望のURLを入力」の部分がそのまま「ユーザー名」となりますので、後に「ログイン」をする際にも、この情報は必要になります。すでに利用されているユーザー名は利用できませんので、いくつか候補を考えておくといいでしょう。 -「メールアドレス」は、実はアカウントをもらう時点ではあまり重要ではないのですが、後に新機能を実装したときや、メンテナンスなどの理由で、Wikiサービスを一時的に停止する際などに、＠ウィキからのお知らせが、ここに届くようになります。確認用に同じメアドを2度入力することになります。 -「パスワード」も、「ユーザー名」と同様に、後の編集作業をする際の「ログイン情報」として必要になります。こちらも確認用におなじパスワードを2度入力します。 -最後にランダム画像を読んで入力するのですが、これはアクセスしてきたクライアントを個別認証するためのもので、利用者側としては特に意味はありません。素直に読んで入力しましょう。読みづらい場合は、別の画像を生成させて、読み直してください。 ----- ***さっそくWikiを利用しよう無事に＠ウィキのアカウントがもらえますと、もうすでに一つのHPが自動的に作成され、インターネットに公開されました。 #html2(){{{

}}} すでに、少し手が入っていますが、上図のようなHPが表示されたと思います。しかし、このままですと、このページを閲覧に来た、一般の閲覧者にもこのページの内容が書き換えられてしまいます。これではHPとして不都合ですので、次に、初めにしなければならない設定変更をしていきます。 ----- ***＠ウィキの初期設定まずは画面右上の「ログイン」から、＠ウィキにログインします。ログイン画面に移動しますので、アカウントを取得した際に登録した、「ユーザー名」と「パスワード｣を入力します。右上の「ログイン」が｢ログアウト」に変わっていたら、ログインに成功です。次に、隣のボタン「設定｣をクリックします。すると、下図のような「基本設定変更」ページに移動しますので、赤い枠で囲まれた箇所のように、ラジオボタンを選択してください。 #html2(){{{

}}} 選択ができましたら、画面を下にスクロールさせて「設定変更」をクリックします。 #html2(){{{

}}} 次に、すでに作成済みのトップページやメニューなどを編集する権限を変更します。画面左上の方にある｢ページ一覧」をクリック。 #html2(){{{

}}} 「トップページ」「メニュー」「右メニュー｣の右のチェックボックスにチェックを入れて(その他、作成済みのページがあれば、それも含めて)、画面を下のほうにスクロール。 #html2(){{{

}}} 下図の赤い枠に囲まれたプルダウンメニューから「編集権限を管理者のみに変更」を選択し、その下の「設定変更」をクリックすれば、OKです。 #html2(){{{

}}} -----

案内地図

2010-05-12T20:15:20+09:00

グーグルマップで案内地図を作りました。 #image(http://www19.atwiki.jp/wiki-kouza1?cmd=upload&act=open&pageid=25&file=Map02.gif,width=350,title=地図Ver2,http://www19.atwiki.jp/wiki-kouza1?cmd=upload&act=open&pageid=25&file=Map02.gif,blank) #image(http://www19.atwiki.jp/wiki-kouza1?cmd=upload&act=open&pageid=25&file=sora018.jpg ,width=350,title=空画像,http://www19.atwiki.jp/wiki-kouza1?cmd=upload&act=open&pageid=25&file=sora018.jpg ,blank) #image(http://www19.atwiki.jp/wiki-kouza1?cmd=upload&act=open&pageid=25&file=wiki-kouza1.gif,width=350,http://www19.atwiki.jp/wiki-kouza1?cmd=upload&act=open&pageid=25&file=wiki-kouza1.gif,blank,left) ----

メニュー

2010-01-26T23:05:54+09:00

**メニュー -[[トップページ]] -[[ページのデザイン変更]] -[[HTML・CSSについて]] -[[リストを作る]] -[[Wikiの画面]] -[[新規ページ作成]] -[[スクリーンショットを張る]] -[[HPで利用できる画像]] -[[テーブルを作る]] -[[案内地図]] -[[新規ページ２]] -[[備忘録]] -[[CSSの一部変更]] -[[画像ページ]] -[[画像の縮小]] -[[サンプル・ソース]] -[[JavaScriptテスト>http://www19.atwiki.jp/wiki-kouza1/pub/js_test/]] ---- **色んなこと -[[グーグル･カレンダー]] -[[Q&A]] -[[ブログパーツetc]] -[[メニュー]] -[[右メニュー]] ---- **外部リンク -[[NPO法人いばらきIT普及協議会>>http://ibaraki-it.org]] ---- **リンク -[[@wiki>>http://atwiki.jp]] -[[@wikiご利用ガイド>>http://atwiki.jp/guide/]] -[[プラグイン紹介>プラグイン]] -[[まとめサイト作成支援ツール]] ---- **他のサービス -[[無料ホームページ作成>>http://atpages.jp]] -[[無料ブログ作成>>http://atword.jp]] -[[2ch型掲示板レンタル>>http://atchs.jp]] -[[無料掲示板レンタル>>http://atbbs.jp]] -[[お絵かきレンタル>>http://atpaint.jp/]] -[[無料ソーシャルプロフ>>http://sns.atfb.jp/]] // リンクを張るには "[" 2つで文字列を括ります。 // ">" の左側に文字、右側にURLを記述するとリンクになります //**更新履歴 //#recent(20) &link_editmenu(text=ここを編集)

テーブルを作る

2010-01-20T20:11:14+09:00

テーブルとは、いわゆる一覧表のことです。EXCELなどの表計算ソフトを利用したことのある方でしたら、すぐにピンと来ると思いますが、1行の中に一塊の関連付けられたデータが列挙され、それらが複数行ある、という構造のデータをまとめる際に利用されます。 ***テーブル構造 HTMLでこのテーブルを記述するのは、結構大変ですが、Wikiではとても簡単に記述できます。書式は以下のとおり。 #html2(){{{

【Wikiでの記述】
|項目１|データ１－１|データ１－２|
|項目２|データ２－１|データ２－２|
|項目３|データ３－１|データ３－２|

}}} 【出力】 |項目１|データ１－１|データ１－２| |項目２|データ２－１|データ２－２| |項目３|データ３－１|データ３－２| |氏名|性別|アドレス| |くらもち|♂|阿見町| といった具合で、「&color(red){|}(ヴァーティカル･バー)」を升目の仕切りに見立てて、EXCELでいうところのセルのような表示を得ることが出来ます。 ***見出しデータテーブルの利用法としては、名簿や集計データなどを記載することが多いのですが、そういったデータには、たいてい見出し行や見出しとなる項目があるものです。HTMLでもそのようなデータが入るセルは特別なタグをつけるのですが、Wikiでもそれを利用することが出来ます。 |~項目１|データ１－１|データ１－２| |~項目２|データ２－１|データ２－２| |~項目３|データ３－１|データ３－２| 左端の見出しデータだけが太字になっていることが分かると思います。この表示を得るには、Wikiでの記述は以下のようになります。 #html2(){{{

【Wikiでの記述】
|~項目１|データ１－１|データ１－２|
|~項目２|データ２－１|データ２－２|
|~項目３|データ３－１|データ３－２|

}}} ご覧のとおり、見出しデータの入るセルの「&color(red){|}」が「&color(red){|~}」に変わるだけです。 ***セルの結合また、EXCELでいうところの「セルの結合」もできます。 |>|>|データ一覧| |項目１|データ１－１|データ１－２| |~|データ２－１|データ２－２| |項目３|>|データ３－１| 横方向に結合させたいときには、左に位置するセルに「&color(red){>}(グレーターザン)」だけを記入すると、続くセルに結合されます。また、縦方向に結合させたい場合は、下に位置するセルに「&color(red){~}(チルダ)」だけを記入すると、上のセルに結合されます。 #html2(){{{

【Wikiでの記述】
|>|>|データ一覧|
|項目１|データ１－１|データ１－２|
|~|データ２－１|データ２－２|
|項目３|>|データ３－１|

}}} ただ、残念なことに、まだ上記の「見出しデータ」との併用には対応していないようです。単に升目のきり方を制御できるだけ、という利用法に限定されそうです。ちなみにHTMLで記述すると、細かい点が自由にレイアウトできます。 #html2(){{{

データ一覧
見出し１	データ１	データ２
	データ３	データ４
	データ５	データ６
見出し２	データ７

}}} ちなみにHTMLソースはこんな感じです。けっこう煩雑ですね。

データ一覧
見出し１	データ１	データ２
	データ３	データ４
	データ５	データ６
見出し２	データ７

----

サンプル・ソース

2010-01-06T18:55:30+09:00

***サンプル

画像の縮小

2009-12-10T16:47:09+09:00

Windows標準の「ペイント」を利用して、写真を縮小します。 1.対象となる写真ファイルをペイントで開く。 #image(http://www19.atwiki.jp/wiki-kouza1?cmd=upload&act=open&pageid=29&file=open.jpg,width=350,title=画像をペイントで開く,http://www19.atwiki.jp/wiki-kouza1?cmd=upload&act=open&pageid=29&file=open.jpg,blank,center) 2.｢変形」－「伸縮と傾き」をクリック。 #image(http://www19.atwiki.jp/wiki-kouza1?cmd=upload&act=open&pageid=29&file=sinshuku.jpg,width=350,title=変形ウインドウを開く,http://www19.atwiki.jp/wiki-kouza1?cmd=upload&act=open&pageid=29&file=sinshuku.jpg,center,blank) 3.「伸縮と傾き」ウインドウが開くので、伸縮率を％で指定する。縦横比を保ちたい場合は、同じ％を指定し、「OK」をクリック。 #image(http://www19.atwiki.jp/wiki-kouza1?cmd=upload&act=open&pageid=29&file=sinshuku_2.jpg,width=350,http://www19.atwiki.jp/wiki-kouza1?cmd=upload&act=open&pageid=29&file=sinshuku_2.jpg,blank,center,title=伸縮率を指定) 4.期待したとおりの、伸縮画像が得られたら、「ファイル」－「名前をつけて保存」。 #image(http://www19.atwiki.jp/wiki-kouza1?cmd=upload&act=open&pageid=29&file=save.jpg,width=350,title=ファイルに保存,http://www19.atwiki.jp/wiki-kouza1?cmd=upload&act=open&pageid=29&file=save.jpg,blank,center) -----

画像ページ

2009-11-11T19:51:14+09:00

インクスケープでPNG画像を作ってみました。 #image(http://www19.atwiki.jp/wiki-kouza1?cmd=upload&act=open&pageid=30&file=ami.png,width=400)

CSSの一部変更

2009-09-16T23:36:52+09:00

このWikiというシステムは、Webサーバー上で動作していますが、通常、編集画面に入力したテキスト情報と、ちょっとした記号を入れることで、HTML書式に整形して出力してくれます。同時に、「デザイン選択」で選択したデザインを、全てのページに適用してくれるのはよいのですが、時には、「一部だけ見栄えを変更したい」というケースもあるでしょう。そういった場合にも、Wikiというシステムは柔軟に対応できます。ただし、少々高度な知識も要求されます。 ***HTMLの書式 HTML文書は、基本的に、開始タグと終了タグとでテキストや画像を囲むことで(マークアップ）、その部分を「要素」という単位で把握し、その部分が、その文書全体の中でどのような役割、位置づけになるのか、という文書構造を定義するものです。

あいうえお

という具合に、開始タグには、「要素名」を記述し、終了タグには、「/要素名」を記述します。また、

あいうえお

などのように、開始タグには「要素名」に加えて「属性（ここではclass属性）」を記述することが出来ます。各要素の役割などについては、Wikiを利用している範囲においては、特に覚える必要はありません。編集画面のアイコンで「h2」を選んだり、「リスト」や「テーブル｣などを選んだりしていれば、概ねOKでしょう。 ***CSSの書式別ページでも触れましたが、CSSで見栄えを変更する場合は、どの部分を対象とするのか、を把握できないことには始まりません。それは上記の「要素」が単位となります。見栄えを変更したい要素を、CSSセレクタで捕まえるためには、その部分がどのようなタグでマークアップされているのか、セレクタに利用できるid属性などがついているのか、などを「ソースを表示」させて、確認する必要があります。他の部分にも同じようなタグが利用されていたり、特定のid属性やclass属性がつけられていない場合には、Wikiで記述する際に、次のような技が使えます。 #divid(style1){{{ あいうえお }}} という記述をすると、

あいうえお

というHTML出力が得られますので、「CSSカスタマイズ」に次のように追記することで、特定の場所(要素)だけの見栄えを変更することが出来ます。 div#style1{ color:red; } 上記のCSSでは、div要素にid属性がつけられていて、その値が「style1」であるものだけを対象とするセレクタを記述し、続く「{」と「}」の中に、color(文字色)をred(赤)に、してくれ、というプロパティを記述しています。同様にclass属性をつけたdiv要素も使えます。 #divclass(style2){{{ かきくけこ }}} とWikiで記述しておいて、CSSカスタマイズの方には、 div.style2{ color:blue; font-style:italic; } と記述することで、その部分だけを文字色を青にし、文字を斜体に変更することが出来ます。

備忘録

2009-09-16T19:05:17+09:00

ここに、学習の記録をとっていきます。 ***クリップボードから貼り付ける -「Crtl」＋「V」 ***クリップボードへコピー -「Ctrl」＋「C」 ***テキストの範囲指定 -「Shift」＋矢印キーあいうえお #html2(){{{

あいうえお

}}}