※タイトルの下にアイキャッチ画像があればアイキャッチ画像が表示されます。画像の右下に投稿の日付が自動で挿入されます。パンくずは非表示にしています。
このページは公開時には非表示になります。
H2タグ サンプル
段落通常設定はこんなかんじです。あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ。
改行にも対応しています。改行にも対応しています。
色を選ぶパレットに、グレープWEBでキーカラーとして使っている色（拡張色A～E）を追加してあります。色選びに迷ったらこの辺を使うと統一感は保たれます。
右側上部のギアアイコン ＞ ブロックエディタで、ブロックごと色を付けたり、文字サイズを変えたりもできます。これは小サイズ（13px）
部分的にも太字にしたり、色を変更したりできしますが、ビジュアル編集だと選択しているテキストの場所がわからず、少し使いにくいです。
- リストも文字色をかえたり、背景色をいれたり、数字をふったり、編集できます。
- フォントサイズ小
- さらに下層も（リストの形式も変更可）
- さらに下層も
- リスト３
- 数字のリスト（フォントサイズ中）
- 数字のリスト
- 数字のリスト
フォントサイズ大（36px）は大きすぎるので使いたくないです
段落通常設定はこんなかんじです。あいうえおかきくけこ。あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ。
改行にも対応しています。改行にも対応しています。
H3タグサンプル（H2とH3タグが3個以上あれば目次として表示されます）
段落通常設定はこんなかんじです。あいうえおかきくけこ。あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ。
H3タグサンプル その２
謎ドロップキャップをONにするとこんなかんじになりますが、たぶん使わないです。
あいうえおかきくけこ。あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ。
H4タグサンプル
フォントサイズ小（13ｐｘ）はこんなかんじです。あいうえおかきくけこ。あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ。あいうえおかきくけこ。あいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこあいうえおかきくけこ。
H５タグはシンプルな黒の太字
この下は３カラムのブロックです。画像やテキストを並べて表示することができます。各カラムの中にコンテンツを入れて使います。2カラムもあるし、カラム幅の割合も変更できます。スマホだと縦並びになります。
引用ブロックはこんな感じです。引用ブロックはこんな感じです。引用ブロックはこんな感じです。引用ブロックはこんな感じです。引用ブロックはこんな感じです。引用ブロックはこんな感じです。
引用元も追加します ｘｘｘｘｘより引用
H５タグです。この下はテーブルブロックです。
| らべる | らべる | らべる |
|---|---|---|
| わくA1 | わくA2 | わくA3 |
| わくB1 | わくB2 | わくB3 |
↑上のは区切り線ブロック
このブロックは画像とテキストを並べて表示するブロックです。左右どちらにテキストを表示するか選べます。スマホ表示すでは上下に並びます。
↓下のはスペーサーブロックです。スペース幅を設定可能です。
ここから下は cocoonブロック
cocoonにもカラムブロックがありましたが、スキンのせいか、色の表示がおかしいです。編集ページと実際の見た目が異なるのでこれは使わなほうがよいかも。
文字色と枠内背景色は設定可
これは2カラムで１：３の比率
比率も変更可
ただし枠の色が？
3カラム その１
3カラム その2
3カラム その3
テキストをボックスで囲みたい時はcocoonのボックスが良い！
cocoon 案内ボックス スタイル設定で色変更可
cocoon白抜きボックス スタイル設定で色変更可
付箋風ボックス スタイル設定で色変更可
cocoonタブボックス スタイル設定でラベルの表示や色変更可
スタイル設定でアイコン変更、色変更可
スタイル設定でアイコン変更、色変更可
スタイル設定でアイコン変更、色変更可
ふきだしボックス。設定でキャラクターや吹き出しの配置を選べます。キャラクターイラストのテイストをそろえたいので、キャラクターはChromeの拡張機能のAvatar Makerで作るようにしましょう。
cocoonのボタンです。色やエフェクトが設定できます。ただスキンの設定と競合するのか、マウスオーバーで文字が消えてしまう色合わせもあるので作成時に確認を
これはH6タグ：スタイルは未設定
H6タグは残しておくので、ページ特有のCSSスタイルを使用したいときには、投稿編集画面下部にある「カスタムCSS」で設定して使用してください。サンプルとしてこの投稿では「カスタムCSS」でH6タグのフォントサイズを30pxに設定するCSSを書いてあります。このCSSはこの投稿ページでのみ有効です。
投稿下部にグレープ本サイトへのリンクを
コンテンツの最後には、できるだけ本サイトへの誘導を促すリンクを用意します。関連製品ページやソリューションページへ飛べるように工夫をお願いします。
↓この下にはcocoonのページ送りナビ（前後の記事への移動ボックス）、カテゴリ、タグ、SNSのボタンが自動で表示されます