3.編集

 

3-0.ページのタイトルについて
ファルダわけについて

NOTAではページの一番上に位置するテキストが自動的にタイトルに設定されます。

もし複数行にわたっている場合には、一行目のみがタイトルになります。
ページのタイトルを変更したい場合には、ページの一番上にあるテキストの一行目を変更して下さい。

右メニューにフォルダを追加できます。追加方法としては、
[任意のフォルダ名]任意の タイトル
とすると、自動でフォルダに格納されます。また、[任意のフォルダ名]の部分を消すと自動でフォルダも消えます。
フォルダ機能

3-1.NOTAでのページ編集

NOTAでは、今までのホームページ作成のようにローカルのパソコン上でHTMLファイルを作成・編集し、完成したHTMLファイルをWebサーバーにアップロードするというような、煩雑かつ初心者には難しい作業は一切必要ありません。

ホームページの作成・更新作業を行いたいときには、普段使い慣れたWebブラウザで自分のNOTAホームページに訪れ、その場で編集できます。しかもその編集方法も、複雑なHTMLによるマークアップではなく、ワープロソフトでの編集のように、好きな位置に文字や画像をそのまま入力していく、直感的で分かりやすいものとなっています。

さらにNOTAではキーボードによる文字の入力や画像・ファイルの貼り付けだけでなく、手書き線をページに記入することも可能です。みんなに注目して欲しい部分に手書きで印をつけるなど、ホームページをまるでキャンバスのように使用することが出来ます。

また、NOTAはホームページの管理人だけでなく、ユーザーアカウントを持っている人であれば誰でもページを編集できますので、複数人で共同して作業する場合にも大変役に立ちます。もちろん通常のWebページ同様、管理人以外はそのページを編集出来ないように設定することも可能です(詳細は後ほど解説します)。

3-2.編集と閲覧の切り替え

「閲覧画面」から「編集画面」に切り替えるには、ツールバーの「編集開始」ボタンを押します。

「編集へ」ボタンを押す

パスワードの入力ダイアログが表示されますので、サイトの管理者から発行されたユーザー名とパスワードを入力して下さい。

3-3.編集画面解説

以下の画面がNOTAでの「編集画面」です。
編集画面は、画面上部の「ツールバー」、画面右の「一覧」、そして画面中央の「ページ本文」、以上の領域から構成されます。

NOTAの編集画面

以下に編集画面の各領域について、簡単に解説します(詳細は各機能の解説で述べます)。

「ツールバー」

 「移動」ツール  
画像などのオブジェクトを移動するために使用します。
このツールが選択されていると、ツールバー下部に「貼付け」が表示されます。
編集画面に切り替えた直後は、このツールを選択した状態になります。
 「ペン」ツール
手書き線の入力を行うために使用します。
このツールが選択されていると、ツールバー下部に「色」「太さ」が表示されます。
 「消しゴム」ツール  
手書き線を消すのに使用します。
 「図形」ツール  
丸・三角・四角・星型など、多彩な図形を描画する際に使用します。
このツールが選択されていると、ツールバー下部に「色」と図形の選択メニューが表示されます。
 「文字」ツール  
文字を入力する際に使用します。

「一覧」

ページやアカウントの管理、画像・ファイル・プラグインの貼り付け、全ページを対象にした検索などを行います。

「ページ本文」

編集領域です。ここに文字を入力したり、手書き線を入力していきます。

3-4.新規ページの作成と既存ページの編集

NOTAでの新規ページの作成方法は2種類あります。

  • 画面上部のツールバーにある「新しい紙」ボタンから作成する方法
  • 既存のページから、リンク機能を利用して作成する方法

「新規」ボタンから作成した場合には、暫定的にページのタイトルは「新規ページ(作成日)」となりますが、既存ページからリンク機能を利用して作成した場合には、作成時に範囲選択した文字がタイトルになります(もちろん、どちらも後から変更可能です)。

既存ページからの新規ページ作成方法は、「3-12-2.リンクからの新規ページ作成」において詳しく解説します。

既存ページを編集する場合には、画面右の「一覧」から編集したいページを選択して下さい。

3-5.文字入力

それでは実際にページを編集してみましょう。まず始めは、ページに文字を入力する方法です。

3-5-1.基本操作

  1. ツールバーから「文字ツール」を選択します。
  2. 文字を入力したい場所をクリックして、文字領域を作成します。
  3. キーボードから好きな文章を入力します。もちろん複数行の文章も入力可能です。

どんな長い文章でも入力できる

なお、NOTAはユニコードに対応していますので、ドイツ語などの入力もできます。

また、文字入力欄の横幅は、右下のサイズ調整つまみをドラッグすることで自由に変更可能です。縦幅は文字入力とともに自動的に伸びていきます。

「サイズ調整つまみ」

3-5-2.文字サイズと文字色の変更

次に、入力した文字のサイズと文字色を変更する方法を解説します。

  1. 文字サイズと文字色を変更したい部分を範囲選択します。
  2. マウスカーソルをツールバー下部の「大きさ」にあわせると、自動的に文字サイズを選択するメニューが表示されますので、好きなサイズを選択します
    (デフォルトの文字サイズは「16」ですので、文字を小さくしたいときには「10」「12」「14」を、文字を大きくしたいときには「18」から「48」の間のどれかを選択して下さい)。
  3. 引き続き文字を範囲選択した状態で、ツールバー下部の「色」にマウスカーソルをあわせると、自動的に色の選択パレットが表示されますので、好きな色を選択します。

文字色を変更した状態

なお、文字のサイズや色は一文字単位で設定できますので、文章の中の特定の単語を強調したいときに非常に役に立ちます。

3-5-3.背景色の設定

NOTAでは文字入力欄の背景色も設定可能です。
文字サイズや色の指定と組み合わせれば、簡単に見やすいページを作成できます。

設定方法は、文字を範囲選択していない状態で、上部バーから「色」を選択するだけです。

背景色を設定した状態

範囲選択した状態で色を変更すると文字色の変更になりますので、注意してください。

3-6.図形

3-6-1.図形の挿入と変形

次に図形の挿入方法を解説します。

  1. ツールバーから「図形ツール」を選択します。
    マウスカーソルが図形挿入カーソルに変更され、ツールバー下部に「色」と挿入可能な図形の種類が表示されます。
    図形種類選択メニュー
  2. 図形の種類を選択してから、貼り付けたい位置をクリックします。

図形を貼り付けると、ツールバー下部に「色」「透」「切取り」「コピー」「貼付け」が表示されます。

「色」は文字色の変更と同じように、図形の塗りつぶし色を変更します。
「透」は図形を透過表示させるために使用します(詳しくは「3-6-2.図形の色と透明効果」で解説します)。
「切取り」「コピー」「貼付け」は、それぞれ現在選択している図形を「切り取り」「コピー」「貼り付け」るときに使用します。

挿入された図形は最初、青い色で塗りつぶされた、縦横約100ピクセルの大きさのものになります。
図形の右下にある「サイズ調整つまみ」をドラッグすることで、図形の大きさを自由に変更することができます(縦横比を維持したサイズ変更を行いたいときには、Shiftキーを押しながら「サイズ調整つまみ」をドラッグします)。

また、「サイズ調整つまみ」のさらに右下にある「角度変更つまみ」をマウスでドラッグすると、図形の大きさはそのままで、左上の位置を中心に回転します。

「角度調整つまみ」から図形を回転

3-6-2.図形の色と透明効果

挿入した図形の色を変更するには、ツールバー下部の「色」にマウスカーソルをあわせ、表示されたカラーパレットから選択します。

「色」の横にある「透」をクリックすると、図形は透過表示します。

透過表示を有効にした図形の色は指定した色よりも薄くなり、他の図形や画像と重ねた時に、下の部品の色が透けて見えるようになります。
「文字ツール」から入力した文字と図形を重ねたときに文字が見にくいと感じたときには、透過表示を有効にしてみて下さい。

透過表示ON/OFFのの比較

3-7.画像・ファイルの貼り付け

3-7-1.画像の貼り付けとサイズ変更・回転

次に、NOTAのページ上に画像を貼り付ける方法を解説します。

  1. 画面右の「貼る」タブを選択して、「参照」ボタンを押します。。
  2. 「ファイルの選択」ダイアログが表示されますので、ページに貼り付けたい画像ファイルを選択します。
  3. 「参照」ボタンの左側に貼り付けたファイルのパスが表示されますので、確認後「貼り付け」ボタンを押します。

画像やファイルの貼り付け

NOTAに貼り付けられた画像は自動的にJPEG形式で圧縮され、幅700ピクセル、50KB前後のサイズになります。しかしディスプレイ上では元画像との差はほとんど分かりません。
もっと美しく見せたいときには、「高精細」というチェックボックスを有効にしてから「貼り付け」ボタンを押して下さい。高精細で貼り付けられた画像は、幅1000ピクセル、200KB前後のサイズになります。
デジタルカメラで撮影した風景写真などを貼り付ける時には「高精細」を有効にしたほうがよいでしょう
なお、350x350以下の小さな画像の場合にはJPEGの画質100で保存して、画質を向上させます。

対応画像ファイルは、JPEG, PNG, TIFF, BMP, PICT形式のファイルで、アニメーションGIF, 透過GIF, 透過PNG形式は非対応です。

貼り付けた画像の大きさを変更するには、図形や文字領域の大きさ変更と同様、右下の「サイズ調節つまみ」をマウスでドラッグして行います。
元画像の縦横比を維持してのサイズ変更を行いたいときには、Shiftキーを押しながらドラッグするか、画像の左上と右下の対角線上にマウスをドラッグして下さい。縦横比を維持した位置の時にはマウスカーソルが吸着したような動作をします。

画像のサイズを変更

なお、上部バーの「透過」を押すと、図形の場合と同様、透過表示させることができます。

3-7-2.ファイルの貼り付け

NOTAでは、貼り付けるファイルとして画像ファイル(Jpeg,PNG,TIFF,GIF など)が選択された場合にはページ上にそのままイメージとして貼り付けられますが、画像以外のファイル(PDF,Doc、xls など)が選択された場合には、ファイル名付きのアイコンとして貼り付けられます。

貼り付けたファイルの種類によって、表示されるアイコンが異なります。
ファイルの種類とアイコンの対応は以下となります。

ファイルタイプ別アイコン一覧
Word/リッチテキスト Excel/CSV PowerPoint 一太郎
HTML PDF 圧縮ファイル全般 その他

なお、Flashファイル(swf)の場合には、アイコンとして貼り付けられるのではなく、画像と同様、ページ内に埋め込まれます。
そのため、NOTAではFlashを利用した動きのあるページを作成することもできます。
Flash表示用のHTMLファイルを別途作成する必要はありませんので、自分で作成したFlashムービーを完成後すぐにインターネットへ公開することが可能です。

3-8.画像の切り抜き

NOTAでは、画像編集ソフトを使用しなくても、貼り付けた画像を切り抜くことができます。
切り抜ける形は、「図形ツール」で挿入できる形と同じです(ただし、矢印形は選択できません)。

  1. 切り抜きたい画像を「移動ツール」で選択します。
  2. ツールバー下部の「型抜き」にマウスカーソルをあわせると、自動的に切り抜く形を選択するメニューが表示されますので、好きな形を選択します。

切り抜かれた画像

3-9.手書き線と消しゴム

3-9-1.手書き線の入力方法

NOTAの特徴のひとつに、手書き線の入力機能があります。

画用紙にペンで絵を描くように、ページ内の好きな位置に、好きな色・太さで手書き線を書くことができ、もし書き間違えたときでも「消しゴムツール」を使って一部分だけを消すこともできます。
ペンタブレットを持っている方ならば、ホームページ上で簡単な絵を描くことも出来るでしょう。

  1. ツールバーから「ペンツール」を選択します。マウスカーソルがペンに変更されます。
  2. ツールバー上部の「色」から好きな色を選択し、「太さ」からペンの太さを選択します。
  3. 好きな位置にマウスやペンタブレットで入力します。

手書き線の入力

ペンの先端部分が入力位置になります。他の色や太さに変更したい場合には、その都度ツールバーの「色」「太さ」から選択して下さい。

3-9-2.消しゴムツールでの消去方法

入力した手書き線を消去したいときには「消しゴムツール」を使用します。

  1. ツールバーから「消しゴムツール」を選択します。マウスカーソルが「消しゴム」に変更されます。
  2. 消去したい手書き線の上をマウスでドラッグします。

手書き線の消去

なお、「消しゴムツール」を選択している状態のときに画像や図形の上でドラッグ操作をすると、画面上ではそれらも消去されて表示されますが、実際には消去されません。「消しゴムツール」で消去できるのは「ペンツール」による手書き線だけです

3-10.プラグインと挿し絵

NOTAには、ページに様々な機能を追加する「プラグイン機能」と、挿し絵(クリップアート集)が用意されています。
現在、NOTAには「アクセスカウンター」「簡易掲示板」「ツールバー色変更」「Webカメラ窓」プラグインが搭載されています。

プラグインをページに挿入する方法は以下になります。

  1. 画面右側の「一覧」で「貼る」タブを選択します。
  2. 「NOTAプラグイン」欄から貼り付けたいプラグインを選択します。

「簡易掲示板」プラグインでは、管理者権限のユーザーのみが発言の削除を行うことができます。
特定の発言を削除する場合には、名前の右横に表示されている「×」印部分をマウスで押します。

掲示板プラグイン

挿し絵(クリップアート集)をページに挿入する方法は以下になります。

  1. 画面右側の「一覧」で、「挿し絵」タブをマウスで選択します。
  2. 「NOTA素材画像」欄に種類が表示されていますので、種類を選択します。
  3. 画像がサムネイル表示されますので、ページに挿入したいものをマウスで選択します。

貼り付けられた部品は、図形や画像と同じように、左上の「移動つまみ」から好きな位置に移動出来ます。
挿し絵は画像としてページに貼り付けられますので、縦横比を維持したサイズ変更も可能です。

3-11.部品(オブジェクト)の操作

ここでは、これまでに解説した「文字入力領域」「図形」「画像・ファイル」「プラグイン・挿し絵」などの各部品(オブジェクト)でどのような操作が可能なのか、操作の種類ごとに解説します。これまでに解説した内容と重複する部分もありますが、確認の意味でもご覧下さい。

3-11-1.削除・移動・サイズ変更・回転

移動と削除はどの部品においても実行可能です。

部品を移動するには、部品選択時に左上に表示されている「移動」部分をマウスでドラッグします(画像・図形・プラグインでは、各部品本体のドラッグ操作でも移動可能です)。削除するには、右上に表示されている赤い「×」印をマウスでクリックします。

移動つまみ、削除ボタン

誤って部品を削除してしまった場合には、ツールバーの「取り消し」ボタンを押して下さい。
「取り消し」ボタンを押すたびに、実行した操作がひとつずつ取り消されていきます(ただし、他のページに移動した場合には、移動前のページの操作を取り消すことはできません)。
取り消した操作を復帰したい場合には、同じくツールバーの「取り消しを戻す」ボタンを押します。

サイズ変更と回転は、画像・挿絵・図形で可能です。文字領域・ファイルアイコン・プラグインではできません。
尚、画像・挿し絵・図形では、Shiftキーを押しながら「サイズ調整つまみ」をドラッグすることで、縦横比を維持したサイズ変更が可能です。

3-11-2.色の指定と部品の重なり順

色は「文字入力領域」「図形」においてのみ設定が可能です。
図形では塗りつぶし色を、文字入力領域では文字色と背景色を設定できます。
また、「図形」と「画像」「挿し絵」には「透明効果」をつける事も出来ます。

透明効果が有効にされた部品は薄い色で表示され、その部品の下に重ねられている部品を透過表示するようになります。
設定方法は、どちらもツールバーの「色」「透」から行います。

異なる部品を何層にも上下に重ねることも出来ますが、より面積の小さい部品が上に表示されます。

3-11-3.コピー・切り取り・貼り付け

コピー・切り取り・貼り付け操作は、全ての部品で可能です。
操作方法も共通で、部品を選択した状態でツールバー下部の「切取り」を押すと「切り取り」、「コピー」を押すと「コピー」となり、「貼付け」を押すと「貼り付け」となります。

ただし注意して欲しいのは、「貼付け」による貼り付けは、NOTAのページ内において「切取り」または「コピー」を押してコピーされた部品を貼り付ける機能であり、パソコンのクリップボードに格納されたデータを貼り付けるものではありません
「切取り」「コピー」によってコピーされた部品の情報はNOTAの中に記憶されますので、パソコンを終了させても消えません。次回編集時に「貼付け」を押すと、前回コピーしておいた部品が貼り付けられます。

3-11-4.画像・ファイルの表示とダウンロード

ページに貼り付けた画像やファイルをアップロード時の元サイズで単独表示させたり、パソコンへダウンロードすることも出来ます。

ファイルは、アイコンをダブルクリックすることで表示又はアイコン内のフロッピーマークをクリックすることでダウンロードになります。
ダウンロード時のファイルアイコン

画像に関しては、編集モードに移行してから操作する必要があります。

  1. 編集画面にログインします。
  2. 移動ツールで画像を選択します。
  3. ツールバー下部の「開く」を押すと貼り付け時のサイズで新規ウィンドウ表示、「保存」を押すとダウンロードします。

NOTAにおいて「リンク」機能は重要な意味を持っています。
インターネットが普及したのは、異なるリソース間を結びつけるリンク機能があったためとも考えられますが、これまでのHTMLでのリンク作成はタグによるマークアップが必要で、HTMLについての知識がない全くのパソコン初心者が行うにはいささか敷居が高く、操作も直感的ではありませんでした。
そこで、NOTAはリンクの作成・修正を誰もが簡単、かつ直感的に行えるように作られています。

NOTAでのリンクの設定方法は以下です。

  1. リンクを設定したいテキストをマウスで範囲選択します。
  2. ツールバー下部の「リンク」にマウスカーソルをあわせると、自動的にリンク設定メニュが表示されます。
  3. NOTAサイト内のページへのリンクを設定したい場合には、リストからページを選択します。
     外部のページへリンクを貼りたい場合には、「外部のURL」欄にアドレスを入力します。

リンク先を選択、またはURLを入力

なお、文字を範囲選択していない状態で、「リンク」からページを選ぶと、カーソル位置にページタイトルが挿入され、そのページに対するリンクを貼ることができます。

リンクを解除したい場合には、テキストを範囲選択してからツールバー下部の「リンク」より、「【リンクを解除】」を選択します。
リンク先を修正する場合にも、テキストを範囲選択してからツールバー下部の「リンク」より、リンク先を再指定するだけとなっています。

3-4.新規ページの作成と既存ページの編集」において、画面右の「一覧」から新規ページを作成する方法を解説しました。
しかし新規ページの作成方法には、もう1つ、リンクから作成する方法もあります。

「一覧」から作成した新規ページでは、ページのタイトルは常に「新規ページ(作成日)」となりますが、リンク機能から作成したページでは、そのページへのリンクを設定したテキストの内容が自動的にページタイトルに設定されます。

また、もうひとつの大きな特徴として、リンク機能から作成した新規ページでは自動的に作成元ページへのリンクが「リンク元へ戻る」として作成されます。つまり、設定元ページから設定先ページへの一方向リンクの作成だけでなく、自動的に相互リンクが作成されるのです。

リンクからの新規ページ作成方法は以下となります。

  1. リンクを設定したいテキストをマウスで範囲選択します。
  2. ツールバー下部の「リンク」にマウスカーソルをあわせると、自動的にリンク設定メニュが表示されますので、「【新規ページを作成】」を選択します。

範囲選択したテキストをタイトルにもつ新規ページが作成され、「リンク元へ戻る」には自動的に作成元ページへのリンクが設定されています。