concrete5.7 ブロックタイプ早見表 

# はじめに

concrete5.7 には、ページを作るのに必要なブロックタイプが標準でいくつも用意されています。何ができるのか、一覧でまとめてみました。細かい説明は、concrete5 japan さんのサイトをを見てください。
http://concrete5-japan.org/help/5-7/using-concrete5-7/in-page-editing/block-areas/add-block/

足りないブロックは、ダウンロードしたり、PHP の知識があれば、自分で作ることも可能です。

# ブロックタイプ

画面の見た目は、elemental テーマを適用した場合です。
見た目はテーマを入れ替えたり、スタイルシートや、concrete5 のデザイン機能を利用して変更することが可能です。
カスタマイズ項目も豊富に設定されているので、見た目や機能を好みに合わせて変えることも用意されている機能の範囲で可能です。

## ＊＊＊ 基本 ＊＊＊

### ◆ 記事
![記事アイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/a7bc49bf-6faf-328f-3db2-c466be56a5c4.jpeg)
WYSIWYG（ウィジウィグ）形式での文章編集が可能です。入力した内容がそのまま表示されます。

![記事.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/bc10ddb6-03ff-52ce-c1c5-95c647aea4b8.jpeg)
編集画面

### ◆ HTML
![HTMLアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/d0e0919b-1670-68fe-38a8-b64144b53d5c.jpeg)
HTMLの編集が可能です。css / javascript の編集も可能です。

![html.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/25493331-c786-9658-67bd-31f8aba3b45b.jpeg)
編集画面（HTML を直接記入できます。）

### ◆ 画像
![画像アイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/b5626ba1-d0ab-6dd2-4360-737b367346a9.jpeg)
ファイルマネージャーに登録されている画像の表示が可能です。

### ◆ ファイル
![ファイル.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/d4ca570b-42ca-5690-4bf6-0c809559ef13.jpeg)
ファイルマネージャーに登録されているファイルへのリンクを表示して、ダウンロードを可能にします。

![ファイル.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/f74fd0da-11cc-595b-2983-4c007ebec000.jpeg)
表示画面（ファイルへのリンクが表示されます。）

### ◆ 水平線
![水平線アイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/881fb50c-0a0e-a658-b844-8fbb64f3e3cf.jpeg)
`<hr>` が出力され、水平線が表示されます。

### ◆ 特色
![特色アイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/f9b7769f-b8f5-e696-3e48-3a10c59e2fc3.jpeg)
アイコン、タイトル、文章を表示することができます。タイトルにはリンク先を設定可能です。

![特色.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/b852bb95-6f48-c650-027e-2659f1ddb54d.jpeg)
表示画面

## ＊＊＊ ナビゲーション（ページの遷移を行うような機能です） ＊＊＊

### ◆ オートナビ
![オートナビアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/b343c542-be51-4197-4355-43d312fee4c9.jpeg)
サイトマップのツリー構造に従って、ページ一覧を階層構造で表示します。

![オートナビ.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/9a251704-318c-c326-8b18-ba4ddc90c9c3.jpeg)
表示画面


### ◆ ページタイトル
![ページタイトルアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/06f7f47e-d87b-0a20-5bdb-d646a8ad0ddf.jpeg)
ページ作成時に登録したページタイトルを表示します。

![ページタイトル.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/99f252ed-b2c4-5a8a-324c-b3558a3d1387.jpeg)
表示画面（ページタイトルが HOME の場合）

### ◆ FAQ
![FAQアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/17d66ca5-d893-0478-31f8-a9c6e424d186.jpeg)
質問と回答のセットを一覧で表示します。

![FAQ.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/2051192a-7791-ea33-8e60-2076b1037448.jpeg)
表示画面（左側にナビゲーションを出すこともできます。）

### ◆ ページリスト
![ページリストアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/66f040ef-ec11-0667-449f-ea4c1524c663.jpeg)
サイトマップの特定の階層以下を、階層構造を持たない形式で表示します。

![ページリスト.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/10964b86-ee13-1a73-c625-3fe587addb80.jpeg)
表示画面（オートナビとは異なり階層化はされませんが、ページに設定されている説明なども一覧で出せます）


### ◆ 「次へ」「前へ」ナビ
![次前アイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/6c08ae11-fb5c-cb37-4fe5-9f3de4c7d80e.jpeg)
前後ページへの移動ができるナビゲーションが表示されます。特定階層のサイトマップ順、日付順で前後に移動することが可能です。

![次前.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/87bee115-51b4-a617-6dc6-9ad63ccdcd5e.jpeg)
表示画面

### ◆ 日付ナビ
![日付ナビアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/50c3564b-5218-b567-044a-890ae67f3cd2.jpeg)
登録されているページの年月が表示されます。ページリストと組み合わせると、ブログの年月別のアーカイブのような機能が作成可能です。

![日付ナビ.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/3d727c40-d182-188c-d00f-7124da6af84c.jpeg)
表示画面

### ◆ タグ
![タグアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/3ee3d99b-62b9-42d6-32ff-25ad84babab7.jpeg)
ページにタグを付けて検索できるようにします。タグの表示も可能です。

![タグ.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/183c7e53-a92a-cc4d-ff4d-d1c4f26dafc6.jpeg)
表示画面

### ◆ トピックスリスト
![トピックリストアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/03ea7bd1-7a95-6755-9b8f-1bb844d6b0c5.jpeg)
※調べてみましたが、使い道がよくわかりませんでした。調査を継続します。

### ◆ RSS表示
![RSSアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/55ee738d-db3e-cc9d-1ecf-2b26b46bfdc7.jpeg)
外部サイトのRSSを取得して表示します。

### ◆ 言語切り替え
![言語切り替えアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/33424d53-1f2c-7979-02b9-2a5c6061274b.jpeg)
※短く説明できないので、説明をパスします。

## ＊＊＊ フォーム ＊＊＊

### ◆ フォーム
![フォームアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/46632fb5-ec76-a4a7-a235-fffd4bdd28e7.jpeg)
問い合わせフォームなど任意の入力項目をもったフォームを作成可能です。フォームに入力された情報は、管理画面のレポートから照会可能です。

![フォーム.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/f12d4766-ee82-4ad3-dc7a-248ad536cd02.jpeg)
表示画面（フォームの項目は、自由に設定できます）

### ◆ 検索
![検索アイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/fa170d73-c0f4-593d-899b-e7ad32a24d95.jpeg)
サイト内検索機能を設置可能です。

![検索.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/56967d95-1b09-b175-09f8-c3e8dfd130c3.jpeg)
表示画面

### ◆ 外部フォーム
![外部フォームアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/538e1633-7e8b-d756-26c2-2d3fe97d493c.jpeg)
※短く説明できないので、説明をパスします。
※具体的な作り方は、「[concrete5.7 外部フォーム（最少）を作ってみる。](http://qiita.com/yorozuone/items/2f3bfd0f908d0bb8c3a2)」を参照ください。

## ＊＊＊ ソーシャルネットワーキング ＊＊＊

### ◆ アンケート
![アンケートアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/1857d2d1-ca34-969d-b8c4-7c76ec52fede.jpeg)
質問に対する回答を選択してもらうフォームを設置可能です。会員でないと回答できないアンケートにすることも可能です。

![アンケート.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/08a26dab-c086-c7bc-8f73-5d87f64ae6d3.jpeg)
表示画面

![アンケート2.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/bf5a1447-b884-6f87-b22f-7a3ddb5e3128.jpeg)
表示画面（アンケート回答済みの場合）

### ◆ コメント欄
![コメント欄アイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/5d0d23e6-77bc-5c4a-a528-d4a256eb9fcb.jpeg)
コメント欄を設置可能です、
スレッド機能を有効にするとコメントに返信が可能です。
レーティング登録なども可能です。

![コメント.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/143744fd-815c-3e7f-c9f9-60de6209aa7f.jpeg)
表示画面

### ◆ ソーシャルリンク
![ソーシャルリンクアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/afce8c9c-3033-17b9-ea3a-e8933bf400df.jpeg)
SNS へのリンクボタンを表示します。

![ソーシャルリンク.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/e5cb6622-8839-0b8f-8fe2-72e66842d5f7.jpeg)
表示画面

### ◆ 紹介
![紹介アイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/51c19612-b0c7-9496-0e86-a007e1db9a89.jpeg)
社真、名前、役職、会社名、URL、コメントを登録して表示可能です。スタッフ紹介などに利用可能です。

![紹介.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/3a0dce53-a091-7e85-e5c9-ab81c390fe39.jpeg)
表示画面

### ◆ このページをシェア
![このページをシェアアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/a91b51e4-fdf2-677c-adb8-91fd9bb493cf.jpeg)
SNS へページをシェアしてもらうためのボタンを表示します。

![ソーシャルリンク.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/64d9387c-7695-086b-f40a-9a35dff2345b.jpeg)
表示画面

## ＊＊＊ マルチメディア ＊＊＊

### ◆ ページ属性表示
![ページ属性表示アイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/518fcef6-2ca2-27fb-8394-2fc9e559081d.jpeg)
ページに設定されている属性が表示可能です。

![ページ属性.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/ad3c6c72-ec38-7000-8c5a-56aede221d03.jpeg)
表示画面（ページ作成日を例として表示しています。）

### ◆ 画像スライダ
![画像スライダーアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/a7fc97b7-dc14-9dfb-4db4-806d43856177.jpeg)
複数枚の画像をファイルマネージャーから選択して、スライド表示させることが可能です。

![画像スライダー.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/593fc8fe-f879-c292-9d4f-f4b69417f6b6.jpeg)
表示画面

### ◆ ビデオプレイヤー
![ビデオプレイヤーアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/4a4b6ba1-33ef-bd75-894b-14fe80ac9abc.jpeg)
MP4、OGG、WEBM 形式の動画を再生できます。

![ビデオプレイヤー.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/a68dc916-3a76-2ee6-2aec-d625e102b9a6.jpeg)
表示画面（ビデオプレイヤー用のツールバーが表示されます）

### ◆ YouTubeビデオ
![YouTubeビデオアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/570cb629-4474-8dd6-f8fb-aaef4ec5f94d.jpeg)
YouTube のビデオを埋め込むことが可能です。

![YouTubeビデオ.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/44f10496-fc8f-6dde-235e-80da7bb547f6.jpeg)

### ◆ Googleマップ
![GoogleMapアイコン.jpg](https://qiita-image-store.s3.amazonaws.com/0/1154/447177e4-0264-53e9-9adc-ad250d1f5adf.jpeg)
Google マップを埋め込むことが可能です。