シンプルなCMS「JS CMS」とは？特徴や基本的な使い方を解説

JS CMSの基本的な使い方

JS CMSを使ってWebサイトを制作する場合、公式サイトからデータをダウンロードし、レンタルサーバーなどにアップロードする必要があります。その後、管理画面にアクセスすると、ページの内容を変更することが可能です。

ここでは、JS CMSをサーバーにインストールする方法と、管理画面を使った基本的な編集方法を解説します。

サーバーへのインストール方法

まずはJS CMSの公式サイトにアクセスし、作ろうとしているWebサイトのイメージに近いデザイン・レイアウトのデータをダウンロードしましょう。

JS CMSのデータは「小規模サイト用」「中規模サイト用」「ミニマム」の3つに分かれていて、それぞれレイアウトやカラーバリエーションが複数用意されています。

出典：ダウンロード | 簡単・無料の小～中規模ホームページ向けオープンソース日本語CMS - JS CMS

「JS CMSダウンロード」を選択すると、ZIP形式で圧縮されたデータ一式の取得が可能です。

次に、FTPソフトを使ってWebサイトを構築する予定のサーバーにアクセスしましょう。そして、先ほどダウンロードしたデータ一式を解凍しサーバーにアップロードすることで、インストールが完了します。

例えば、「〇〇〇.com」のルートディレクトリにデータ一式をアップロードした場合、トップページのURLは「〇〇〇.com/index.html」です。

あるいは、ルートディレクトリに「test」というフォルダを新規作成し、データ一式をアップロードすると「〇〇〇.com/test/index.html」がトップページとなります。必要に応じてサーバー上にフォルダを作成したうえで、JS CMSのデータをアップロードしてください。

トップページのURLにアクセスし、初期設定のWebサイトが表示されていれば、サーバーへのインストールは完了です。

上の画像は「小規模サイト用」の一例のため、ダウンロードしたデータによっては外観が異なる場合があります。

もし初期設定のWebサイトが表示されない場合は、アップロード先のディレクトリが正しいか、データの抜け漏れがないかなどを確認しましょう。

管理画面の機能

JS CMSのテキストや画像の編集を行うための管理画面には、サイトのアップロード先に「/_cms/」を追加したURLからアクセスできます。

例えば、「〇〇〇.com/test/」にサイトをアップロードした場合、管理画面のURLは「〇〇〇.com/test/_cms/」です。

管理画面のURLにアクセスすると、ログイン情報の入力欄が表示されます。

初期設定のIDとPASSはいずれも「guest」です。IDとPASSを入力し「LOGIN」を選択すると、管理画面にアクセスできます。

左側にあるメニューは、すでに作成されているページの一覧です。「HOME」や「会社概要」などを選択すると、該当ページの編集画面が中央部に表示されます。

画像やテキストをダブルクリックすることで編集が可能です。例えば、「HOME」のページにある「お知らせ」のテキストを変更する際は、ダブルクリックまたは「編集」をクリックして修正を行いましょう。

今回は、「お知らせ」から「新着ニュース」にテキストを変更しました。

変更を実際のWebサイトに反映させるために、管理画面右上から「保存する」を選択後、「公開する」を選択してください。ただしロックがかかっていると変更が保存できないため、管理画面右上の「ロック」ボタンを選択して解除しましょう。

同様の手順でサイト内にある各ページの画像やテキストを変更することで、自社サイトの制作が可能です。