Kupuビジュアルエディタを使用する
Plone 4からは、新規サイトで初期設定されるビジュアルエディタはTinyMCEになります。しかしKupuの方が使いやすいのであれば、継続して使用することも可能です。Kupuをデフォルトエディタに設定する方法は「 個人設定 」を確認してください。
Kupuでは以下のようなツールバーが表示されます。
標準的にはHTML形式で文書は保存されます。しかしいくつかのサイトではページの編集に構造化テキストや他のマークアップ言語が使用されます。
以下はツールバーのアイコンの説明です。
- 太字(bold)
- 斜体(italic)
- 左寄せ
- 中央寄せ
- 右寄せ
- 数字付きリスト
- 箇条書き
- 定義リスト
- インデントをはずす
- インデント
- 画像(木のアイコン)
- 内部リンク(チェーンのアイコン。サイト内の他のページへのリンクを作成)
- 外部リンク(地球のアイコン。外部のWebページへのリンクを作成)
- アンカー(イカリのアイコン。Webページの特定の場所へのリンクを作成)
- 表(行と列のある表を追加)
- HTMLを直接編集(HTMLアイコン)
- 文字列のスタイルを指定するためのプルダウンメニュー
画像
ページ内の任意の位置にカーソルを移動してから[木]のアイコンをクリックします。すると以下のようなパネルが表示されます。
![[イメージを挿入]パネル](http://plone.jp/documentation/plone4-user-manual/images/kupu/insertimagecurrentfolder.png "insertimagecurrentfolder.png")
パネルの左側にある[カレントフォルダ]をクリックします。カレントフォルダは現在編集しているページを含んでいるフォルダです(全てのページは必ずいずれかのフォルダに含まれています)。画像の管理にはいくつかの方法があります。一つの画像フォルダを中心的に使用する方法もありますが、一般的な方法はページを含むフォルダ(カレントフォルダ)にページで使用する画像を保存することです。この方法では、ページとそのページに関連した画像がフォルダの中に一緒に保存されます。[イメージをここにアップロード]ボタンをクリックすると、コンピューターから画像ファイルをアップロードすることを要求されます。アップロード用の画像を選択した後、パネルの右側でWebサイトで使用する画像のタイトル、画像の配置とサイズのオプション等の設定が必要となります。OKボタンをクリックすると画像がアップロードされページ上に配置されます。
ページ上の画像を選択して同じ[木]のアイコンをクリックすると、同じパネルが表示され画像オプションの編集や画像の変更ができます。
コンピュータから画像をアップロードする前に、画像を編集してサイズを変更することをおすすめします。簡単な方法としてはコンピュータ上の画像のコピーをWebページで使用しやすい形にすることであり、最大で1000ピクセル程度にサイズ変更することをおすすめします。これはアップロードに適当な大きさであり、デジタルカメラで撮影した巨大な画像をアップロードする必要はありません。Ploneはアップロードされた画像を[large][mini]などのいくつかのサイズに自動で変換します。[木]のアイコンでアップロードまたは編集した画像のサイズを選択できます。また、HTMLを編集して画像のサイズを上書きすることも可能です。
内部リンク
単語や句を選択して[チェーン]のアイコンをクリックすると[リンクを挿入]パネルが表示されます。
![[リンクを挿入]パネル](http://plone.jp/documentation/plone4-user-manual/images/kupu/insertlinkpanel.png "insertlinkpanel.png")
このパネルで[ホーム]または[カレントフォルダ]をクリックして、Plone Webサイト上のフォルダ、ページまたは画像などのリンク先となるアイテムを探します。例として[Long-tailed Skippers]という名前のページへリンクするために選択します。パネルを閉じると、選択した単語や句に対して[Long-tailed Skippers]ページへのリンクが作成されます。
外部リンク
単語や句を選択して[地球]のアイコンをクリックすると[外部リンクを作成]パネルが表示されます。
![[外部リンクを作成]パネル](http://plone.jp/documentation/plone4-user-manual/images/kupu/externallinkpanel.png "externallinkpanel.png")
http:// から始まる入力フィールドに外部のWebサイトのURLを入力します。必要であれば、[プレビュー]ボタンをクリックしてURLが正しいかを確認することができます。Webアドレスをペーストした場合はURLの最初に http:// を二つ付けないように注意してください。正しければ[OK]ボタンをクリックして、選択した単語や句に対して外部リンクが設定されます。
アンカー
アンカーは文書の位置を示す目印のようなもので、見出し、副題または他の文書のスタイルを元にして設定します。例として[Eastern Tiger Swallowtail]というページに、[Description]、[Habitat]、[Behavior]、[Conservation Status]と[Literature]という副題がある場合に、これらの副題にリンク(文書中のそれぞれの副題の位置を示す)するためにアンカーを使用することができます。
最初に、複数の副題がある文書を作成し、その文書の先頭に副題と同じ内容を再度入力します。
そして、再入力したそれぞれの副題を選択してアンカーアイコンをクリックし、副題を選択します。
パネルに表示された副題を選択してアンカーリンクを作成します。
![[アンカー]パネル](http://plone.jp/documentation/plone4-user-manual/images/kupu/anchorwindow.png "anchorwindow.png")
[アンカーへリンク]タブが表示されます。左側には文書中のアンカーが設定されているスタイルの一覧が表示されます。ここでは例として[Subheading]の各セクションを使用します。パネルの右側には文書中に存在するの副題が表示されます。ここで副題[Description]をリンク(文書の先頭にあるDescriptionから文書中の副題へ)するために選択します。文章のアンカーに対するリンクをまとめることや、文書中の他のスタイルにアンカーを設定するという強力な機能によって、創造的に文書を作成することができます。この機能は長い文書に対しては特に重要です。
表
表はテーブル上のデータの一覧表示に便利な形式です。表を追加したい場所にカーソルを合わせて[表の作成]アイコンをクリックします。
![[表の作成]パネル](http://plone.jp/documentation/plone4-user-manual/images/kupu/inserttablepanel.png "inserttablepanel.png")
行と列に正しい値を設定します。[列見出しを付ける]のチェックボックスをチェックすると、表の先頭が見出しになります。以下のように[表の枠線の種類]を選択することによって、表のスタイルを変更することができます。
![[表の作成]パネルの[表の枠線の種類]](http://plone.jp/documentation/plone4-user-manual/images/kupu/inserttablepanelclasses.png "inserttablepanelclasses.png")
以下に[表の枠線の種類]の例を載せます。
plain
| Thoroughbred Champions | Quarter Horse Champions |
|---|---|
| Man O' War | First Down Dash |
| Secretariat | Dashing Folly |
| Citation | Special Leader |
| Kelso | Gold Coast Express |
| Count Fleet | Easy Jet |
listing
Thoroughbred Champions  |
Quarter Horse Champions  |
|---|---|
| Man O' War | First Down Dash |
| Secretariat | Dashing Folly |
| Citation | Special Leader |
| Kelso | Gold Coast Express |
| Count Fleet | Easy Jet |
表を作成したあとにセルをクリックすると、表のサイズを変更するためのハンドルと、行と列を追加・削除するためのアイコンが表示されます。
[Special Leader]というセルにカーソルを置くと、表の大きさを変更するための小さい四角形のハンドルが表の端に表示されます。またカーソルを置いた[Special Leader]セル上で追加・削除アイコンが有効になります。丸の中にある小さい「x」マークをクリックすると現在のセルを含んだ行または列全体が削除されます。小さな三角形のアイコンをクリックすると現在のセルの上下いずれかに行を追加、または左右いずれかに列を追加します。
文字列のスタイル
文字列のスタイルの設定はプルダウンメニューから以下の項目を選択して行ないます。
| 説明 | 例 |
|---|---|
| 普通段落 | text |
| Heading(見出し) | |
| Subheading(副題) | |
| Literal(整形済みテキスト) | text |
| Discreet | text |
| Pull-quote | text |
| Call-out | |
| Page break (print only) | |
| Clear floats (remove style) | |
| Highlight |
ワードプロセッサーでの編集のように、単語、句や文節をマウスで選択してプルダウンメニューからスタイルを選択すると、ただちに変更が適用され見た目が変わります。
保存
一番下にある「保存」ボタンをクリックしてページに対しての変更をサイトに書き込みます。
補足説明
マークアップ言語
文章の入力にマークアップ言語とよばれる表記方法を使用したい場合は、個人設定でKupuなどのヴィジュアルエディタの使用を止め、シンプルなテキスト入力パネルに置き換えます。Ploneで使用可能なマークアップ言語には以下のようなものがあります。
- Markdown (訳注: Markdown 日本語訳)
- Textile (訳注: Redmine.JP | textile記法)
- Structured Text (訳注: 構造化テキスト ・ takanory.net)
- Restructured Text (訳注: reStructuredTextリファレンス - 物理のかぎプロジェクトWiki)
いずれも文章の中に特別な表記方法を埋めこむことにより動作します。例として、構造化テキストでは単語や句を二つのアスタリスク * で囲むことにより、その文字列が この文章は太字になります のように太字で表示されます。これらのマークアップ言語は大量のページを作成する入力速度を上げたり、テキストの入力に技術的なアプローチを追加したいときに有効なため、習得する価値があります。一部の人は入力の速度ではなく、表現の流動性のためにこれらのフォーマットを好んで利用しています。
