Joy CMS マニュアル

Joy CMS は、ウェブサイト構築用として２００７年に開発しました。
公開当初から、幾多の改良を重ねてきましたが、今後もアップデートされて新しい機能が盛り込まれる可能性があります。
当マニュアルは、２０１２年５月現在の Joy CMS に関する操作を説明しています。
当ツールは、ホームページの管理が目的ですので、ブログの操作と異なる点が多々ありますが、このマニュアルを読んでいただくと、基本的な操作をマスターすることができると思います。
目次
１．Joy CMS の機能
２．基本設定３．メニューの追加・訂正・削除
４．記事投稿
１）基本投稿パターンによる記事投稿
２）画像のアップロードと挿入３）その他の投稿パターン
５．記事を編集する
６．記事を削除する
７．カテゴリ（メニュー）の並びを変える
８．記事の並びを変える
９．メールフォームを設置する
１０．記事に表を挿入する
１１．サイドバーに記事を掲載する
１２．サイドバーの記事を編集する
１３．サイドバーの記事を削除する
１４．サイドバーの記事を移動させる
１５．ちょっと高度な操作方法【１】Joy CMS の機能
ホームページは、主にヘッダー、サイドバー、コンテンツ、フッターの４領域に分かれています。
下図のように、サイドバーが一つでコンテンツを含めて２列になっているタイプを２カラムと呼んでいますが、サイドバーが左右に分けれていてコンテンツを含めて３列の３カラムのものもあります。
（注・・・・下図は、フッターを省略しています。）

1

ヘッダー部・・・・・・ウェブサイトの最上部に位置し、サイトタイトルやサイトの説明文が表示されていて一般的に背景には写真やイラストなどの背景画像が用いられます。
サイドバー・・・・・・・この領域は、一般的に左側に位置しますが、右側に位置する場合もあります。
主に、メニューへのリンクや、サブコンテンツが配置されます。
コンテンツ・・・・・・・・この領域は、記事（コンテンツ）の掲載位置です。情報を伝える意味からすれば、一番重要な領域と言えるでしょう。
フッター部・・・・・・・・この領域は、慣習に従って、著作権表示のための「Copyright © ○○.jp AllRig
ht Reserved.の表記がなされることが一般的です。（※上図にはフッター部は表示されていません。最下部のエリアがフッター部にあたります。）

2

上図は、ログインして開く、コントロールパネルのトップページの画面です。
左サイドには、操作のメニューが並んでいます。
一番最初にログインした場合、まず「基本設定」を行います。既に基本的な設定がなされていた場合は、省略することもできます。
基本設定については、この後の「基本設定」の項目で詳しく説明します。
【２】基本設定
Joy CMS の基本設定は、コントロールパネルのトップページの左サイドメニューの「ツールの基本設定」をクリックします。

上図は、コントロールパネルのトップページのサイドメニューにある、「ツールの基本設定」をクリックして開くペー
ジです。
すべての項目を設定する必要がありません。
注）既に、ウェブサイトのデザインが完了している場合は、「デザインタイプ」を再選択する必要がありません。
最低限必要な設定は、「パスワードの再設定」、「ツールの選択」、「タイトル」、「ツールの説明」、「受信用メール
アドレス」、「注文受付メールアドレス」、「掲示板のテキストカラー」ぐらいです。
１）パスワードの変更
パスワードを再設定する場合は、設定画面の最上部のパスワード変更のテキストフォームに新しいパスワードを入力します。
既に、表示されているパスワードで OK ならそのままにしておきます。

3２）デザインタイプ
注）ホームページデザインがすでに完了している場合は、再選択する必要はありません。そのままにしておいて下さい。

テンプレートを変更して、ウェブサイトの基本的なデザインを変更したい場合には、下図に示すように「TYPE
LIST」からお好きなテンプレートデザインの番号を下のプルダウンの中から選択します。
３）ツールの選択
Joy CMS には、ウェブサイトのコンテンツ以外に日記帳や画像掲示板をコンテンツとして追加することができます。
日記帳や画像掲示板が不要な場合は、「ツールの選択」において、一番上の「コンテンツのみ」にチェックを入れます。
「すべて」にチェックを入れると、日記帳、画像掲示板の両方が追加されます。
なお、この項目は、デザインタイプで基本的なデザインを変更しない限り、変更することはできません。

４）テンプレート、CSS ファイルの生成
これは、既に CSS ファイルを編集してオリジナルのデザインにした後で、「テンプレート、CSS ファイルを生成する」にチェックを入れますと、CSS ファイルがデフォルト（初期設定）のファイルに戻ってしまいます。
オリジナルのデザインを保持したまま、基本設定を変更したい場合は、「テンプレート、CSS ファイルを生成しない」にチェックを入れてください。（もっとも、「テンプレート、CSS ファイルを生成する」にチェックを入れない限り、

4自動的に「テンプレート、CSS ファイルを生成しない」にチェックが入りますので特別、注意する必要はありません。）※注・・・上記、「ツールの選択」を変更した場合は、強制的にデザインタイプで選択した基本のテンプレートに戻ります。

５）タイトル
タイトル名は、ウェブサイトでは、非常に重要です。
なぜならば、Google、Yahoo と言ったボータルな検索エンジンでは、タイトルを重要な検索キーワードとみなすからです。
タイトルは、全角３０文字以内で入力してください。

６）ホームページの説明
このホームページの説明文を入力します。
説明文は、デザインテンプレートによって表示箇所が異なりますが、一般的にページの一番上部に表示されます。
Google の検索においては、タイトルと並んでこれも非常に重要な項目です。ユーザに検索して欲しいキーワード
をこの部分に盛り込むと検索結果で好結果が期待できます。
ただし、キーワードを連呼しないことが重要です。連呼しすぎると逆に検索結果の順位が下がる可能性があります。（連呼しないで間を空けることは可。 最大２個まで）

７）受信メールアドレス
これは、入力必須項目です。設置したメールフォームで受信するメールアドレスを入力します。
その下の、注文受付メールアドレスは、ショッピングカートを設置した場合の注文を受け付けるメールアドレスで5すが、これも必須ですので、ショッピングカートを設置しない場合でも指定してください。

９）掲示板のテキストカラーの指定
この項目も必須入力項目です。画像掲示板を設置しない場合も、指定してください。
フォントカラー入力のフォームの右側にある「COLOR CODE」ボタンのクリックで、カラーコード一覧が表示されますので、適当なカラーをクリックしてフォームに自動挿入させてください。

ショッピングカートや宿泊予約フォームを試用しないのであれば以上の設定で OK です。
ここでは、ショッピングカートや宿泊予約受付フォームを設置した場合の説明は割愛します。
入力が完了しましたら、最後に、ページの最下部にある、「設定を更新する」と表示されたボタンをクリックします。

6

【３】メニューの追加・訂正・削除
下図は、JoyCMS のウェブサイトです。

上図において、ヘッダーの下にある、横長のメニューを一般的にグローバルメニューと言います。
さらにサイドバーにもメニューが縦に並んでいます。
グローバルメニューの有無は、基本設定でどのデザインテンプレートを選択するかで決まります。
初期の、メニューがまだ一つも追加されていない状態では、サイドメニューには「HOME」」以外はなく、グローバ
ルメニューには、何も表示されていません。
※本文中にメニューとカテゴリと言う２つの単語が出てきますが、同義語とご理解ください。
１）STEP 1
コントロールパネルのトップページのサイドメニューから「カテゴリの追加/訂正/削除」をクリックします。

２）STEP 2
開いたページの一番上はカテゴリの追加です。（次ページ参照）

7

「カテゴリ名」は最大文字数３０文字以内なら、日本語、アルファベットどちらでも入力することが出来ます。
カテゴリ名は、メニューにそのまま表示されます。
ただし、カテゴリ名の頭に、半角で#c#と付けると、メニューには表示されませんが、そのメニューに記事を追加することが出来ます。
使い方としては、ある記事の中で、メニューには使いたくないけれどそのページにリンクして、どうしても記事を掲
載したい場合など。
また、カテゴリ名の頭に、半角で#s#を付けると、メニューに表示されるテキストが右側にインデント（字下げ）されます。これはそうすることによってサブメニューとして利用が可能となります。
下図は、#s#を使った事例です。（注・・メニューの「武雄の焼物考」は#n#を付けています）

カテゴリ名の頭に、半角で#n#を付けるとリンクなしのメニューを付けることができます。用途としては、その下にサブメニューを配置するやり方があります。
上図で言えば、サイドメニューで HOME の下にある、「武雄の焼物考」がそれに当ります。ためしに「武雄の焼物考」をクリックしても何も起こりません。その下の「武雄の焼物考その１」、「武雄の焼物考その２」、「武雄の焼物考
その３」の単なるメインメニューになっているだけです。

8３）STEP 3「ディレクトリ名」は、英数字３０文字以内で入力してください。
ディレクトリ名は、ホームページのファイル名が、ディレクトリ名.html になります。ただし、カテゴリの中のページ数が増えると順次、ディレクトリ名+2.html・・・ディレクトリ名+3.html のファイルが自動的に作成されます。
【４】記事投稿
１）基本投稿パターンによる記事投稿
トップページの記事が未投稿の状態で、追加しているメニューに記事を追加することはできません。
追加しようとするとエラー表示されます。
最初の記事投稿は、トップページが原則です。

記事投稿をおこなうには、まずコントロールパネルのトップページの左サイドメニューから「記事の作成」をクリックします。
新しく開いたページの最上部に「カテゴリの選択」があります。
トップページと追加されているカテゴリ（メニュー）の中から、どのカテゴリに記事を投稿するかを決めます。もちろんトップページを選択した場合は、トップページに記事が掲載されます。

上図の例では、「新着情報」が選択されています。
「カテゴリの選択」の下にあるのは、「記事の表示パターンの選択」です。

9

記事の投稿パターンを１６種類に分けて、簡単に投稿できるようにしましたが、特殊なパターンを除いて、エディ
タの操作になれたら、ほとんど「パターン A」で投稿できるようになります。
そういうことから、上図「パターン A」を基本投稿パターンと名付けています。
まず、この基本投稿パターンである「パターン A」を使って記事投稿をしてみましょう。
「パターン A」を使いますから、【パターン A】の右側にチェックボックスをクリックして ON にします。

表示パターンを選択したら、ページの最下部にある「記事のカテゴリと表示パターンを選択する」と表示されたボ
タンをクリックします。
１）STEP 1 タイトルの入力
記事にタイトルを付けます。
タイトルの入力は、投稿した記事を編集・削除するとき、どの記事かを判別可能とするため、管理上、必須となっています。
２）STEP 2 タイトルの表示、非表示
STEP 1 で入力したタイトルは、ホームページ上で表示したり、あるいは非表示にすることができます。
下図は、表示した例です。「CMS を利用したホームページの解説」が、タイトルにあたります。

10

初期設定では、「表示する」にチェックが入っていますので、表示しない場合は、「表示しない」にチェックをしてください。

３）STEP 3 本文の入力
本文は、エディタを使って入力します。エディタとは、入力をテキストの装飾や表の作成などの入力を支援するツールです。
かなり、高度な入力補完が可能ですが、ここでは、初歩的な入力方法について説明します。
エディタの詳細は、１１の高度なエディタの使い方をご覧下さい。

上図は、エディタを表示しています。
エディタの上に位置している「登録されている画像素材を見る」をクリックするとポップアップで登録されている画像の一覧が表示されます。
その右側にある、「WYSIWYG をオフにする」をクリックするとエディタが普通の入力フォームに切り替わります。
（このボタンは、特殊な場合を除いて通常使うことはありません。）

11

では、エディタの基本的な使い方を説明します。
●段落を付けるには
下図の破線で囲まれた文章と次の文章の間には、一行分のスペースが空けられています。

このように、段落を付けるには、上図を例にとって説明しますと、「思って折られる方を対象としています。」の最後の”す。”の右側にカーソルを置いた状態で、Enter キーを押します。
このように、Microsoft の Word や Note Pad などのテキストエディタの場合、Enter キーは、改行ですが、このエディタの場合は、段落を付ける操作になります。
●文字を改行するには次の画像をご覧下さい。

「【今月の予定】」や「７月６日・・・・役員会」は、行の途中で改行されています。
改行する場合は、改行したい行の行末にカーソルをおいて、「Shift」キーを押しながら「Enter」キーをクリックします。
●文字サイズを変更するにはサイズを変更したい箇所をマウスの左クリックでドラッグして反転させ、ツールバーの「フォントサイズ」のプルダウンから変更したい文字の大きさをクリックします。

12※マウスのカーソルを変更したい箇所の頭に置き、左クリックしたままマウスを変更した箇所の末尾まで移動させます。ドラッグした箇所は文字が白くその外周が青くなります。（いわゆる反転されます。）
反転を解除するには、フォーム内の適当な場所を右クリックすると解除されます。

上図のごとく、文字の大きさが変更されました。
●文字を太字に変更するには太字にしたい領域をマウスの左クリックでドラッグして反転させ、ツールバーの最上部の左から３番目の”B”を左クリックすると、反転させた文字が太字になります。

ドラッグした文字が太字に変更されました。
●テキストにリンクを貼るには上図の”Google”に Google のホームページへのリンクを張るには

13

リンクを貼りたいテキストをドラッグした状態で、ツールバーのフォントの下にある鎖マークの付いた、「リンクの挿入\編集」のアイコンをクリックします。

「リンクの挿入\編集」のポップアップ画面が表示されますので、その中のリンク URL に Google のホームページのアドレスを入力して「挿入」ボタンをクリックします。

上図のように、リンクが挿入されました。
●画像を挿入するには画像を挿入する方法は、２通りあります。
一つの方法は、エディタの「画像挿入」ボタンで挿入する方法と、もう一つの方法は、エディタの下にある画像挿入のフォームを使って挿入する方法です。
エディタの「画像挿入」ボタンで挿入する方法は、別途、このあとの「画像のアップロード・追加処理」で説明します。
ここでは、それより簡単な後者の挿入方法について説明します。

14

テキストエディタの下に上図のような画像入力フォームがあります。
一番上の「画像ファイルの配置」は、画像とテキストの位置関係を決めるものです。

上図は、「画像の配置」を「左側に配置」にした例です。確かに画像がテキストの左側に配置されています。
その下の「サムネイル画像の表示幅」は、実際にホームページ上で表示される画像の幅です。
１５０ピクセルから２５０ピクセルまで１０ピクセル単位で設定できますが、記事の表示幅が５１０ピクセルですので、
２５０ピクセルに設定すると、画像の表示幅は、およそ半分になります。
ちなみに、上のサンプルは、サムネイルの画像幅を２００ピクセルとしています。
また、サムネイルをクリックすると別窓で拡大画像が表示されるようになっています。
それが済んだら、「画像ファイルの指定」の右側にある、「参照」ボタンをクリックします。

15

「アップロードするファイルの選択」ダイアログが表示されますので、画像ファイルをマウスでクリックして「開くボタン」をクリックしてフォームに入力します。（ダイアログ内の画像ファイルをダブルクリックしても入力できます。）「画像ファイルの指定」のフォームに画像ファイルへのパスが入力されたら、その下にある、「アップ」ボタンをクリックすると投稿ができます。
ファイルサイズにもよりますが、サーバー内で画像ファイルのデータを再編成しますので長い時でアップロードに
１０数秒かかる場合があります。
２）画像のアップロードと挿入
先ほどの例は、画像のアップロード処理をエディタ外のフォームで行いましたが、この方法ですと投稿記事内に一つしか画像を入れることができませんので、２つ以上の画像を挿入する場合は、エディタの「画像の挿入」機
能を使います。

上図は、エディタのツールバーを表示していますが、「画像の挿入\編集」ボタンは、フォントサイズのプルダウンの真下にあります。

16

画像をアップロードして挿入するまえに、エディタのテキストフォーム上の画像を挿入する箇所をクリックします。
その後、「画像の挿入\編集」ボタンをクリックすると下図のように、「画像の挿入\編集」のポップアップ画面が現れますので、画像をアップロードするために、「画像追加」のボタンをクリックします。

「画像追加」ボタンをクリックすると、「画像の追加」のポップアップ画面が現れます。

「画像の追加」のポップアップ画面では、画像の表示サイズを１５０ピクセルから５００ピクセルの範囲で指定します。
画像サイズを指定したら、その下の「参照」ボタンで、画像ファイルを指定します。
アップロード可能な画像ファイルは、JPEG、GIF、PNG です。もちろん日本語のファイル名でも OK です。
最後に「追加する」と表示されたボタンをクリックすると画像のアップロードが始まります。
画像ファイルのデータサイズが５メガバイトを超えますと、エラーが表示されます。この場合は、５メガバイトより小17

さいサイズに縮小してからアップロードしてください。
デジカメで撮影する場合は、画像サイズを幅、６４０ピクセルに設定すると５メガバイトをオーバーすることは、まずないでしょう。
画像のアップロードが完了すると、一旦「画像の追加」のポップアップ画面を閉じます。（閉じる場合、「画像の追加」のポップアップ画面の右上の「×」ボタンをクリックすると画面が閉じます。）
次に、先ほどアップロードした画像ファイルを今度は挿入して見ましょう。

「画像の挿入\編集」のポップアップ画面から「参照」をクリックします。

「MEDIA SHOW」のポップアップ画面が表示されますので、挿入したい画像の右側の「挿入」ボタンをクリックします。
クリックして、「MEDIA SHOW」のポップアップを閉じると、「画像の挿入\編集」のポップアップ画面の画像 URL
欄に画像ファイルのパスが入力されているはずです。

18

このまま、「画像の挿入\編集」のポップアップ画面の左下にある、「挿入」ボタンをクリックすると下図のようなエラー画面が表示されます。（下図はブラウザが Fierfox の場合です。）

この状態で OK ボタンをクリックしても良いのですが、画像の説明文を入れることをおすすめします。画像の説明文を入れるには、下図のように「画像の挿入\編集」ポップアップ画面の「画像の説明」の欄に、画像の説明文を入力して、左下の「挿入」ボタンをクリックします。

以上の操作で、画像が挿入されますが、画像の下に記事を追加するには、画像を挿入した後、「Enter」を押して

19

改行します。
３）その他の投稿パターン
ショッピングカートの設置やメールフォームの設置、宿泊予約フォーム、その他の中古車販売向け表示パターンなどを除くパターンは、実は基本表示パターンである、パターン A で表示できるのですが、かなりのスキルが必
要になります。
そこで Joy CMS は、基本表示パターン A 以外に表示パターンを設定してます。
メールフォームの表示パターンは、別途説明します。
●パターン B（画像のみの表示パターン）
このパターンは、基本パターンでもできますので、ほとんど使う機会がないと思いますが、一応説明します。

上図は、パターン B の入力フォームです。
タイトルは、非表示です。画像に適当なタイトルを付けます。
画像の配置は、左側、中央、右側の中から選択してください。
サムネイル画像の幅は、実際にホームページ上で表示される画像の大きさです。
「画像ファイルの指定」の「参照」ボタンをクリックして、表示させる画像ファイルを選択してください。
●パターン H（画像を横に並べる）
このパターンは、画像を横に２～５個並べるパターンです。

20

STEP 1 タイトルを付ける
画像にタイトルを付けますが、ホームページ上は、表示されません。
STEP 2 列数を選択する
横にいくつ画像を並べるかを選択します。ここで設定した列数に、アップロードする画像数が満たない場合は、満たない列は空白で表示されます。
STEP3 次の記事との間隔
次の記事との間隔を設定します。「スペースを空ける」にチェックマークを入れると次の記事と２０ピクセルの間隔が空きます。画像の下にスペースを空けないで説明文を挿入したい場合などは、「スペースを空けない」を選択します。
STEP4 画像のリンク先指定
画像のリンク先を指定する場合は、ここのフォームにリンク先の URL を入力します。必須ではありませんので不必要なら空欄でもかまいません。
STEP5 画像ファイルの指定
画像ファイルを指定します。画像ファイルは最低２つ以上。一つの画像ファイルのサイズは３００キロバイト未満にしてください。
●パターン K（マウスオーバーで画像を拡大させる）
このパターンは、２個～５個の画像をマウスを乗せることで拡大させる表示パターンです。
なお、このパターンは、JavaScript(ジャバ・スクリプト）が有効でないと働きません。

一番目の画像ファイルは、すでに拡大されて表示されますが、それ以降の画像は右側にサムネイル（縮小画像）として表示されます。右側のサムネイルにマウスを置くと、左側の拡大画像がその画像に切り替わります。
STEP1 タイトル
タイトルは、ホームページ上では、表示されません。管理上、解りやすいタイトルを付けてください。
STEP2 枠の色
画像の周りを取り巻く枠の色を１２色の中から選択します。

21

STEP3 画像のタイトル
画像の上部、枠上に表示されるタイトルを指定します。上図では、「我が町」がこれにあたります。
STEP4 次の記事との間隔「スペースを空ける」にチェックを入れると次の記事と２０ピクセルの間隔が空きます。
STEP5 画像の指定
５つの「参照」ボタンをクリックして、２個～５個の画像ファイルを指定してください。なお、一つの画像ファイルは
300 キロバイト未満にしてください。
●パターン N（スライド）
このパターンは、３個～５個までの画像ファイルをボタンでスライド表示させるパターンです。
画像の下にあるボタンをクリックすると画像が切り替わります。

STEP1 タイトル
タイトルは、ホームページ上で表示されません。管理しやすい名前をつけてください。
STEP2 画像ファイルの指定
３個～５個の画像ファイルを「参照」ボタンをクリックして指定してください。
画像ファイルは、３００キロバイト未満の JPEG、GIF、PNG ファイルに対応しています。
【５】記事を編集する
投稿した記事を編集するには、まずコントロールパネルのトップページのサイドメニューから「記事の訂正\削除」
をクリックします。

22

「訂正\削除」のページでは、掲載済みの記事のタイトルがカテゴリ別に表示されています。

上記の例で NO2 のタイトル「中小企業や店舗をターゲットにした CMS」を編集する場合は、そのタイトルの「訂正」欄にチェックマークを入れて、下の「訂正記事を選択」をクリックします。
記事が入力されたエディタが表示されますので、記事を編集します。（下図）【６】記事を削除する
既に投稿している記事を削除するには、先ほどの「記事の編集」とほとんど同じですが、異なる点は、記事の編集、削除ページで「削除記事を選択」を選択することぐらいです。

23

上図の例で言えば、「中小企業や店舗をターゲットとした CMS」とタイトルの付いた記事を削除するには、そのタイトルの右側の削除の項目にチェックを入れてその下の「削除記事を選択」と表示されたボタンをクリックします。

「記事の削除」のページでは、削除する記事の属するカテゴリと記事のナンバーが表示されますので、削除する
場合は、その下の「削除する」と表示されたボタンをクリックします。
【７】メニューの並びを変える

上図は、サイドバーとヘッダーの真下にメニューがあるサンプルです。
まず、コントロールパネルのトップページのサイドメニューから「カテゴリの移動」をクリックします。

24

登録されているカテゴリ（メニュー）の一覧が表示されます。
下図の例で、カテゴリ、中小企業向け CMS をカテゴリ、申し込みの後に移動させて見ます。
移動元選択で”中小企業向け CMS
を入れます。

”にチェックを入れます。その次に移動先選択で”申し込み”にチェック

次に、ページの一番下にある、「移動させる」ボタンの上（初期設定で”前に移動させる”になっています。）のプ
ルダウンから”後に移動させる”をクリックして、最後に「移動させる」ボタンをクリックします。
下図のように、”中小企業向け CMS”が”申し込み”の後に移動しました。

【８】記事の並びを変える
記事の並びは、同一カテゴリの中なら可能です。
Joy CMS では、新規記事は、追加したカテゴリの最後に追加されます。
記事の並び順を変えるケースは、例えば「新着記事」のカテゴリの中で追加した記事をトップに移動させる場合などがありますが、頻度としては多くありませんが、これがないと非常に不便に感じるはずです。
記事の移動は、コントロールパネルのトップページの左サイドメニューから、「記事の移動」をクリックします。

25

「記事の移動」をクリックすると、カテゴリごとに分かれた記事一覧が表示されます。
一覧の中から、移動したい記事が属するカテゴリを探し出します。

上図の例で、カテゴリ「導入事例」の中の移動元 NO4 の「株式会社 法面ウェブサイトを NO ２のネストピット様
ウェブサイトの下に移動させるケースで説明します。
移動させる記事は「株式会社 法面ウェブサイト」ですから、「株式会社 法面ウェブサイト」の移動元選択のチェックボックスにチェックを入れます。
移動先は、「ネストピット様ウェブサイト」ですから、それの移動先選択のチェックボックスにチェックを入れます。
「移動する」ボタンの上のプルダウンは、移動先の後に移動させますから、「後に移動させる」を選択して「移動する」ボタンをクリックすれば、記事が移動します。
このケースの場合、移動先に「佐賀県武雄市の陶芸家 井上浩一様ウェブサイト」を選択して、「前に移動させる」を選択しても同じ結果が得られます。
【９】メールフォームを設置する
ウェブサイトでの問い合わせや質問の受付けをメールフォームで受付けるケースが多々あります。
メールアドレスをそのまま記載すると関係のないところからスパムメールを送られてきますので、メールアドレスを隠蔽する意味からしてもメールフォームの利用は有効です。メールフォームの設置は、記事の表示パターン Dを使って、簡単に設置できます。
まず、コントロールパネルのトップページのサイドメニューから「記事の作成」をクリックします。

26

次にメールフォームを設置するカテゴリを選択します。

上図の例では、カテゴリ「お問合せ、ご質問」を選択しています。

「記事の表示パターンの選択」では、一番上の右側にある「パターン D」にチェックを入れます。
設定箇所は、「タイトル」のみです。管理上解りやすい名称を付けてください。

27※メールフォームから送られてきたメールは、「ツールの基本設定」で設定した受信メールアドレスに送られてきます。
【１０】記事に表を挿入する
ホームページに、表を使って表現したいケースが多々あります。
表を作成することを表組みとも言いますが、表組みは基本的な表示パターン A のテキストエディタを使って作成する方法と、記事の表示パターンの F を使って作成する方法があります。
１）エディタを使って表を作成する
まず、コントロールパネルのトップページのサイドメニューから「記事の作成を」選択します。

「記事の作成」をクリックして開いたページで、記事を掲載するカテゴリを選択し、記事の表示パターンとしてパターン A にチェックを入れたら最下部の「記事のカテゴリと表示パターンを選択する」と表示されたボタンをクリックします。
エディタのツールボックスの一番左の上から 3 番目のアイコンをクリックします。

28

「表の作成/編集」のポップアップ画面が表示されます。

「cellpadding」や「cellspacing」などの聞きなれない言葉がありますので、まずこれらの言葉の意味を説明します。
Cellpadding・・・・・表の枠線とその中の内容物（テキスト）との間隙。ピクセル単位。
Cellspacing:・・・・・セル（表の升目）とセルとの間隙。
枠線・・・・・表の枠の太さ。
参考事例として、下図の表を作成してみましょう。

「表の挿入\編集」のポップアップ画面の設定は、下図のようになります。

29

設定は、cellpadding を１０、cellspacing を０、枠線を１としています。
設定したら、「表の挿入/編集」のポップアップ画面の左下の「更新」ボタンをクリックします。

エディタの入力フォーム上に表が作成されますので、セル（枠）内をクリックしてテキストを入力します。
●セル（枠）の背景に色を付ける
見栄えを良くする為にセルの背景に色をつけるには、色を付けたいセル内を右クリックします。

表示されるポップアップの「セル」の部分にマウスを置くと「セルのプロパティ」が表示されますのでそれをクリックします。

「セルのプロパティ」が表示されたら、「上級者向け」タブをクリックします。
「背景色」の右側にあるボタンをクリックします。

30

「色の選択」のポップアップ画面が「セルのプロパティ」のポップアップ画面の上に重なるように表示されますので、「既定色」タブをクリックします。
「既定色」のサンプルから色を選択し、その色をクリックします。（画面上では、薄い水色を選択しています。）
選択したら、左下の「適用」ボタンをクリックします。

「セルのプロパティ」の背景色にカラーコードが入力されていることを確認して「更新」ボタンをクリックします。

セルの背景に色が付きました。

31２）表示パターン F を使って表を作成する
エディタの操作になれたら、エディタの表の挿入でやった方が簡単ですが、初心者には表示パターンの F を使って表を作成した方が楽かもしれません。（※表示パターン F では、セルの背景色を指定できないなど、機能的には劣ります。）
それでは、先ほどと同じ表を作成して見ましょう。

表を追加するカテゴリを選択したら、「記事の表示パターン」でパターン F を選択します。
STEP 1（列数と行数を決める）
表の作成フォームでは、「列数」に２を「行数」に２を入力してから最下部の「列数と行数を決める」と表示されたボ
タンをクリックします。
STEP 2（タイトルを決める）
タイトルを決めます。ホームページ上は、表示されませんので解りやすい適当な言葉を入れます。
STEP 3（次の記事との間隔および表の幅の設定方法）
次の記事と 20 ピクセルの間隔を空けたい場合は、「間隔を空ける」にチェックします。
表の幅の設定方法で、パターン H とは、画像を横に２から５表示するパターンです。パターン H で横 2 列の画像を表示させた真下に画像と同じ幅で表組みをしたい場合は、「パターン H に合わせる」を選択してください。
今回は、「セル幅、全幅を指定する」を選択します。
STEP 4（セル幅を指定）
左側のセル幅を指定します。列数が３の場合は、左側と右側のセル幅を指定しなければなりません。
このセル幅は、表の全幅より少なくとも５０ピクセル以上小さくなくてはなりません。
STEP 5（テーブルの全幅）
テーブルとは、表のことです。ここでは、表の全幅を入力します。
STEP 6（文字の大きさ）
表内の文字の大きさを指定します。

32

STEP 7（文字の色）表内の文字の色を指定します。「COLOR CODE」ボタンをクリックして表示されるカラーコードをクリックすると自動挿入されます。
STEP 8（テキストを入力する）
それぞれのセルにテキストを入力します。ひとつのセルに入力できるテキストの最大文字数は、１ 00 文字です。

テキストを入力したら、「記事を確認する」と表示されたボタンをクリックします。

最後の確認で、「左側のセル幅をもう少し狭くしたい」とか、修正する必要があればブラウザの”戻り”ボタンで戻って修正します。
問題がなかったら、「記事を生成する」と表示されたボタンをクリックします。
（１１）サイドバーに記事を掲載する
サイドバーには、メニュー以外に記事を掲載することができます。
下図は、サイドバーに記事を掲載した例です。

33

サイドバーへの記事投稿は、まずコントロールパネルのトップページより「サイドバーの記事の作成」をクリックします。

サイドバーの記事の投稿ページでは、「カテゴリの選択」、「表示スタイル」、「タイトル」、「本文」、「画像」と５つの設定項目があります。
STEP 1 カテゴリの選択
サイドバーの記事を掲載するカテゴリを選択します。ひとつのカテゴリで掲載できるサイドバー記事の最大は１０
記事です。
STEP 2 表示スタイル
この項目は、「記事本文のみ」と「タイトルと記事本文を表示」の二者択一になっていますが、「タイトルと記事本文を表示」を選択すると下図のように、タイトルが記事本文の上部に表示されます。

34

STEP 3 タイトル
表示スタイルで「記事本文のみ」を選択すると、タイトルはホームページ上に表示されます。
最大文字数３０文字以内ですが、タイトルを表示させる場合、文字数が多いタイトルだとオーバーフローしたテキストは非表示になりますので、なるべく文字数が少なくシンプルで解りやすいタイトルにします。
STEP 4 本文
エディタのよる入力になります。このページの「画像」の項目で画像を表示させることが出来ますが、エディタの「画像の挿入\編集」でも挿入することが出来ます。
この場合には、画像の表示幅を１５０ピクセルにしてください。それ以外ですと表示が崩れますので注意が必要です。
STEP 5 画像
画像を記事に挿入します。「画像ファイルの配置」で画像を本文の上に表示させるか下に表示させるかを指定します。
「画像ファイルの指定」では、「参照」ボタンをクリックして挿入する画像ファイルを選択します。
この項目は必須ではありませんので、指定しなければ本文のみの表示となります。
【補足】サイドバー記事の画像ファイルにリンクを貼りたい。
追加したサイドバー記事の画像ファイルにリンクを貼りたい場合、エディタの「画像の挿入\編集」機能を使う必要があります。
エディタを使った画像の挿入方法については、目次の４記事投稿の中の２）画像のアップロードと挿入で既に説明しました。読まれていない方はご覧になってください。
下図は、エディタの「画像の挿入\編集」機能を使って画像をアップロードしているところです。

サイドバーに画像を表示させる場合、画像の表示サイズに制限がありますので「画像の追加」画面で１５０ピクセ
ルを選択してアップロードします。

35

アップロード後、「画像の挿入\編集」画面上の「参照」ボタンをクリックして、アップロードさせた画像ファイルを選択して挿入します。
下図は、画像の挿入後の画像です。

挿入した画像をクリック（周りに小さな□が８個表示されます。）している状態で、ツールバーの「フォント」の真下にある、「リンクの挿入\編集」（鎖のマーク）をクリックします。。

一般タブのリンク URL にリンクするホームページのアドレスと必要ならターゲットにターゲット属性を指定して挿入ボタンをクリックします。
【１２】サイドバーの記事を編集する
サイドバーの記事を編集する要領は、記事を編集する要領と変わりません。
コントロールパネルのトップぺージにあるサイドメニューの「サイドバーの記事の訂正/削除」をクリックすることぐら
いでしょうか。

36

訂正方法は、”【５】記事を編集する”をご覧下さい。
【１３】サイドバーの記事を削除する
コントロールパネルのトップページのサイドメニューより「サイドバーの記事の訂正\削除」をクリックします。
サイドバーの記事の削除は、”【６】記事を削除する”と同じ要領ですので、割愛します。詳しくは、そちらをご覧ください。
【１４】サイドバーの記事を移動させる
コントロールパネルのトップページのサイドメニューより「サイドバーの記事の移動」をクリックします。
サイドバーの記事の移動は、”【８】記事の並びを変える”と同じ要領ですので、割愛します。詳しくはそちらをご覧ください。
【１５】ちょっと高度な操作方法
１）バナーの作成

上図の”初心者にも扱える操作性”や”月々１，０００円と破格なレンタル料”は、グリーンとピンクの四角い画像の上に表示されています。
このようなパーツを”バナー”と呼んでいますが、一般的にバナーは、画像ツールで作成します。
エディタをうまく使えば、実はこう言ったバナーも作成することが出来ます。
では、バナーの作り方をこれから説明してゆきます。
その前に、バナーの背景となる画像には、どんなものがあるのか見てみましょう。
まず、ためしに列数２、行数２の表を作成してみます。

37

表を作成する場合、どのアイコンをクリックするのか、もうお解りですね。ツールバーの一番左の上から３番目のアイコンをクリックします。

「表の挿入\編集」のポップアップ画面が表示されました。とりあえず、幅を５００に指定し、後はデフォルト（初期設定）の状態のまま「挿入」ボタンをクリックします。

エディタのフォームの中に破線で列数２、行数２の表が作成されました。
次に、どのセル（升目）でも良いですから、セルの中カーソルを移動して右クリックします。

38

ポップアップが表示されますので、”セル”→”セルのプロパティ”をクリックします。

「セルのプロパティ」のポップアップ画面から「上級者向け」タブをクリックし、その中の「背景画像」の右側にある「参照」ボタンをクリックします。

背景画像が、表示されました。どうやら幅は２４０ピクセルのみで高さのほうは、６０、８０、１００ピクセルの３種類あるみたいです。
背景画像の幅、高さが解ったところで、今作成した表を削除します。

セルの中の右クリックで表示されるポップアップの中から「表を削除」をクリックします。
これで表が削除されました。

39

それでは、早速下図のような横２列のバナーを作成してみましょう。

エディタのツールバーの表の挿入\編集のアイコンはどこにあるかもうお解りですね。
「表の挿入\編集」では、下図のように入力してから「挿入」ボタンを押します。

列数が、３列になっているのはバナーとバナーの間にスペースを設けるためです。
表の幅は、背景画像の幅が２４０ピクセルですので、２つのバナーの間のスペースを２０ピクセルとして５００にしました。（実は、この幅は５００以上にしないでください。表示が崩れます。）

フォーム上に破線で横３列１行の表が表示されます。
まず、左側のセルにマウスを置いて右クリックすると上のようなポップアップが表示されますのでセルのプロパティ
をクリックします。

40

「セルのプロパティ」のポップアップ画面が表示されたら、「上級者向け」タブをクリックして、その中の「参照」ボタンをクリックします。

背景画像の一覧が表示されますので、２４０×６０サイズの背景画像を選択し、右側の「挿入」ボタンをクリックします。
画像の一覧を閉じたら、セルのプロパティで背景画像のフォームに背景画像へのパスが入力されていることを確認して「更新」ボタンをクリックします。

下図のように、エディタのフォーム上の表の左側のセルの背景画像が挿入されまた。

41

右側のセルも、左側と同様の操作を繰り返して背景画像を挿入します。
中央のセルは、何もする必要がありません。
下図は、左側のセル、右側のセルともに背景画像の挿入が完了した画面です。

次に、左右のセルの中にテキストを挿入します。
もう一度セルのプロパティを開きます。
開き方は、もうご存知ですね。セルの右クリック→セル→セルのプロパティです。

「セルのプロパティ」のポップアップ画面では、「配置」と「垂直方向の配置」を”中央揃え”にして「更新」ボタンを
押します。

42

セルの中央にカーソルが表示されますのでテキストを入力してゆきます。その前に、書体とテキストの大きさを指定します。

書体はフォント一覧から好きなフォントを選んでください。ここでは、”Arial Black”を選択しました。

フォントのサイズは、「フォントサイズ」から、大きめの２４ピクセルを指定しました。

横２列のバナーが出来上がりました。
【補足】バナーのテキストにリンクを貼るには？
バナーのテキストからリンクを貼りたい時もあるかもしれません。
それには、まず表示されているエディタのフォーム内のテキストをマウスを右クリックしたまま、ドラッグして反転さ
せます。

43

テキストを反転させたまま、”リンク”のアイコンをクリックします。

表示された「リンクの挿入\編集」のポップアップ画面のリンク URL にリンクするホームページのアドレスを入力して「挿入」ボタンをクリックします。

ここで、問題があります、それはテキストの色が変わってしまうことです。
そこで、ちょっと高度になりますが、HTML ソースを開いてソースを編集しなければなりません。

ツールバーの”HTML”と表示されたアイコンをクリックします。

44

HTML ソースエディタが開きます。その中の”font-size: 24px;”><a”の後に半角スペースを入れて”style=”color:black;text-decoration:none;”と入力します（下図参照）

意味は、”color:black” ・・・・テキストの色は、黒（ブラック）”text-decoraiton”・・・・テキストデコレーション（文字装飾）は、なし（none）
この状態で、HTML ソースエディタの「更新」ボタンを押します。
これで文字が指定の色で表示されるようになりました。

【補足】こんなバナーリンクを作る場合は？
バナーでリンクを貼ることを”バナーリンク”と言いますが、下図は、一例です。このようなリンクバナーを作ってみます。

ツールバーから「表の挿入\編集」のアイコンをクリックします。

「表の挿入\編集」の画面に列１、行１、cellpadding ０、cellspacing ０、配置 中央揃え、枠線０、幅３００を入力して「挿入」ボタンをクリックします。

45

破線で一列一行の表（表と言うより破線の四角）が表示されますので、セル内を右クリックして「表のプロパティ」
をさらにクリックします。

「表の挿入\編集」のポップアップ画面では、「上級者向け」タブの「背景画増」の右側の「参照」タブをクリックします。

背景画像リストの中から、３００×４２のブルーの背景を選択し、右側の「挿入」ボタンをクリックします。

46

背景画増リストの画面を閉じて、「表の挿入\編集」画面の背景画像のフォーム内に画像ファイルへのパスが入力されていたら、「更新」ボタンをクリックします。

これで、表に背景画像が埋め込まれました。
次に、テキストを入力します。

セル内の右クリックで表示された、ポップアップから「セル」→「セルのプロパティ」をクリックします。

「セルのプロパティ」の「配置」と「垂直方向の配置」を”中央揃え”に変更して、「更新ボタンをクリックします。

背景画像の中央にカーソルが表示されますので、フォントに「明朝体」を、フォントサイズを１６ピクセルにしてテキストを入力します。
テキストを入力した後、テキストをマウスでドラッグして反転させ、ツールバーの最上部の左から３番目の「B」（太字）をクリックして書体を太くします。

47

次に、テキストにリンクを貼るために、もう一度、テキスト（資料請求はこちら）をマウスでドラッグしてツールバーのフォントの下の鎖の形をした「リンクの挿入\編集」のアイコンをクリックします。

「リンクの挿入\編集」でリンク URL を入力して「挿入」ボタンをクリックします。

リンクテキストの色がデフォルトのままで、しかもアンダーラインが付いています。
HTML ソースを編集して、黒い文字にします。

ツールバーより HTML と表示されたアイコンをクリックします。

HTML ソースエディタの内容を上図のように修正します。
（訂正前）<a href=”http://・・・・・・・・”>資料請求はこちら</a>（訂正後）<a style=”color:black;text-decoration:none;” href=”http://・・・・・・”>資料請求は・・・

48要するにアンカータグと言われる a タグに”style=”color:black;text-decoration:none;”を追記します。
※挿入箇所は”href=”http://・・・・・”の後でも可。ただし、必ず半角スペースを入れてください。
【画像とテキストが混在した表の作成】
次に、画像とテキストが混在した表を作成してみます。
作成する表は、下図のような表です。

枠がないので一見、表組みだとは気づかないかも知れませんが、横２列１行の表組みで作成しています。

エディタのツールバーより「表の挿入\編集」のアイコンをクリックします。

列数２、行数１、cellpadding、cellspacing、枠線は０、幅を４００にして配置を中央揃えで「挿入」ボタンをクリックします。

エディタのフォーム上に破線で表が表示されますので、左側のセルを右クリックして現れるポップアップから”セルのプロパティ”を選択します。

49

「セルのプロパティ」のポップアップ画面では、幅を２００として「更新」ボタンをクリックします。
今回は、表の全幅が４００ピクセルですので、画像の幅を半分の２００ピクセルにしましたが、任意に決めても結構です。

左のセル内にカーソルを置いた状態で、ツールバーの「画像の挿入\編集」のアイコンをクリックします。

「画像の追加\編集」のポップアップ画面で、「画像の追加」ボタンをクリックします。
「画像の追加」のポップアップ画面で幅を２００ピクセルとし、画像を指定してアップロードします。

50

「画像の挿入\編集」のポップアップ画面の「参照」ボタンをクリックして、アップロードした画像ファイルを挿入します。

左側のセルに画像が挿入されたら、右側のセルの右クリックで「セルのプロパティ」を選択します。

「セルのプロパティ」では、「上級者向け」タブをクリックして、その中の「スタイル」フォームに
padding:10px;と入力して「更新」ボタンをクリックします。

右側のセルに文字を入力すると余白がちゃんと出来ています。
先ほどの”スタイル”で padding:10px;とましたが、
padding とは、余白のことで”padding: 10px”とは、余白を１０ピクセル設けると言う意味です。

51