サイト作りのステップ

まず、concrete5の操作方法を3つ、ご紹介します。そのあとインストールから作業の流れをご紹介しています。

インストールは最初の難関ですが、落ち着いてやれば大丈夫です。インストールが終われば、あとは理解しやすいところしかご紹介してないので(私が理解できる程度のことだけなので)、安心してください。concrete5はページ内のブロックの配置がえも、サイトマップ上のページ位置の変更も、簡単に大胆にできるのがいいところです。

操作方法
#
使い方の基本1:新しいページを追加する
ひな形をクリックすれば新しいページができます。サイトマップ上の場所を設定し、ページの名前を決めます。場所と名前が決まっていれば公開ができます。公開したページはサイトマップに組み込まれます。公開したあとでもサイトマップ上でページの場所を変更することができます。
#
使い方の基本2:ブロックを追加する
ページにある「エリア」に、画像や記事の「入れ物」を置いて、その入れ物に内容を入れる、という流れです。concrete5ではこの入れ物を「ブロック」と呼びます。ブロックはページに置いた後でも、位置を移動することができます。
#
使い方の基本3:レイアウトを追加する
ブロックは縦にしか並べられないので、横に並べたいときは「レイアウト」を追加します。追加時に「Twitter Bootstrap」を選択しておけば、スマホで見たときには縦に並んでくれます。レスポンシブ対応、スマホファーストです。
インストール
#
インストール:cPanelを使ってカラフルボックスに
concrete5をレンタルサーバー「カラフルボックス」に、cPanelというコントロールパネルを使ってインストールする流れです。
#
インストール:Simple Downloaderを使ってConoHa WINGに
concrete5をレンタルサーバー「ConoHaWING」にインストールする流れです。Simple Downloaderを使います。データベースを作り、CMSファイルをサーバーで展開してインストールします。
#
プリティーURL設定
インストールしたサイトのURLに含まれる「index.php」を隠す設定です。エラーが出たときの対処方法も解説してます。
サイトの構想を作っておく
#
準備1:サイトマップの構想を練る
PCで作業を始める前に、サイトの構成を作っておくと後で迷うことが少なくなります。concrete5はサイトマップでページを管理するので、紙に書いたものをそのまま再現していくことができます。
#
準備2:ページのひな形を考えておく
PCで作業を始める前に、ページのひな形も考えておくと後がスムーズです。ページのひな形「ページタイプ」は、ページのどこに何を配置するかを決めたものです。
サイト構築の準備
#
作業前の準備と、ファイルマネージャーの使い方
PCでサイトを作る前の準備です。ツールバーの簡単な説明、ファイルマネージャーの使い方の解説、作成中のサイトを非公開状態にしておく設定方法など。
#
ページタイプ(ひな形)を作る
concrete5でサイトを作るための最初の作業。新規ページを追加するためにはページタイプが必要です。ページにどんなコンテンツを置くか、どんな属性をつけるかということを決めます。複数人でサイトを作っているなら、誰がどのページタイプを編集できるか権限を設定することもできます。
#
トピックツリーを作る
サイトでトピックを使うときには、トピックツリーを作る必要があります。トピックはカテゴリとは別の分け方で、「こういうキーワードで各カテゴリに散らばっている記事をピックアップしたい」というようなときに使います。あらかじめ決めておくタグ…な感じ。
#
属性(ページに付けられる情報)の種類を知る
concrete5ではページにいろんな属性をつけられます。属性を自分で作ることができるので、サイトに合わせて、サイトをどう使うかに合わせて、工夫次第で便利なサイトを作れると思います。
コンテンツを編集する
#
ブロックの使い方_1
デフォルトで使えるブロックの解説(前半)です。エディターブロックはリッチテキストで、機能が足りないかなと思ったら管理画面から追加することもできます。
#
ブロックの使い方_2
デフォルトで使えるブロックの解説(後半)です。なんと、データベースが使えます!それから、カレンダーやイベント情報の表示ができます!これらが標準機能でできるのがすごい!らしいです。他にもいろんなブロックがあります。
#
クリップボードとスタック
複数のページに同じコンテンツを埋め込む方法として、ページタイプの他にスタックとクリップボードがあります。スタックはブロックをいくつかまとめたもの(一つでも可)で、編集すると配置したもの全てに反映されます。クリップボードはブロックをひとつコピーしたもので、ペースト先で個々に編集が可能です。
テーマとアドオン
#
テーマとアドオン:はじめはデフォルトテーマをおすすめ
はじめはデフォルトテーマのままで使い方を理解しようとおすすめしていますが、デフォルトテーマはカラーのプリセットが4パターン用意されていて、ワンクリックで変更できます。また、かなり細部まで個々の色変更が可能です。
#
テーマとアドオン:マーケットプレイスを利用する
テーマやアドオンは、公式サイトのマーケットプレイスで配布・販売されています。正式にはサイトをマーケットプレイスに接続してインストールするのですが、接続ができない場合でもインストールは可能です。
#
テーマとアドオン:おすすめ無料アドオン6コ
デフォルトで使えるブロックの他に、ちょっと便利だなと思う無料アドオンをご紹介します。トップへ戻るボタン、スペースや区切り線などを細かく設定して配置できるブロック、タイトルをクリックすると本文があらわれるブロック、など。
#
ソーシャルシェアボタンを設置する
デフォルトで設置できるシェアボタンにははてブやLINEが含まれないので、それを含めることができるアドオンを使います。併せて、FacebookやTwitter用のタグをヘッダーに入れてくれるアドオンも使い方とともにご紹介してます。
仕上げ
#
サイト公開前にしておくこと
ページの属性(説明・サムネイル・URLスラッグ・Metaタグタイトルなど)の入力がされているかチェック、ファビコン・アイコンを作る、非公開状態を解除する、など。サイトバックアップの方法もご紹介してます。