130
はじめてのconcrete5で ウェブサイト作成 入門チュートリアルガイド by Takuro Hishikawa (Concrete5 Japan Inc.) v.2015.1.9 画面はconcrete5.7.3のものです。

はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

Embed Size (px)

DESCRIPTION

オープンソースCMS「concrete5」でウェブサイトを作ってみよう!初心者対象のチュートリアルガイドです。用意するものはブラウザのみ。HTML/CSS/PHPの知識は一切不要。勉強会などで使用してください。

Citation preview

Page 1: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

はじめてのconcrete5でウェブサイト作成

入門チュートリアルガイドby Takuro Hishikawa (Concrete5 Japan Inc.)

v.2015.1.9

画面はconcrete5.7.3のものです。

Page 2: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

concrete5とは?

• オープンソースのCMS

• オープンソース…ソフトウェアのプログラムのソースコードが公開されていること。公開されているので、どなたでも入手してライセンスに従って利用できる。

• CMS…コンテンツマネジメントシステムの略。ウェブサイトのコンテンツを管理するためのシステム。

Page 3: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

concrete5の特徴

• ドラッグ&ドロップで、ページ内にブロックと呼ばれるパーツを並べていく方式

• 公式サイトからソフトウェアをダウンロードし、サーバーにインストールして使用する

• もともとは企業などで大人数でコンテンツを作成するための有償のソフトウェアがオープンソースになったもの

Page 4: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

concrete5の歴史• 2003年にアメリカで開発された「Concrete CMS」が前身

• 2008年にオープンソースとして配布開始、2009年には日本語のユーザーコミュニティが発足

• 2011年に日本国内の企業ユーザーのサポートや、concrete5のビジネス活用を促進するコンクリートファイブジャパン株式会社ができる

• 2014年『concrete5 公式活用ガイドブック』出版

Page 5: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

2つのバージョン• バージョン5.6系と5.7系の2つのconcrete5があります

• バージョン5.7はモバイル時代に対応した新しいインターフェースを実装した最新のconcrete5ですが、リリースされたばかりで情報も少ない

• バージョン5.6系も今年まで最新版が開発されていた安定して動作するバージョン。5.7がリリースされたあともメンテナンスは継続されます。『concrete5 公式活用ガイドブック』で解説しているのはこちら

• 今回使用するのはバージョン5.7です

Page 6: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

concrete5 関連リンク

• 日本語公式サイト concrete5-japan.org

• 英語公式サイト(本家) concrete5.org

• Facebook www.facebook.com/concrete5japan

• Twitter twitter.com/concrete5japan

Page 7: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

concrete5を インストールしてみよう!

Page 8: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

ウェブサーバーについて• PHPとMySQLが利用できるウェブサーバーが必要です(PHPのバージョンや必要モジュールなどさらに詳細な要件は公式サイト「使用条件」ページを参照)

• 自動インストーラーのあるサーバーもあります(公式サイト「ホスティング会社別インストールガイド」ページを参照)

• ご自分のパソコン内にウェブサーバーのソフトウェアをインストールすることで、ローカルマシンでconcrete5を動作させて開発確認することもできます。XAMPP, MAMPなどがよく利用されています

Page 9: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

ウェブブラウザについて

• concrete5はブラウザから操作します。通常のウェブサイトよりも複雑な動きをしますので、古いブラウザだと付いて来れないことがあります。できるだけ最新バージョンを使用してください。

• また、高速に動作するブラウザがオススメです。ChromeやFirefoxが良いです。

Page 10: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

今回使用するのは

• NIFTY Cloudの「C4SA」というサービスを利用します

• 月額900円~から利用できるアプリケーション開発プラットフォーム

• 15日間無料で利用できます

• あとからスペックアップができるクラウドサービス

• concrete5の動作に必要なセットアップを自動でやってくれます

Page 11: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

サイトにアクセスして「ログイン/利用開始」ボタンをクリック

http://c4sa.nifty.com/

Page 12: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

いずれかのアカウントでログインしますSNSやGoogleのアカウントをお持ちでない方は @nifty ID を作成してください

Page 13: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

キャンバスを作成新規キャンバス ボタンをクリック

Page 14: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

Canvas S プランを選択D1, D2はさらにハイスペックですが無料期間が短いです

Page 15: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

コンテクストを選択concrete5 を選んでください

Page 16: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

キャンバスに名前をつける分かりやすい方がいいでしょう

Page 17: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

キャンバスが自動で作成されています

しばらくお待ちください

Page 18: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

キャンバスの作成が完了キャンバスを開く ボタンをクリック

Page 19: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

作成されたサイトにアクセスしましょう

Page 20: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

インストール言語(地域)の選択Japanese (Japan) を選択しましょう

Page 21: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

サーバーのチェックが行なわれますお使いのサーバーによって赤いチェックが出た場合は、

サーバーの設定を見直してください。

Page 22: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

サンプルコンテンツの選択今回は「空白のサイト」を選択します

Page 23: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

サイトの基本情報を入力パスワードは必ず複雑で推測できないものに!

パスワードを忘れるとログインできません。

必ずメモ!

Page 24: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

データベース情報を入力左側がC4SAのコントロールパネルです。

※コピー&ペーストすると不要な改行が含まれることがあります。 タイプして入力してください

Page 25: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド
Page 26: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

インストール完了!

Page 27: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

システムと設定ページを開く

Page 28: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

アクセシビリティページを開く

Page 29: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

ツールバータイトルを有効化にチェックして保存しましょう慣れるまではタイトルを出した方が便利

Page 30: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

サイト名を入れましょう

Page 31: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「新規」ボタンでブロック一覧を開き、「記事」ブロックを「Header Site Title

Area」までドラッグします

Page 32: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

エリアの枠線が太くなったら、離します

Page 33: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

サイト名を入力して、見出し1を選びましょう

Page 34: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

サイト名を選択してから「リンクを追加」をクリック

Page 35: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

サイトマップアイコンをクリック

Page 36: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

ページを選択すれば、そのページへのリンクをつけることができます。

いまはまだ「ホーム」ページしかありません。

Page 37: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「挿入」ボタンでリンクが完了サイト名をクリックするとホームページに戻れるのがセ

オリーです

Page 38: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

エディタの「保存」ボタンをクリックして「記事」ブロックの編集を完了

Page 39: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

画像ブロックを入れてみよう

Page 40: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「新規」ボタンで開いたパネルから「画像」ブロックを「メイン」エリアにドラッグ&ドロップして配置しましょう

Page 41: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

画像の「新ファイル選択」をクリック

Page 42: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「ファイルマネージャー」が表示されますので、「ファイルをアップロード」をクリックファイルのアップロードができたら、ファイルをクリッ

クして選択

Page 43: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

その他のオプションALTテキストは必ず入力しましょう。画像の代替(Alternate)となるテキストです。視覚障害など画像が見れない方に提供する情報になります。

Page 44: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

画像を用意してない方は… フリーライセンスの写真サイトでダウンロードしましょう

Page 45: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

複数のフリーライセンスサイトから写真を検索できるサービス

http://www.pexels.com/

Page 46: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

日本でとってもよく使われている写真素材サイト

http://www.pakutaso.com/

Page 47: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

利用規約やライセンスに注意

Page 48: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

どーん!入りましたちょっと大きいですね

Page 49: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「画像」ブロックをクリックしてメニューを表示、「ブロック編集」をクリック

Page 50: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

選択した画像をクリックしてメニューを表示、「編集」をクリック

Page 51: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

幅を1200pxくらいに縮小、画像の切り抜きで高さを小さくしましょう操作をデモンストレーションしますので見てください

Page 52: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

お好みでフィルターもかけましょう画像の編集が終わったら「保存」ボタン

Page 53: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

画像の編集を反映させるため、一度画像を「クリア」して選び直しましょう

Page 54: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

良い感じになりました

Page 55: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

コピーライト表記を入れましょう

Page 56: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「記事」ブロックを「Footer Legal」エリアに ドラッグ&ドロップで配置しましょう

Page 57: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

こんな感じでフッターには連絡先やお店の住所なども記載します

Page 58: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

編集を保存しましょう

Page 59: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「編集モード終了」ボタンをクリック、公開、または一時保存、破棄を選びます

あとでどのような変更をしたか分かるように、 コメントはできるだけ残しましょう

Page 60: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「公開」すると即、変更が反映されます。 「保存」すると、このようにページが

「承認待ち」になります。

「このバージョンを承認する」ボタンを押すまで、 一般ユーザーにはひとつ前のバージョンが見えている状態です。

Page 61: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

編集履歴(バージョン)は、 「設定」ボタンの「バージョン」メニューから確認できます。過去のバージョンを「承認」すると、そのバージョンが一般公開になり、最新バージョンは下書き扱いになります。

Page 62: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

ちょっとウェブサイトっぽくなってきましたね!

Page 63: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

レイアウトを追加してみよう

Page 64: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

編集モードで、「メイン」エリアのタブをクリックしてメニューを開き、「レイアウトを追加」をクリック

Page 65: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

上下の▲▼でカラム数を調整 □を左右に動かして幅の調整

「レイアウトを追加」ボタンで確定

Page 66: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

レイアウトで分割したエリアに、 「特色」ブロックを置いてみましょう

Page 67: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

レイアウトを使うと情報の整理ができます

Page 68: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

レスポンシブデザインレイアウトは、幅の狭い画面で見ると縦に並びます。これを「レスポンシブウェブデザイン」といい、スマートフォンやタブレットなど、幅の狭い画面での表示に対応できます。

レイアウトは見た目だけで追加するのではなく、縦に並べた時に情報の意味が通っている必要があります。

編集するマシンの画面が小さいと、レイアウト機能を追加したのに何故か縦に並ぶ?ということがありますが、このためです。

Page 69: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

レイアウト作成のための参考資料

• 「モバイルファーストからコンテンツファーストへ」レスポンシブWebデザイン専門家が語る、コンテンツの捉え方http://contentmarketinglab.jp/trend-in-japan/responsive-web-design-4.html

• レスポンシブ ウェブ デザインに再構築し、ユーザー動向と収益性を大きく改善「なつレゴ」事例http://adsense-ja.blogspot.jp/2013/11/4.html

Page 70: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

ページを追加してみよう

Page 71: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「新規ページ」ボタンから、「新しいページ」のリンクをクリック

Page 72: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

新しいページには、空の記事ブロックがひとつ置かれているだけの状態です。サイト名とコピーライトは共通ですでに入っています。「サイト全体の」と表記されているエリアは、中身が全ページ共通になります。

Page 73: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

記事ブロックの上に「ページタイトル」ブロックを配置してみましょうページの名前を自動で表示する便利なブロックです。

Page 74: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

このまま「新規」ボタンで追加まだページの名前を付けていないので空っぽで表示され

ますが、気にせず続けましょう

Page 75: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

記事ブロックを編集しましょうブロックをクリックしてメニューを表示、

「ブロック編集」を選択

Page 76: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

記事ブロックを保存したら、 ツールバーの「設定」ボタンをクリックしてください。

Page 77: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

基本情報をすべて入力し、「公開」ボタンをクリックしてください。

ページ名はナビゲーションにも表示されますので分かりやすく。 「ページ位置」は、サイト内のどの位置にページを配置するかを選びます。

Page 78: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

ページが作成できました!

Page 79: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

次に、「お問い合わせ」ページを作成してみましょう。

Page 80: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「お問い合わせ」ページは 3つのブロックで構成されています。

Page 81: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「フォーム」 ブロックを追加してみましょうフォームに表示する「質問」のラベルと、答えのタイプを選択し、「新規質問」をクリック。これを繰り返して、最後に右下の「新規」ボタンをクリックします

Page 82: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「編集」タブから 追加済みの質問を編集したり、 並び替えができます。お問い合わせの内容はデータベースに保存され、管理画面から確認できます。メールで通知を受け取りたい場合は、「オプション」タブで設定してください。

Page 83: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

ナビゲーションを追加してみよう

Page 84: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「オートナビ」ブロックを「Header Navigation」エリアに追加しましょう

Page 85: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

設定はそのままでOKです設定項目の詳細は、公式サイトを参照してください。

Page 86: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

ナビゲーションのデザインを調整しましょう

ブロックメニューの「デザイン&カスタムテンプレート」を選択します

Page 87: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

カスタムテンプレートを変更しましょうギアボタンをクリックし、表示される「詳細」パネルの「カスタムテンプレート」のプルダウンで、「レスポンシブヘッダーナビゲーション」を選択して、「保存」をクリックしてください。

Page 88: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

ナビゲーションのデザインが 変更されました!

Page 89: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「お知らせ」機能をサイトに追加しましょう

Page 90: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

まず「News」ページを作成します。中身は空で構いません。

あとでお知らせの一覧ページにします。

Page 91: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

お知らせ専用のページタイプを作成します。 「ページ」の横にある「コピー」ボタンをクリックページタイプ…サイト内の様々なページを、種類別に整

理するための機能。

Page 92: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

名前とハンドルを設定して「コピー」ボタンをクリック名前…ページを作成する時に選択肢に出てくる ハンドル…システムで使用。半角英数字で設定

Page 93: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

作成したページタイプの 「基本情報」ボタンをクリック

Page 94: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「お知らせ記事」ページタイプの編集!

コンポーザーで開きますか?を「はい」に

Page 95: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

公開方法を選びます先ほど追加したお知らせ一覧ページの下の階層に、

新しいお知らせ記事が追加されていくようにする設定です。 最後に「保存」ボタンをクリック

Page 96: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

次に、作成したページタイプがどのように出力されるかを設定しましょう

Page 97: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「デフォルトを編集」ボタンを クリック

Page 98: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

編集モードに切り替え、「メイン」エリアに「ページタイトル」ブロックを配置してください

通常のページ編集と同じ手順です

Page 99: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「ページタイトル」ブロックのカスタムテンプレートを「バイライン」に変更して保存!

ブログの様に日付などが表示されるテンプレートです。

Page 100: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「コンポーザーブロックコントロール」ブロックをページタイトルの下に追加しましょう。ページタイプのデフォルトを編集する時のみ使える特殊

なブロックです。

Page 101: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド
Page 102: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

このようになればOKです「編集モード終了」ボタンをクリックし、変更を保存し

てください。

Page 103: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

新規ページからいま作成した 「お知らせ記事」ページタイプを選択

Page 104: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「お知らせ記事」の作成ができるようになりました「公開」ボタンで公開

Page 105: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「News」ページを、お知らせ記事の一覧ページにしましょう

Newsページにアクセスし、「ページリスト」ブロックを配置しましょう。

Page 106: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

表示件数を指定し、表示するページタイプを選択しましょう

ここでは、「お知らせ記事」を選択。件数はお好みで

Page 107: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

その他の設定の例

Page 108: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

お知らせページができました!お疲れさまでした。ページタイプを設定しておくと、日々

の更新の手間を削減することができます。

Page 109: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

備考: 作成中の下書きページは、「新規ページ」の下に表示されています。

Page 110: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

フルサイトマップでサイト全体の構造を考えよう

Page 111: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

サイト全体の構成を「フルサイトマップ」ページで確認できます

Page 112: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

ページのアイコンをつかんでドラッグ&ドロップで並び替えができます移動できる位置に線が表示されますので、その状態で離

すと離した位置にページが移動します

Page 113: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

ドラッグして他のページの上でドロップすると、そのページの下層にページが移動します移動、エイリアス、コピーから操作を選択できます。

Page 114: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

その他、ウェブサイトの公開前にやっておくことを

さらっと紹介…

Page 115: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

システムと設定 > SEOと統計

• プリティーURLconcrete5のデフォルト設定ではURLに /index.php/ が入りますが、これを消して短いURLにします(一部対応していないサーバーもあります)

• トラッキングコード Google Analyticsなどのアクセス計測タグを入力します。

Page 116: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

システムと設定 > 適化 > キャッシュとスピード設定• PHPは、ウェブサーバーにアクセスがある度にデータベースからデータを読み込み、HTMLに整形してウェブページを表示する関係で、表示に時間がかかります。処理結果を一時的に保存しておくことで表示を高速化することができ、その仕組みをキャッシュと言います。

• ウェブサイトを公開したら、キャッシュは基本的に有効にします。デザインの変更等大きな変更を行う際は無効にしておきます。

• フルページキャッシュは劇的に表示を高速化しますが、「すべての場合でキャッシュを利用」オプションを使うと、フォームなどの「動的」なブロックが、動かなくなります。

Page 117: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

システムと設定 > 適化 > 自動実行ジョブ

• 検索ブロックのための検索インデックス(索引)の作成、SEOのためのsitemap.xml(検索エンジンにサイト内のページの一覧を通知するファイル)の更新、古いページバージョンを削除してデータベースを軽くする、などのメンテナンス処理を定期的に実行する必要があります。

Page 118: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

サーバーでcronが 使えない場合は、 「ページにアクセス があった時に処理」 を選択してください。

(C4SAは使えません)

Page 119: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

システムと設定 > 権限とアクセス

• サイトアクセスウェブサイトの作成中で一般公開したくない、又はログインユーザーのみの非公開サイトを作りたい時

• 上級権限モード 企業などの人数の多い組織向けの詳細な権限を設定できるモード

• IPブラックリスト不正ログイン対策

Page 120: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

システムと設定 > Eメール

• メールが送れないサーバーの場合、フォームブロックの通知メールやパスワードリセットメールが届かない。

• 外部のSMTPサーバーを介してメールを送信することができる。プロバイダーで提供されているSMTPサーバーやGmailなどを使うことができる

• C4SAはメールが送れないタイプのサーバー

Page 121: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

Gmail経由でメール送信する設定の例

Page 122: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

ブログ設定

• ブログの利用設定はちょっと複雑ですが、どのようなブロックを配置するかは、インストール時に「フルサイト」を選択すると分かります。

• アメブロ、WordPressなどを利用し、「RSS表示」ブロックで最新記事を読み込むこともできます。

Page 123: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

concrete5を拡張• テーマ(外観)やアドオン(追加機能)をダウンロードし、concrete5を拡張することができます。

• コミュニティに接続するには、concrete5.orgにユーザー登録が必要です。

• コミュニティには世界中の開発者が開発したテーマやアドオンが登録されており、無償でダウンロードできるものもあれば、有償のものもあります。ライセンスもオープンソースではないので注意。

• 購入にはクレジットカードまたはPaypalのアカウントが必要。

Page 124: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

テーマを自作するには…

• 公式サイトでドキュメントを充実させていきます!

• 5.6系の情報は比較的充実しています。『concrete5 公式活用ガイドブック』もよろしく

Page 125: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

ではいよいよ、デザイン カスタマイズしてみよう!

Page 126: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

「設定」ボタン > デザイン > 選択されたテーマの「カスタマイズ」ボタンプリセットの切り替えで、お手軽イメージチェンジ!

Page 127: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

各種見出しや様々な要素を並べた デザイン確認用ページを作ると デザインカスタマイズに便利!

Page 128: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

自分だけのウェブサイトが作れましたか? (時間切れかな…)

Page 129: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

後に… C4SAの無料期間は15日な

ので気をつけて

Page 130: はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド

はじめてのconcrete5でウェブサイト作成

チュートリアルガイド