第5章 コンテンツの作成

第5章 コンテンツの作成

表示ブロックの管理

「モジュールメニュー」の「互換モジュール」の「ブロックの管理」をクリックします。

contents_01.png

「ブロック管理」ページ

このページでインストール済みモジュールから提供されているブロックの表示及び設定を管理します。

「ブロックの管理」ページ上部の「ブロックのインストール」をクリックします。

contents_02.png

「ブロックのインストール」ページ

各モジュールがあらかじめ提供しているインストール可能なブロック一覧が表示され、ページに表示させたいブロックをインストールすることができます。

複数ページに表示されるので確認しておきます。

確認が済んだら再び「ブロックの管理」ページに戻ります。

表示ブロックは大きく分けて、「左側」「中央」「右側」の3つの表示位置に分かれています。

「中央」ブロックは、またその中で「左」「中央」「右」に分かれています。

contents_03.png

それぞれのモジュールにはいくつかのブロック表示用のパーツがあり、それを適切な位置に配置して表示順を決めてレイアウトを作っていきます。

ホームページの表示ブロックについて(新レイアウト)

従来のXOOPS Cube Legacy 2.1.8では標準のテンプレートで前述のようなレイアウトで提供されていましたが、

最新のXOOPS Cube Legacy 2.2.0では標準テンプレートの配置が変更されています。

新しいデザインのブロックレイアウトは次の図のようになっています。

contents_04.png

XOOPS Cube Legacy 2.2.0の標準レイアウトは2カラム右メニューのテンプレートです。

それぞれのブロックの配置を「表示サイド」の項目の選択で決定します。

また、それぞれのブロックをどのページで使用可能にするかという設定もあります。

現在インストールされているブロックで表示を確かめます。

contents_05.png

フォーラムモジュールをインストールした時に同時にインストールされたブロックの配置を変更します。

フォーラムモジュールの「トピック一覧」ブロックを中央-左に、「投稿一覧」を中央-中央に、「フォーラム一覧」を中央-右にそれぞれ配置して「送信」ボタンをクリックします。

contents_06.png

ブロックの変更確認ページが表示されるので、内容を確認して「アップデート」ボタンをクリックします。

変更後どの様に変化したかホームページで確認します。

contents_07.png

ブロック配置変更後のホームページ

各ブロックがそれぞれの位置に表示されていることを確認します。

contents_08.png

「互換モジュール」の「ブロック管理」ページ

BID ブロックID(モジュールインストール時に自動割り当て)

モジュール ブロック提供元のモジュール名

タイトル ブロック表示時のブロックのタイトル(任意に変更することができます。)

表示サイド ブロック表示位置の設定

並び順 同じ位置に表示されるブロックの並び順を指定(昇順)

キャッシュ ブロックのキャッシュ有無

最終更新日時 表示変更時の日時

アンインストール アンインストールする時にチェックする(複数同時処理時)

操作 編集アイコンとアンインストールアイコン

※フォーラムモジュールのブロック編集アイコンでブロック編集ページが表示された時に、ページの下部に次のようなPHPのワーニングが表示される場合があります。

Notice [PHP]: Constant _MD_A_MYMENU_MYTPLSADMIN alreadydefined in file /home/blog/xoops_trust_path/modules/d3forum/language/ja_utf8/admin.php line 3

このメッセージは言語定数が二重に宣言されたために表示されています。
動作に問題はないので無視します。

ブロックをインストールして右ブロックにレイアウトしてみます。

「ブロックの管理」ページ上部の「ブロックのインストール」ボタンをクリックします。

「ブロックのインストール」ページのブロック一覧から「マイブログ」モジュールの「ブログカレンダー」を探します。(ブロック一覧は複数ページあります。)

contents_09.png

「ブロックのインストール」ページ

「マイブログ」モジュールの「ブログカレンダー」の操作項目にあるインストールアイコンをクリックします。

contents_10.png

「ブロックのインストール」ページ

タイトル

文字通りブロックの表示タイトル名です。

ここではデフォルトの「ブログ カレンダー」のままにしておきます。

並び順

表示エリア内での並び順を指定します。

ここではデフォルトのままにしておきます。(「ブロックの管理」ページでいつでも変更できます。)

キャッシュ

このブロックのキャッシュ有無を設定します。

ここではデフォルトのままにしておきます。(「ブロックの管理」ページでいつでも変更できます。)

表示サイド

ブロックを表示するエリアを設定します。

ここでは「サイドブロック-右」を選択します。

表示先のモジュール

ブロックは各モジュール単位で表示、非表示の設定が可能です。

ここでは「すべてのモジュール」を選択します。

アクセス権のあるグループ

ブロックもモジュール同様アクセス権によって表示、非表示が制御されます。

ここではすべてのグループにアクセス権を与えます。

設定が終わったら「インストール」ボタンをクリックしてインストールします。

※この他、実装するブロックによっては設定項目が多岐にわたる場合もありますが概ね似たような設定でインストールします。

contents_11.png

ブロック追加後の「ブロック管理」ページ

再び「ブロックの管理」ページに戻って「マイブログ」の「ブログカレンダー」のブロックがインストールされていることを確認します。

各モジュールが提供しているブロックおよびカスタムブロックはインストールされると先ほどの「ブロックのインストール」ページから削除され、「ブロックの管理」ページに表示されます。

アンインストールすると「ブロックの管理」ページから削除され「ブロックのインストール」ページに表示されるようになります。

インストール後に変更する場合は操作項目の「編集アイコン」で編集できます。

ブロックの削除は操作項目の「アンインストールアイコン」で操作します。

ブロックのインストール後ホームページで表示を確認します。

contents_12.png

ブロック追加後のホームページ

「ブログカレンダー」ブロックが追加されていることを確認します。

このブロックの表示順や表示位置は「ブロックの管理」ページで設定します。

同様に「お知らせ」モジュールの「最新ニュース」ブロックを中央ブロックの中央にすべてのユーザーのトップページに表示される設定でインストールします。

contents_13.png

「最新ニュース」ブロックのインストールページ

ブロックのインストール後ホームページで確認します。

contents_14.png

ブロック追加後のホームページ

この「ブロックのインストール」では各モジュールが用意しているブロックの他に、「カスタムブロック」として自分で作ったブロックを表示させることができます。

「モジュールメニュー」の「互換モジュール」の「ブロックの管理」をクリックします。

contents_15.png

ページ上部の「カスタムブロックの追加」ボタンをクリックします。

contents_16.png

「カスタムブロックの追加」ページ

このページでカスタムブロックを作成します。

ここでは以下の設定で作成してみます。

「タイトル」 カスタムブロック表示テスト

「表示サイド」 中央ブロック-中央

「コンテンツ」 適当に文字を入れてください。

「タイプ」 自動フォーマット(顔アイコン有効)

「表示先のモジュール」 トップページ

「アクセス権のあるグループ」 すべて

設定が終わったらページ下部の「送信」ボタンをクリックします。

contents_17.png

ブロック追加後の「ブロック管理」ページ

ブロックが追加されたことをホームページで確認します。

contents_18.png

「カスタムブロック」追加後のホームページ

このようにカスタムブロックを作成して自由に配置や表示設定をすることが可能になっています。

また、一度作成したカスタムブロックはブロックをアンインストールするとインストール可能なブロック一覧に表示され、再利用することができます。

完全に削除する場合はインストール可能なブロック一覧のページで「削除アイコン」をクリックすることで削除できます。

XOOPS Cube はこの「ブロックの管理」ページで表示位置や表示内容、表示設定、表示順などを設定してページをカスタマイズできるように設計されています。

XOOPS Cubeのコンテンツ入力

各コンテンツで利用する画像をあらかじめ登録するために使用します。

アップロードする画像を数枚用意します。(ページ内に表示するので800px×600px以下のものが適切サイズ。本書では400px × 266pxを使用しています。)

この「イメージ・マネージャー」はカテゴリごとに画像を管理します。

「モジュールメニュー」の「互換モジュール」の「イメージ・マネージャー」をクリックします。

contents_19.png

「イメージ・マネージャー」のページ

ページ内のある「新規作成」ボタンをクリックします。

contents_20.png

「イメージカテゴリの新規追加」ページ

「カテゴリ名」の項目に「コンテンツ用画像」と入力します。

「イメージ・マネジャーの使用を許可するグループ」の項目で「サイト管理者」を選択します。

「イメージのアップロードを許可するグループ」の項目で「サイト管理者」を選択します。

「容量(byte)」の項目に「500000」と入力します。(デフォルトでは少なすぎるので1桁追加します)

「横幅(px)」の項目に「1200」と入力します。(デフォルトでは小さすぎるので1桁追加します)

「高さ(px)」の項目に「1200」と入力します。(デフォルトでは小さすぎるので1桁追加します)

その他はデフォルトのままにしておきます。

設定が終了したらページ下部の「送信」ボタンをクリックします。

contents_21.png

カテゴリ追加後のページ

カテゴリが作成されたことを確認します。

続いて画像をアップロードします。

「操作」項目の「イメージの新規追加」アイコン をクリックします。

contents_22.png

「イメージの新規追加」ページ

add.png

「イメージの新規追加」ページになります。

「画像」の項目で「参照」ボタンをクリックしてローカルコンピュータにある画像を選択します。

「イメージ名」の項目に「コンテンツ画像1」と入力します。

その他はデフォルトのまま「送信」ボタンをクリックして画像をアップロードします。

アップロードされた画像が表示されます。

contents_23.png

「イメージの一覧」ページ

続けてもう1枚登録します。

ページ上部の「イメージの新規追加」ボタンをクリックします。

同じ手順で「コンテンツ画像2」という名前でもう1枚アップロードします。

contents_24.png

画像が追加された「イメージの一覧」ページ

※イメージ・マネージャーの補足説明
イメージの編集、削除は「イメージの一覧」ページで行います。
「イメージの一覧」ページの「操作」の項目に「編集アイコン」「削除アイコン」の2つが表示されるのでそれをクリックして編集、削除します。

これでコンテンツに画像を表示する準備ができました。

XOOPS Cubeのコンテンツ入力方法にはモジュールによっていくつかの入力方法がありますが、基本的には「HTML」による記述か「自動フォーマット」の2つのタイプがあります。

正確にカスタマイズした表示設定を行うには「HTML」形式で入力されることをお勧めします。(HTML及びCSSの基本的な知識が必要になります。)

BBコード入力

「自動フォーマット」入力の補助機能のようなもので、XOOPS独自の書式コードを使って入力します。「HTML」の知識のない方でも似たような表示を実現できる機能です。

contents_25.png

入力を太枠で囲った部分で行います。

テキストエリアに自動的にコードが追加されたテキストが挿入されます。

この入力方法は後述の「お知らせ」(bulletin)の記事入力を参考にしてください。

ページ内に画像を表示させる方法は、コンテンツ内に画像へのリンクを張るという形で実現します。

この方法には3通りありますので、それぞれに解説していきます。

「イメージ・マネージャー」を利用する方法

この方法はBBコードを使ってコンテンツを作成する時に適している方法です。

あらかじめ「イメージ・マネージャー」を使って使用する画像をアップロードします。

前述で作成したカスタムブロックを変更して画像を挿入します。

「カスタムブロック表示テスト」を編集します。

「ブロックの管理」ページで「カスタムブロック」の「編集アイコン」をクリックします。

contents_26.png

「カスタムブロック」編集ページ

コンテンツの上部にスペースを空け、カーソルキーがある状態でBBコードの「IMAGE MANAGER」ボタンをクリックします。

contents_27.png

「イメージ・マネージャー」専用のウィンドウが開くので、左側上部にあるリストボタンで「コンテンツ用画像」を選択します。

利用できる画像一覧になるので適当なウィンドウサイズに変更します。

contents_28.png

コンテンツ画像1の右側にある「中央配置アイコン」をクリックします。

編集ページのコンテンツ内に画像コードが挿入されます。

画像挿入時のレイアウトアイコンについて

それぞれ「フロート左」 「中央配置(デフォルト)」 「フロート右」 となっています。

(中央配置はセンタリングではなく標準の左配置です。)

contents_29.png

画像コードが挿入された「カスタムブロック」編集ページ

ページ下部の「送信」ボタンをクリックして変更を保存します。

ホームページで表示を確認します。

alignleft.gif
aligncenter.gif
alignright.gif
contents_30.png

「イメージ・マネージャー」とBBコードを使った画像の表示は以上の手順ですが、画像レイアウトの左フロート(画像左配置で文章を右側に表示させる指定)、右フロート(画像右配置で文章を左側に表示させる指定)を使う場合に複数画像の配置には注意が必要です。(画像と文章の関係で、位置が適切に配置できない場合がある)

スペースキーで空白を挿入して調整することができますが、できればフロート解除のHTMLを挿入する方がスマートな方法です。

HTMLが使えない場合は仕方ありませんが、見栄えのよいページにするには次から説明するHTMLを使ったコンテンツを作成することをお勧めします。

「イメージ・マネージャー」を利用する方法の説明はこれで終了します。

「あらかじめサーバーに画像を準備して直接HTMLで呼び出す」方法

この方法はHTMLの知識が必要ですが、きれいにレイアウトできます。

準備

FTPでサーバーの「html」フォルダの中に「my_pics」という名前でフォルダを作成します。

(このフォルダ名は重複しない名前で自由に設定してかまいません。)

その「my_pics」フォルダの中に使用するイメージファイルをFTP転送でアップロードします。

(ここでは使用するイメージファイルの名前を「image01.jpg」サイズを「400px×266px」として説明していきます。)

比較のために、新しいブロックを中央に追加します。

「モジュールメニュー」の「互換モジュール」の「ブロックの管理」ページで「カスタムブロック追加」ボタンをクリックします。

contents_31.png

入力後の「カスタムブロック追加」ページ

「タイトル」の項目に「カスタムブロック表示テスト2」と入力します。

「表示サイド」の項目で「中央ブロック-中央」を選択します。

「コンテンツ」の項目に以下の簡単なHTMLを記述します。

<table border="0" cellpadding="5" cellspaceing="5" width="100%">

<tr>

<td width="420">

<img src="my_pics/image01.jpg" width="400" height="266" alt="" />

</td>

<td>

<p>カスタムブロックの表示テスト<br/>

どのように表示されるか確認します。</p>

<p>これはHTMLを使った表示です。</p>

</td>

</tr>

</table>

「タイプ」の項目で「HTMLタグ」を選択します。

「表示先モジュール」の項目で「トップページ」を選択します。

「アクセス権のあるグループ」の項目で全グループを選択します。

設定が終了したら「送信」ボタンをクリックしてブロックを追加します。

ブロックを追加が終了したら、ホームページで確認します。

contents_32.png

ブロック追加後のホームページ

このようにHTMLを使ったコンテンツは自身で意図した形で表示させることが可能です。

※注意

今回は表示するモジュールがトップページなので、画像ファイルを相対パスで設定しましたが、他のモジュールでも表示させたい場合には、画像ファイルを絶対パスで表示します。

(例 http://サーバーアドレス /my_pics/image01.jpg)

これで「あらかじめサーバーに画像を準備して直接HTMLで呼び出す」方法の説明を終了します。

「リンクとして画像を表示させる」方法

サーバーに画像をアップせずに外部のサイトからリンクで表示させる方法です。

前述の方法と同じです。

画像のURLに外部サイトのファイルのURLを指定すれば表示されます。

この場合は画像の著作権に注意してください。

ここではカスタムブロックを使って画像を表示する方法を説明してきましたが、ほぼすべてのモジュールで同じように表示させることが可能です。

ご自身でいろいろテストしてみてください。

これでコンテンツに画像を表示させる方法の解説を終了します。

「お知らせ」(bulletin)の記事入力

記事の入力方法には2通りの入力方法があります。

1つはプレーンテキストと上部にあるBBコード入力機能を使って入力する方法。

もう1つはHTML形式で記述する方法です。

※プレーンテキストとは、普通のテキストのことです。
書式付のテキストに対して書式なしのテキストの事をプレーンテキストと呼びます。

BBコードツールボタン・文字入力ボックスを使った入力

contents_33.png

「入力支援機能のON/OFF」のチェックボックスをチェックして有効にします。

BBコード入力ブロックが画面上に表示されます。

contents_37.png

BBコード入力ブロック

※各ボタンを利用するには、ブラウザで「スクリプト化されたウインドウを許可」に設定します。

contents_38.png

リンクするページのURLを入力します。

contents_39.png
contents_40.png

メールを送信するアドレスを入力します。

url.gif

リンクする文字を入力します。

email.gif

ハイパーリンクを設定します。

メール送信用のリンクを作成します。

contents_43.png
imgsrc.gif
contents_41.png

画像ファイルのURLを入力します。

contents_42.png

画像の表示レイアウトを設定します。(左・右・なし)

image.gif

外部の画像ファイルを貼り付けます。

イメージマネージャーから画像を貼り付けます。

code.gif
contents_44.png
quote.gif
contents_45.png

特殊文字の入力

大きさ、カラー選択ボックス

大きさ、色を選択します。

(フォントは日本語では意味が無いので使いません)

文字装飾

文字を装飾する場合はそれぞれのボタンをクリックします。

文字入力ボックス

このボックスに文字を入力して「追加」ボタンをクリックすると本文中に挿入されます。

※補足説明
「追加」ボタンをクリックする前に右側に表示される文字を確認してからボタンをクリックします。
このツールボタン・文字入力ボックスで追加されたテキストは、BBコードと一緒に連続して記述されますので、入力後は適切に改行します。
文字装飾等が必要ない場合は、記事欄に直接文字を記述します。

HTMLでの本文記述例

<h2>ここに見出しを記述</h2>

<p>ここは文章<br/>ここには2行目の文章</p>

上記のようにHTML形式で直接記述します。

「掲載日時」の項目で、この入力した記事の掲載開始日時を指定できます。必要な時に使います。

「掲載期限」の項目で、この入力した記事の掲載期限を指定できます。必要な時に使います。

contents_34.png
contents_35.png
contents_36.png

プログラムコードをコンテンツとして表示させる場合に使用します。

引用としてページに表示する場合に使用します。

contents_46.png

「この記事に関連した記事」の項目は、既存のお知らせ(ニュース)の記事で関連性がある記事とリンクを張る機能です。

contents_47.png

「オプション」の項目では、入力した記事のオプションを設定します。

contents_48.png

前述のBBコードを使っている場合は「XOOPSコードを有効にする」をチェックします。

HTMLを使っている場合は「HTMLを有効にする」をチェックします。

入力が終了したら「プレビュー」ボタンをクリックして投稿前に入力内容を確認します。

(プレビューはページ上部に表示されます)

※プレビューは実際の表示とは若干異なります。

確認したら「投稿する」ボタンをクリックします。

これで「お知らせ」(bulletin)の記事入力の説明は終了します。

「業務案内」(TinyD)のコンテンツ入力

(TinyDのコンテンツは「管理メニュー」の「業務案内」の「コンテンツの追加」から行います。)

コンテンツ入力ページの上部にあるリンクで入力スタイルを変更できます。

contents_49.png

1.「BB」

BBコード、テキスト中心にコンテンツを入力する時に使用します。(デフォルト)

コンテンツの入力方法は、前述の「お知らせ」(bulletin)とほぼ同じです。

contents_50.png

BB入力ページ

「タイトル」の項目にタイトルを入力します。このタイトルがページのメニューに表示されます。

「HTMLヘッダ」の項目は、HTMLの本文を使う時に、スクリプトやCSS設定等のHTMLヘッダー内に記載する必要がある場合にだけ入力します。

「コンテンツ」の項目は、前述のお知らせ(ニュース)と同様にBBコードとテキストもしくはHTMLで記述します。

「オプション」の項目で、適切なオプションを設定します。

BBコードやプレーンテキストを使っている時は「改行を<br>に変換しない」チェックをはずします。

「コンテンツタイプ」の項目で、入力したコンテンツに合わせて適切なものを選択します。

他の項目はデフォルトで問題ありません。

入力と設定が完了したら「送信」ボタンをクリックします。

※「BB」コードを使って入力する方法は、前述の「お知らせ」(bulletin)の記事入力を参考にしてください。

2.「SPAW」

簡易HTMLエディターです。HTML入力する場合に使うと便利です。

contents_51.png

SPAW入力ページ

3.「PLAIN」

プレーンテキスト入力モードです。シンプルな入力画面になります。

contents_52.png

PLAIN入力ページ

これで「業務案内」(TinyD)のコンテンツ入力の説明は終了します。

「マイブログ」(d3blog)、「フォーラム」(d3forum)のコンテンツ入力方法は、ほぼ前述のものと酷似していますので参考にして記事を入力してください。