今まで行政関連のサイトの立ち上げに関わらせて頂き、Joruri CMSやZOMEKIを使用してきました。
今回はZOMEKIでの構築でトップページを作るところまでの方法を、自分でのおさらいもかねて紹介してみます。
1.インストール
ここは、少々難しいので…いきなりですが、割愛します。
GitHubのページに自動スクリプトも用意されているので、黒い画面に慣れている方は挑戦してみてください。
https://github.com/zomeki/zomeki-development
2.機能を追加する
インストール直後にログインすると、まっさらな状態のためサイトらしい設定は何もありません。
ここから何をすれば良いのかと悩みますが、とりあえずは何も考えずに下記の3種類の設定をすることをオススメします。
| 項目 | 管理画面の場所 | 機能 |
|---|---|---|
| コンセプト | サイト | 管理者の権限をコンテンツやレイアウトごとに切り分けることができます。 |
| コンテンツ | コンテンツ | 記事作成出来る機能、メールフォーム、承認フロー機能など、機能を設定できます。 |
| ディレクトリ | ディレクトリ | コンテンツで作成した機能にディレクトリを設定します。また、静的な固定ページを作成します。 |
コンセプト
「サイト」→「コンセプト」→「新規作成」をクリックし、コンセプト名「トップページ」というのを作ってみます。
コンセプト名を入れて「登録する」で完了します。
左上の「zomeki」の下と同じく「zomeki」と記載のあるプルダウンメニューをクリックすると「トップページ」というのが追加されていると思います。
ついでに、初期値で「zomeki」と設定されている箇所を「ルート」にしておくと分かりやすいと思います。
コンテンツ
ブログなどのような記事を作成出来る機能を追加します。
「コンテンツ」→「新規作成」からコンテンツを作成します。
コンテンツ種別「汎用記事」を選択し、IDとコンテンツ名を入力します。
「登録する」をクリックして登録できます。
ディレクトリ
コンテンツを作っただけでは、まだディレクトリが作成されていないため機能が使用できません。
「ディレクトリ」→「新規作成」で新規にディレクトリを作成します。
コンセプトは「ルート」に選択します。
コンテンツの項目で作成した「記事作成」を選択します。すると、アイテム種別が自動的に抽出されます。「ディレクトリ/汎用記事ページ」を選択します。
ディレクトリは一度保存した後に再設定が出来るので、とりあえず「レイアウト」「並び順」は未記入でも構いません。
「登録する」で一時的にディレクトリが出来た状態となりますが、続けて「編集」をクリックしてディレクトリ名をつけます。
ディレクトリ名は半角英数字で入力します。
タイトルはコンテンツにあわせて自動的に「汎用記事ページ」と入力されますが、このディレクトリにアクセスしたときのタイトル名になるので、任意で変更してみましょう。
入力出来たら「公開保存」で作成完了となります。
3.見た目を作る
機能が用意出来たので、サイトの見た目を作り込んで行きます。
見た目に関わるところは「レイアウト」を設定すると作る事ができます。。
管理画面の場所は「デザイン」→「レイアウト」になります。
ピースを作る
まずトップページを以下のようなレイアウト構成を想定します。
レイアウトを作り込むには、トップページ以外の下層ページにも使用するであろうパーツ「ピース」をつくっていき、レイアウトにはめ込みます。
作り方は、ピース一覧画面で「新規作成」をクリックます。
「コンセプト」をルート
「コンテンツ」標準機能
「アイテム種別」自由形式
とそれぞれ入力し、ピースIDとピース名をそれぞれ入れて「登録する」をクリックします。
続けて「編集」をクリックして、「本文」中に必要なコードを入力します。
この作業を繰り返して、サイトの構成にあわせて「デザイン」→「ピース」の画面でそれぞれ下記の通りにピースを作りました。
新着一覧のピースも作ります。
コンセプト「トップページ」に選択します。
コンテンツ「記事作成」を選択して、アイテム種別「汎用記事一覧」を選択します。
ピースIDとピース名をそれぞれ入力して「登録する」をクリックします。
登録直後の画面に続けて「編集」をクリックします。
表示件数に任意の数字
記事表示形式に任意のタグ
「置き換えテキストを確認する」をクリックすると、どのタグを入力出来るのかの一覧が出てくるので、そこを参考にしてください。
一覧リンク文字と一覧リンクURLに任意のリンク先を指定
表示件数よりも別リンクで多く見せる時のリンクの指定になります。
「更新する」で保存完了です。
レイアウトを作る
続けて「ピース」を「レイアウト」に当てはめます。
「デザイン」→「レイアウト」→「新規作成」とクリックします。
レイアウト部分を見ると、タブがいくつか分かれています
上のタブエリア
- 標準レイアウト…PCでアクセスしたときの見た目
- 携帯レイアウト…ガラケーでアクセスしたときの見た目
- スマートフォンレイアウト…スマートフォンでアクセスしたときの見た目
下のタブエリア
- HEADタグ…<header></header>で囲う箇所を入力するところ
- BODYタグ…<body></body>で囲う箇所を入力するところ
- スタイルシート…スタイルシートを入力するところ。外部スタイルシートで指定してしまう事が多いので、あまり使いません。
ピースを反映するときは「BODYタグ」の中に
|
1 |
[[piece/ピースID]] |
という記述を追加します。
例えばピースを作成したときに、ヘッダーエリアのピースIDを「common-header」と設定しました。
|
1 |
[[piece/common-header]] |
と入力する事でピースを表示する事が出来ます。
また、ここで、ディレクトリのアイテム種別を「ディレクトリ」以外に設定し、何かのコンテンツや「ページ/自由形式」で入力した内容を表示させたい場合は
|
1 |
[[content]] |
という記述を入れましょう。
今回はこんな感じで入力しています。
コンセプトを「トップページ」に変更し、ID、レイアウト名をそれぞれ入力します。
レイアウトの「HEADタグ」「BODYタグ」に任意のコードを入力します。
外部CSSなどは「HEADタグ」の中にリンクで入れます。
「登録する」で作成完了です。
まだコレだけではまだ見た目に反映出来ていません！
ディレクトリに戻って、今作成したトップページのレイアウトを反映させましょう。
「ディレクトリ」をクリックし、インストール直後からあるindex.htmlの「詳細」をクリックします。
レイアウトの項目に「トップページ」を選択して「公開保存」をします。
設定に大きな問題が無ければ、プレビュー列の「PC」で見た目が反映されたのが確認出来ます。
zomekiには日々新しい機能が追加されており、情報も少ないので、使ってみないとわからないということが多いかと思います。自分の環境にインストールして、いろいろと試して行きたいところです。
コミュニティ・クリエイションはZOMEKIを使用して、自治体サイトや子育て応援サイトの制作・運用実績が多数あります。
ご興味がありましたら一度お問合せください。
