Joomla! Reference - オープンソース CMS Joomla!の参考書（Joomla!の使い方解説）

CMSなら、エディタを利用してWordや一太郎などのようなワープロアプリで文書を作成するような感覚で、記事を作成する事ができます。記事を書く、文字のサイズを大きくしたり小さくしたり、画像を配置する、画像の隣に文章を回り込ませる、リンクを作る・・・などなど、HTMLやCSSを知らなくてもできちまいます。

どこから説明したら良いモノか？　今回は基本的な所から説明してみます。

記事の作成手順

テキストエディタで文章を作成する

まずは、文章をパソコン上で作成してもらいましょう。Wordなどのワープロアプリを使ってもらっても良いのですが、もっとシンプルなモノで、Windowsなら“メモ帳”、Macintoshなら“テキストエディタ”あたりで、文章を書いてもらいます。この際に注意したいのが、メモ帳やテキストエディタ上で文章を書く際の画面上での見た目にこだわって、ひとつの文章（段落）内で改行をしないようにしてもらいましょう。

見出し・リスト部分などに印をつける

ローカル上でメモ帳・テキストエディタで文章を作成する際に、これらアプリの機能で特定の部分の文字を大きくしたり、罫線を入れたりしないようにしましょう。ですが、ボリュームの大きな記事の場合、見出しとして扱いたい文やリスト表示させたい部分など、コピペした後で設定する時に、すぐわかるようにしておきたたいので、それらの文に印をつけておきましょう。

定義＜＜h3

Open Source Initiative (OSI) による定義である "The Open Source Definition(OSD)" によればオープンソース・ライセンスの要件として、以下のような基準を挙げている。

・自由な再頒布ができること
・ソースコードを入手できること
・派生物が存在でき、派生物に同じライセンスを適用できること
・差分情報の配布を認める場合には、同一性の保持を要求してもかまわない
・個人やグループを差別しないこと
・適用領域に基づいた差別をしないこと
・再配布において追加ライセンスを必要としないこと
・特定製品に依存しないこと
・同じ媒体で配布される他のソフトウェアを制限しないこと
・技術的な中立を保っていること

なんて感じに、「見出し（h3）にしたい部分に“＜＜h3”とつけておくとか」「リストする所には“・”をつけておく」なんて感じです。

画像を入れたい所に印をつける

文章（テキスト）はコピペするだけでも、なんとなくそれなりのカタチで作成する事ができますが、写真・図など画像を挿入するのは“コピペ”でってわけにはいきません。なので、予め画像をいれる予定があるのであれば、文章内の画像を入れたい所に「ここにイメージ」なんて具合にメモしておきます。（floatでその画像の右や左に文章を周りこませたいなら、その文章の前（上）に「ここにイメージ」とメモするようにしましょう。）

「ここにイメージ」
コンテンツマネジメントシステムは、Webコンテンツを構成するテキストや画像などのデジタルコンテンツを統合・体系的に管理し、配信など必要な処理を行うシステムの総称。2005年頃より一般的に普及したといわれる。コンテンツ管理システムとも呼ばれる。


概要＜＜h3

ウェブサイト、ポータルサイトの構築、管理によく使用される。ウェブページを作成し、運用するには、 HTMLファイルや、それを保存するディレクトリについての知識が必要だった。コンテンツマネージメントシステムでは、技術的な知識がなくても、テキストや、画像等の「コンテンツ」を用意できれば、ウェブによる情報発信をおこなえるように工夫されている。また、テンプレートの選択により全体のデザインを容易に変更することができるなど、省力化にも役立つ。多くのインターネットサービスプロバイダでは顧客サービスの一部に、CMSを活用した「簡単ホームページ作成」といったメニューが用意されている。

コンテンツマネージメントシステムは、汎用的なものから特定の目的に特化したものまで様々であり、規模もまちまちである。大規模なコンテンツマネージメントシステムでは、ページごとの公開期間の厳密な時間管理や、公開を承認するワークフロー、サイト内リンク切れの防止、デザインの統一、バージョン管理など様々な機能があり、品質を維持しつつ多人数での共同作業を効率よく行うことを可能にしている。個人向けコンテンツマネージメントシステムとしては、各種Weblogツールが挙げられる。ブログツールでは、ページの自動生成や公開日指定、RSS配信、トラックバックなどの機能が用意されている。Wikipediaで使用されるウィキや、SNS、Commerceもコンテンツマネージメントシステムの一つである。

・モジュールまたはプラグインを追加してシステムを拡張できるCMSも多い。
・ 多くのCMSが、オープンソースとしてGPLを適用して提供されるようになった。
・デザインカスタマイズのために、CMSを使うWebデザイナーには、CSSの知識が必須となってきた。

最近では携帯向けコンテンツ管理システム（CMS）も多く出てきており、Webシステム開発のローコスト化、省力化の要請とともに注目を浴び、ますます市場拡大をしている。純国産のオープンソースCMSも多く見受けられ、選択の幅が広がりつつあるが、これらの中にはWebシステム開発企業が自社の開発ツールを公開したものや、個人プログラマーが趣味で作成したものなどが含まれる。よくいえば百花繚乱、悪く言えば玉石混交で乱立の様相を呈し、ユーザーとしてはその選択に困るが、いわゆる公式サイトが低調で休眠状態（質問を投じても何もレスポンスがない）、ドキュメントが少なすぎるなどサポート体制が不十分、あるいはそのサイト自身そのCMSで制作されていないケースすらあるので注意が必要である。なおほとんどがMySQLなどデータベースを使ってコンテンツ管理を行っているので、導入可能な環境については個々に確認しなければならない。


（フリー百科事典『ウィキペディア（Wikipedia）』より）<<ここにリンク

汎用CMS＜＜h4

汎用CMSには充実したユーザインターフェイスがあり、ログインしてユーザの設定に応じた言語やデザインで閲覧したり、設定された権限に応じてコンテンツを編集するしくみを提供しており、システムを拡張する機能や開発環境が充実している。

ってな具合で記事が書けたら、ローカル上に保存しといてもらいましょう。

フロントエンドにログインする

“記事作成ユーザ”に、フロントエンドからログインしてもらいましょう。ログインに関しては「 記事の書き方〔サイト管理者による前準備編〕＞＞step4『ログインモジュールを・・・』」を参考にしてください。

新規記事作成メニューをクリックする

新規記事作成メニューに関しては「 記事の書き方〔サイト管理者による前準備編〕＞＞step3『記事作成ユーザー向けのメニューを作成する。』」を参考にしてください。

タイトルを入力する

「記事を投稿」画面が開いたら、まずはタイトルを入力しておきましょう。

エディタのボタンが表示されているのを確認

先ほどテキストエディタで作成した文書から、コピー&ペーストでテキストを貼り付ける作業を行いますが、記事本文入力フォームが今どういう状態かを確認しましょう。もし、エディタボタンがずらーっと並んでいればOK。もしそれらがなければ（No Editor入力モード）、フォーム左上の[show/hide]をポチっと押して、エディタ入力モードに切替えて、エディタボタンがずらーっと並んでる画面にしてください。。

テキストエディタで作成した文章をコピー&ペースト

記事本文入力フォーム（<<こんな記載は無いけど・・・記事を入力するところっぽい部分）に、先ほどテキストエディタで作成した文章を全部コピペしちゃってください。

その他の設定をする

1. セクション:（この記事が属する）セクションを選択してください。
2. カテゴリ:（この記事が属する）カテゴリを選択してください。
3. 公開: この記事をすぐに公開するなら「はい」。まだ公開しないなら「いいえ」を選択してください。
4. フロントページに表示: サイトのトップページ（Home）にこの記事を表示するなら「はい」、しないなら「いいえ」を選択してください。
5. 作成者 別名: 空欄のままでもOKです。入力すれば、記事に付記される作者名がユーザ名でなく、ここで記載した名前で表示されます。（<<ホント？）
6. 公開開始: この記事を公開する日時を入力します。フォーム右側にあるカレンダーボタンをクリックすると簡単に入力できます。
7. 公開終了: この記事の公開終了日を指定する場合は、ここにその日時を入力します。時限的に記事を非公開にする必要がなければ、空欄または“終了無し”にしておきます。
8. アクセス レベル: 一般に公開する記事なら「公開」。登録ユーザがログインした際にだけ閲覧可能な記事にするなら「登録」。○○以上の権限を持つユーザのみ閲覧可能にするなら「スペシャル」を選択します。
9. メタデータ〔説明：〕／この記事の概要（簡単な説明）をここに入力します。（本当は入力したほうが良いけど、まあ空欄でも良いです。）
10. メタデータ〔キーワード：〕／／この記事のキーワードをここに入力します。（本当は入力したほうが良いけど、まあ空欄でも良いです。）

記事を保存する

ここで一旦記事を保存しておきましょう。上のほうに戻って、タイトル入力欄の右あたりにある「保存」ボタンを押しましょう。

記事を見てみよう

さー、どんな感じで記事が作成されているか見てみましょう。先ほど選択したセクション又はカテゴリ内の記事一覧が表示されるメニューがあればそれをたどればあなたが作成した記事がリストされているはずです。

まだ、見出しを設定したり、画像を挿入したりしてないので、味も素っ気もないページかもしれませんが、あなたが書いた記事がHTMLのカタチでWebページとして表示されているはずです。

記事を編集する

今、見ているあなたの作成した記事の上の方（タイトルの側）にというアイコンがあるので、それをポチっと押すとその記事の編集画面に切り替わります。

見出しを設定する

1.見出しにしたい文（例では“＜＜h3”をつけた所）を選択します。

2.エディタボタンの（Format Select）で「見出し 3（h3）」を選択します。テキストの表示が変わったのを確認して、印“＜＜h3”を削除します。

文字のサイズを調整する

1.文章中の大きくしたい文を選択します。

2.エディタボタンの（Font Size Select）で、サイズを選択します。

文字を強調する

1.文章中の強調したい文を選択します。

2.エディタボタンの（Bold）をクリックします。

画像を挿入する

1.文章中の画像を挿入したい所（「ここにイメージ」の文）を選択します。

ローカル（あなたのパソコン）上に、すでに画像（.jpg .png .gif など）を用意してあるものとします。画像のファイル名は半角英数（日本語はダメ）で、拡張子も付与しておきます。（例えば、image-01.jpg なんて感じ。）

2.エディタボタンの（Image Manager）をクリックします。

3.イメージマネージャーウィンドウがポップアップで開きます。

※JCEのグループ設定で、このユーザー（記事作成ユーザー）がアクセス（画像を保存）できるディレクトリを指定してあるものとします。

4.フォルダを作成します。
あとあと、画像の管理をしやすいように、コンテンツ毎にフォルダ（ディレクトリ）を作成して、そこにイメージを保存するようにしましょう。あとで、記事を編集したりする時に、記事作成者がわかるようなフォルダ名をつけましょう。（もちろん、半角英数で！　日本語はダメ。）

5.イメージをアップロードします。
現在作成している記事に複数画像がある場合は、まとめてアップロードしておく事もできます。

a.先ほど作成したフォルダをクリックして、画像がアップロードされる場所を確認しておきます。

b.アップロードボタンを押します。

アップロードウィンドウがポップアップで開きます。

c.左上の「Add File…」をクリックして、ローカル（PC）上の画像のある場所を選択し、アップロードする画像を選択します。複数の画像を選択して一度にアップロードする事もできます。

d.下のアップロードボタンを押します。完了したら右上の「×」を押して“アップロード”ウィンドウを閉じます。

6.挿入する画像を選択します。

挿入したい画像のファイル名をクリックします。必要に応じて、「代替テキスト」を修正したり、サイズを変更したり、配置で画像を配置する場所を指定します。（配置で「左」を選ぶと、画像の後のテキストが画像の右側に回り込む）

こんな感じで画像が挿入されます。

<div style="clear:both;">&nbsp;</div>

リンクを作成する

1.文章中のリンクを作成したい所を選択します。

2.エディタボタンの（Advanced Link）をクリックします。

3.Advanced Linkウィンドウがポップアップで開きます。

4.“URL：”にリンクさせるURLを入力する（外部リンクの場合）か、内部リンクなら Link browser でサイト内のコンテンツを選択します。必要に応じてリンクのタイトルも入力しておきます。入力した内容を確認して、間違いがなさそうなら左下の「挿入」ボタンを押します。

リストを作成

1.文章中のリスト化したい文章を選択します。

2.エディタボタンのイメージ（Bullet List）または、（Numbered List）をクリックします。

3.表示がこんな感じに変わり、文章にリストのマーカーが付いているのを確認します。文書作成時につけておいた「・」を削除します。

こんな感じで作成したページがこんな感じです。「サンプルページ」