5iveテンプレートのスタートキットです。

はじめに

注意事項

①記事の直下にコンテンツを追加しないよう気をつけてください。

コンテンツを追加する際は、まず必ず「グループ」ブロックを挿入してから、その中にブロックを追加するようにしてください。
話題が切り替わるところで挿入するイメージです(sectionに分ける考え方と一緒)。
横幅や色の設定は「グループ」単位で行われるため、「グループ」に囲われていないものは表示崩れする可能性が高くなります。

②「再利用ブロック」は必ず通常のブロックに戻してからテキストなど書き換えるようにしてください。

通常のブロックに戻さないと、テキスト情報などすべて同じものに書き換えられてしまいます。
通常のブロックに戻すには画面左上のボタンエリアから該当のものを押してください。

③上方向の余白

各ブロックを挿入した際、デフォルトの設定では上部にマージンが20px空きます。
これを変更する場合は該当のブロックを選択し「高度な設定 > 追加CSSクラス」に下記のクラス名を入力してください。

余白クラス名
60pxmt-ll
40pxmt-l
20pxmt-m
10pxmt-s
5pxmt-ss
0mt-zero

その他

①一番上のグループはデフォルトで上方向に広い隙間ができます。

なくしたい場合は追加CSSクラスに「pt-zero」を付与してください。全画面の画像から始める場合などに便利です。

「グループ」ブロック

「グループ」では「横幅」「カラーセット」の設定が可能です。ここで設定した内容が、グループ内のコンテンツに適用されます。また、<div>や<section>など、タグの選択も可能です。

横幅設定

「高度な設定 >追加CSSクラス」に「w-〇〇」を付与することで、横幅を設定できます。

①横幅100%に設定

PCでもスマホでも横幅100%を保ちます。全画面の画像を使用する場合などに便利です。この設定にするには、「w-ll」を付与してください。

②横幅1000pxに設定

PCでは横幅1000px、スマホで左右余白20pxを保ちます。特に設定しない場合はこの設定が適用されます。この設定にするには、「w-l」を付与してください。

③横幅800pxに設定

PCでは横幅800px、スマホで左右余白30pxを保ちます。この設定にするには、「w-m」を付与してください。

④横幅600pxに設定

PCでは横幅600px、スマホで左右余白40pxを保ちます。この設定にするには、「w-s」を付与してください。

カラーセット設定

「高度な設定 >追加CSSクラス」に「colorset〇〇」を付与することで、色を設定できます。色の組み合わせは、「共通設定 > ヘッダー・フッター」より編集してください。最大4セットまで設定でき、各セット内でそれぞれ「文字色」「キーカラー」「背景色(外)」「背景色(内)」「補助色」の5つが設定可能です。
※「背景色(全幅)」の適用範囲は、グループに親がいた場合、その範囲内に限定されます。

①基本色

特に設定しない場合はこの設定が適用されます。この設定にするには、「colorset0」を付与してください。

②カラーセット1

「カラーセット1」で設定した色が適用されます。コンテンツに背景色を敷きたい際にご使用ください。この設定にするには、「colorset1」を付与してください。

②カラーセット2

「カラーセット2」で設定した色が適用されます。全幅で背景色を切り替える場合にご使用ください。この設定にするには、「colorset2」を付与してください。

③カラーセット3

「カラーセット3」で設定した色が適用されます。全幅で背景色を切り替えるかつ、コンテンツに背景を敷く場合にご使用ください。この設定にするには、「colorset3」を付与してください。

また、カラーセットで設定した色を一部だけ変更したい場合は、編集画面右の「色」パネルより該当箇所の色を設定してください。

例)見出しの色のみ変更しています。

例)文字の背景色のみ変更しています。
文字の長さに合わせて背景を敷く場合は、「display-ib」を入力してください。

「カラム」ブロック

カラムの中には、画像やテキストなどのブロックを自由に挿入できます。

カラム間の隙間について
5種類から選べます。「追加CSSクラス」に「gap-xxx」を指定することで変更できます。デフォルトは「20px」です。

スマホでのカラム数について
最大3カラムまで選べます。「追加CSSクラス」に「sp-xxxcolumn」を指定することで変更できます。デフォルトは「1カラム」です。

揃え位置について
上・中央・下から選ぶことができます。

画像が入ります

3カラムのサンプルです。スマホでは2カラムになるよう設定しています。

3カラムのサンプルです。スマホでは2カラムになるよう設定しています。

3カラムのサンプルです。スマホでは2カラムになるよう設定しています。

カラム同士の横の間隔を広げた場合のサンプルです。この間隔は「60px」です。

カラム同士の横の間隔を広げた場合のサンプルです。この間隔は「60px」です。

カラム同士の横の間隔を広げた場合のサンプルです。この間隔は「60px」です。

PCで左右が入れ替わるイメージです。「カラム」に追加CSSクラス「column-switch」を設定してください。

画像が入ります

PCで左右が入れ替わるイメージです。「カラム」に追加CSSクラス「column-switch」を設定してください。※2カラムの場合のみ有効

画像が入ります

幅固定で左右の揃え位置も設定できます。「カラム設定」で幅を指定し、追加CSSに「column-jc-xxxx」を指定してください。

幅固定で左右の揃え位置も設定できます。「カラム設定」で幅を指定し、追加CSSに「column-jc-xxxx」を指定してください。

幅固定で左右の揃え位置も設定できます。「カラム設定」で幅を指定し、追加CSSに「column-jc-xxxx」を指定してください。

「見出し」ブロック(core/heading)

見出し(特大)です。

見出し(大)です。
デフォルトはこのサイズです。

見出し(中)です。リンクも入れられます。

見出しの中央揃えも可能です。
headingタグも<h2>〜<h6>の中から自由に選べます。
小文字を入れる場合は「HTMLを編集」より<small>を挿入。

About

↑追加CSSクラスに「font_en」を指定すれば、英字専用のフォントを指定できます。
必要なフォントはGoogleFontsから読み込んでください。

「段落」ブロック(core/paragraph)

本文(大)です。小さい文字を挿入する際は<small>〜</small>で囲ってください。

本文(中)です。
デフォルトはこのサイズです。

本文(小)です。リンクも入れられます。

本文(極小)です。

文字は中央揃えも可能です。

「テーブル」ブロック(core/table)

テーブルです。ヘッダーを挿入可能です。
見出しです。中の文字列の長さによってセル幅が自動で変化します。
見出しです。中の文字列が2行になった場合はこのようになります。
スマホでも2カラムを保ったまま自動で折り返します。
文字は中央に揃えたり文字の装飾
リンクの挿入も可能です
3カラムの場合、スマホでもキープするので読みやすさに注意が必要です
スタイルは3種類から選べます。「スタイル」より
選択してください。

「画像」ブロック

画像ブロックです。PC / スマホで別画像の登録、リンクの設定ができます。

スマホの画像に入力がない場合はPCと同じものを表示します。また、整列位置を左・中央・右の3種類から選択できます。

画像の手配がまだの場合は、どんな画像が入るか指示を書くことも可能です。「ワイヤー用テキスト」欄に記入してください。リンクも設定可能です。※PC用の画像を登録すると、指示テキストは非表示になります

「スワイパー」ブロック

画像が決まっていない場合は、指示テキストだけで用意しておくことも可能です。
また、1度に表示できる件数を指定できます。PCとスマホでそれぞれ設定することも可能です。
スライド間の間隔も調整できます。

スライド1です。〇〇な画像を入れます。
スライド2です。〇〇な画像を入れます。

「InstagramFeed」ブロック

フィードを表示するだけの場合、「Instagram Feed」ブロックを追加してください。フィードのレイアウトはプラグインの設定画面から調整してください。
※情報を利用するだけの場合は精査・開発中です

「カスタムHTML」ブロック

Googleマップを挿入したい場合は、「カスタムHTML」にiframeのコードを入力してください。
縦横比はiframeのclassに「ratio-1-1」「ratio-3-2」「ratio-16-9」のどれかを設定してください。デフォルトは「16:9」です。
横幅はiframeタグ内の「width」にて設定してください。縦幅は「auto」に設定してください。
※整列位置は開発中です。

カスタム投稿のアーカイブ

投稿タイプのスラッグを入力すれば、アーカイブの表示が可能です。表示件数のみ指定できます。
表示する内容や見た目の指定は、左メニュー内「Options > 投稿」より行ってください。

「Q&A」ブロック

Q&Aの内容を入力できます。回答内容には、テキストのスタイルを調整したり画像を挿入する機能もあります。

  • 質問項目が入ります。

    質問への回答が入ります。
    太字など入れることも可能です。

    赤字のイメージです。

    リンクの挿入もできます。

    画像の挿入も可能です。画像があったほうが良い場合にご使用ください。

  • 質問内容が入ります。

    回答内容が入ります。

また、初期表示時に回答内容を隠しておく、アコーディオン機能も設定可能です。

  • アコーディオン機能付き

    ONにすればアコーディオン機能を付与できます。

「ファーストビュー」ブロック

スライドを使用する場合は「スライド」に行を追加してください。
スライドが不要な場合は何もせず更新してください。
表示内容やスタイルは「/block/block-firstview.php」を編集してください。

「緊急のお知らせ」ブロック

緊急のお知らせがある場合は以下の手順で追加が可能です。

WPで更新する場合
①オプションページ「緊急のお知らせ」より、参照元に「WP」を指定
②投稿「緊急のお知らせ」に記事を追加
③各固定ページにて「緊急のお知らせ」ブロックを選択して保存

インスタで更新する場合
オプションページ「緊急のお知らせ」より、参照元に「Instagram」を指定
②各固定ページにて「緊急のお知らせ」ブロックを選択
③2の親グループにクラス名「urgent_src_in」を指定 ※必ず行う

その他カスタム
①緊急のお知らせエリアを固定する場合は親のグループにクラス名「urgent_fixed」を追加してください。