Be with all
日本生命B.LEAGUE FINALS 2023-24 B.Hope ACTION UNIFIED SPORTS® BASKETBALL GAME にSON・京都、SON・沖縄が参加しました
BA確認用｜コンポーネントサンプル
見出し
見出し（H2） 真ん中寄せ
見出し（H3） ベーシック
見出し（H4） デフォルト
テキスト
段落
段落には文章を入力します。（左寄せ）
段落には文章を入力します。（右寄せ）
段落には文章を入力します。（中央寄せ）
引用
デフォルトの引用ブロックです。
引用元です。
プライマリボタン。ユーザーが次のステップに進むためのアクションを促すボタンとして使用。
セカンダリボタン。主要なアクションに付随して別の選択肢を与える場合に使用。
現在は投稿ページの前へ、次へボタンやカテゴリ選択ボタンとして使用。
戻るボタン。現在はお問い合わせフォームの確認画面からの戻るボタンとしてのみ使用。
リスト
リスト
- リスト
- リストリスト
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
番号付きリスト
- リスト
- リストリスト
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
テーブル
テーブル（通常）
| 名誉会長 | 細川 佳代子（元特定非営利活動法人スペシャルオリンピックス日本 理事長） |
| 理事長 | 有森 裕子（元プロマラソン選手） |
| 参 与 | 新宅 正明（元日本オラクル株式会社 代表取締役社長） 藤本 和延（公益財団法人スペシャルオリンピックス日本 元常務理事） |
テーブル（1列目の列幅固定）
CSS
テーブルの1列目の列幅を固定。複数のテーブルを縦に並べた際に、タイトル列の幅を揃えたい場合に使用。
高度な設定「追加CSSクラス」に下記CSSクラスを設定
- is-first-col-small → width: 15%
- is-first-col-medium → width: 25%
- is-first-col-large → width: 35%
is-first-col-small
| 名誉会長 | 細川 佳代子（元特定非営利活動法人スペシャルオリンピックス日本 理事長） |
| 理事長 | 有森 裕子（元プロマラソン選手） |
| 参 与 | 新宅 正明（元日本オラクル株式会社 代表取締役社長） 藤本 和延（公益財団法人スペシャルオリンピックス日本 元常務理事） |
is-first-col-medium
| 名誉会長 | 細川 佳代子（元特定非営利活動法人スペシャルオリンピックス日本 理事長） |
| 理事長 | 有森 裕子（元プロマラソン選手） |
| 参 与 | 新宅 正明（元日本オラクル株式会社 代表取締役社長） 藤本 和延（公益財団法人スペシャルオリンピックス日本 元常務理事） |
is-first-col-large
| 名誉会長 | 細川 佳代子（元特定非営利活動法人スペシャルオリンピックス日本 理事長） |
| 理事長 | 有森 裕子（元プロマラソン選手） |
| 参 与 | 新宅 正明（元日本オラクル株式会社 代表取締役社長） 藤本 和延（公益財団法人スペシャルオリンピックス日本 元常務理事） |
テーブル（SP縦積み）
CSS
SP表示時、通常はタイトル列とコンテンツは横並びとなるが、タイトル列とコンテンツを縦積みで表示させたい場合に使用。
高度な設定「追加CSSクラス」に下記CSSクラスを設定
- is-sp-td-signle
| 名誉会長 | 細川 佳代子（元特定非営利活動法人スペシャルオリンピックス日本 理事長） |
| 理事長 | 有森 裕子（元プロマラソン選手） |
| 参 与 | 新宅 正明（元日本オラクル株式会社 代表取締役社長） 藤本 和延（公益財団法人スペシャルオリンピックス日本 元常務理事） |
テーブル（SPスクロール）
CSS
複数列あるテーブルなどで、SP表示時、横スクロールさせたい場合に使用。
高度な設定「追加CSSクラス」に下記CSSクラスを設定
- is-scroll-x
| 名誉会長 | 細川 佳代子（元特定非営利活動法人スペシャルオリンピックス日本 理事長） |
| 理事長 | 有森 裕子（元プロマラソン選手） |
| 参 与 | 新宅 正明（元日本オラクル株式会社 代表取締役社長） 藤本 和延（公益財団法人スペシャルオリンピックス日本 元常務理事） |
テーブル（罫線なし）
CSS
高度な設定「追加CSSクラス」に下記CSSクラスを設定
- table-no-border
| 名誉会長 | 細川 佳代子（元特定非営利活動法人スペシャルオリンピックス日本 理事長） |
| 理事長 | 有森 裕子（元プロマラソン選手） |
| 参 与 | 新宅 正明（元日本オラクル株式会社 代表取締役社長） 藤本 和延（公益財団法人スペシャルオリンピックス日本 元常務理事） |
リンク
PDFリンク（アイコン自動付与）
外部リンク（アイコン自動付与）
ファイルリンク
ページ内リンク（縦方向）
ブロックパターン
ページ内リンク（横方向）
ブロックパターン
リンクブロック（縦方向／2カラム）
ブロックパターン
スペシャルオリンピックス
ボランティアのコーチたちと一緒にスポーツができるようになることも大きな進歩です。
スペシャルオリンピックス
ボランティアのコーチたちと一緒にスポーツができるようになることも大きな進歩です。
リンクブロック（縦方向／3カラム）
ブロックパターン
スペシャルオリンピックス
ボランティアのコーチたちと一緒にスポーツができるようになることも大きな進歩です。
スペシャルオリンピックス
ボランティアのコーチたちと一緒にスポーツができるようになることも大きな進歩です。
スペシャルオリンピックス
ボランティアのコーチたちと一緒にスポーツができるようになることも大きな進歩です。
リンクブロック（縦方向／4カラム）
ブロックパターン
スペシャルオリンピックス
ボランティアのコーチたちと一緒にスポーツができるようになることも大きな進歩です。
スペシャルオリンピックス
ボランティアのコーチたちと一緒にスポーツができるようになることも大きな進歩です。
スペシャルオリンピックス
ボランティアのコーチたちと一緒にスポーツができるようになることも大きな進歩です。
スペシャルオリンピックス
ボランティアのコーチたちと一緒にスポーツができるようになることも大きな進歩です。
リンクブロック（横方向／1カラム）
ブロックパターン
スペシャルオリンピックス
ボランティアのコーチたちと一緒にスポーツができるようになることも大きな進歩です。ボランティアのコーチたちと一緒にスポーツができるようになることも大きな進歩です。ボランティアのコーチたちと一緒にスポーツができるようになることも大きな進歩です。
リンクブロック（横方向／2カラム）
ブロックパターン
スペシャルオリンピックス
ボランティアのコーチたちと一緒にスポーツができるようになることも大きな進歩です。
スペシャルオリンピックス
ボランティアのコーチたちと一緒にスポーツができるようになることも大きな進歩です。
メディア
画像（通常）デフォルト
画像（角丸）角丸
メディアとテキスト
メディアを左
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
メディアを右
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
ギャラリー
複数の画像をタイル状にまとめて表示するブロック。レイアウトは自動的に調節される。
BA写真ギャラリー
カスタムブロック
レイアウトは3カラム表示固定。写真クリックで拡大表示される。
カバー
カバーテキスト
動画
音声
レイアウト
カラム
2カラム
テキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
3カラム
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
4カラム
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
全幅の背景色
CSS
高度な設定「追加CSSクラス」に下記CSSクラスを設定
- is-style-over-container
ブロックエディタでコンテンツをグループやカラムでまとめます。
そのグループやカラムに色「背景」を設定し、高度な設定「追加CSSクラス」に「 is-style-over-container 」を設定します。
全幅の背景画像
CSS
高度な設定「追加CSSクラス」に下記CSSクラスを2つとも設定
- is-style-over-container
- is-style-over-container–cover
カバーブロックを使用します。カバーに背景画像を設定します。
カバーの高度な設定「追加CSSクラス」に「 is-style-over-container is-style-over-container–cover 」を設定します。
区切り（通常）デフォルト
区切り（幅広）幅広線
区切り（ドット）ドット
マージン
CSS
コンテンツの上マージンを狭くしたい場合、コンテンツの高度な設定「追加CSSクラス」に下記CSSクラスを設定
基本のコンテンツの上マージンは40pxです。
- is-style-margin-top–small → 32px
- is-style-margin-top–1em → 1em（1文字分）＝16px
- is-style-margin-top–none → 0px
- is-style-margin-top–sp-none → SPのとき0px
is-style-margin-top–small
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
is-style-margin-top–1em
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
is-style-margin-top–none
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
is-style-margin-top–sp-none
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
囲み枠（囲み枠エリア）
ブロックパターン
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ユーティリティ
BAアイコン
カスタムブロック
Google Fontのアイコンから表示したいアイコン名を入力 https://fonts.google.com/icons
アイコンとテキストを横並びで使用することが多い
カスタムHTML
カスタムHTMLにHTMLを記述すると、ウェブページにHTML通りに表示されます。
下記はカスタムHTMLにGoogleマップの埋め込みタグを記述した例
ご支援・ご協力のお願い（固定ページ用）
再利用ブロック
スペシャルオリンピックス日本は、皆様のご寄付や企業協賛によって支えられている非営利組織です。
ひとりでも多くの知的障害のある人たちが活動に参加できるよう、皆様のご支援、ご協力を心よりお願い申し上げます。
ローカルナビ（固定ページ用）
再利用ブロック
- 第2階層ページにはローカルナビは表示しない
- 第3階層以下のページにローカルナビを表示する
- ローカルナビは上位階層ページへのリンクと同階層のナビが表示される
プログラムに関するお問い合わせエリア（テキスト）
ブロックパターン
※電話番号エリアは現在使用していないので削除して使用してください
※お問い合わせフォームリンクは、実際の投稿ページではお問い合わせ先毎のメールアドレスに変更して使用されています
プログラムに関するお問い合わせ
お問い合わせは下記の連絡先までお願いいたします。
スペシャルオリンピックス日本 事務局
（受付時間：9:30～17:30／※日･月･祝日除く）
※現在、在宅勤務を実施しております。恐れ入りますが、メールにてお問い合せ下さい。
プログラムに関するお問い合わせエリア（ボタン）
ブロックパターン
※電話番号エリアは現在使用していないので削除して使用してください
プログラムに関するお問い合わせ
お問い合わせは下記の連絡先までお願いいたします。
スペシャルオリンピックス日本 事務局
（受付時間：9:30～17:30／※日･月･祝日除く）
※現在、在宅勤務を実施しております。恐れ入りますが、メールにてお問い合せ下さい。
BAカスタム投稿リスト （一覧形式｜画像あり）
カスタムブロック
投稿コンテンツの最新○○件が一覧形式で表示できる。
BAカスタム投稿リスト （一覧形式｜画像なし）
カスタムブロック
投稿コンテンツの最新○○件が一覧形式で表示できる。
BAカスタム投稿リスト （カード形式｜3カラム）
カスタムブロック
投稿コンテンツの最新3件がカード形式で表示できる。
BAカスタム投稿リスト （カード形式｜4カラム）
カスタムブロック
投稿コンテンツの最新4件がカード形式で表示できる。
BA RSSリスト（カード形式）
カスタムブロック
RSSの最新○○件がカード形式で表示できる。
BA RSSリスト（一覧形式）
カスタムブロック
RSSの最新○○件が一覧形式で表示できる。
BA TOCコンポーネント
カスタムブロック