ブロックエディタ(Gutenberg)VKブロックPRO アコーディオンの使い方

VKブロックPRO

このサイトでは何を教えてくださるの?

コスモ企画

この記事は以下のような方におすすめ!

  • ブロックエディタ(Gutenberg)VKブロックPRO アコーディオンの使い方がわからない?
  • ブロックエディタ(Gutenberg)VKブロックPRO アコーディオンの使い方を紹介します。

おすすめ度

おすすめ度4

図表による使い方マニュアル

アコーディオン 挿入

ブロックの挿入は+アイコンをクリックしてブロックを挿入。赤枠の中から「アコーディオン」を選択。

STEP
1

アコーディオン 設定

アコーディオン設定画面
アコーディオン設定画面

設定方法は右側のサイドバーに表示されます。
※もし表示されてない場合は画面右上のギアのマークをクリックすると表示されます。

アコーディオン 設定できる内容

アコーディオン
自由にブロックを追加できるコンテンツエリアです。

スタイル

非表示設定:画面サイズにより設定を表示もしくは未表示の設定が可能
高度な設定:HTMLアンカー(ページ内リンクのみだ歳の設定)、追加CSSのクラス名の指定(.○○の先頭部分の.ドット部分は省略。複数クラスを半角スペースで区切ります。)

アコーディオン 挿入時(メニューバー)の設定

アコーディオンメニューバー
アコーディオンメニューバー

アコーディオン 選択アイコン

アコーディオン
アコーディオン
アコーディオン選択肢&スタイル変更
アコーディオン選択肢&スタイル変更

アコーディオン現在選択されているブロック名

挿入するブロックを間違えた場合は、他のブロックに変更できる。があまり選択肢の幅はない。よく使うブロックに限られる。その為このブロックを削除して改めて選択し直す必要があります。

スタイルの変更

アコーディオン ブロック編集

アコーディオンブロック編集
アコーディオンブロック編集

アコーディオン設定できる内容

コピー:ブロックのコピー。段落挿入後張り付けるとコピーされる。
複製:ブロックの複製。同じ内容が複製(コピペ)でき上段の作業を1回で行えるメリットがあります。
前に挿入:現在のブロックの前に新たなボックスを挿入することが出来ます。
後に挿入:現在のブロックの後に新たなボックスを挿入することが出来ます。
移動:ブロックの移動
HTMLとして編集
再利用ブロックに追加:該当ブロックを登録して再利用が行えるように登録する。※テーマプラグインにより表示されない場合がある。
グループ化:複数のブロックをまとめる事が出来る。
ブロックを削除

テキスト(見出し)の選択時のメニューバー

アコーディオン 見出しメニューバー
アコーディオン 見出しメニューバー

アコーディオン 見出し選択アイコン

アコーディオン 見出し選択肢
アコーディオン 見出し選択肢

挿入するブロックを間違えた場合は、他のブロックに変更できる。があまり選択肢の幅はない。よく使うブロックに限られる。その為このブロックを削除して改めて選択し直す必要があります。

アコーディオン 見出し移動

アコーディオン 見出し移動
アコーディオン 見出し移動

移動:ドラッグによる移動(赤枠内左)上下移動(赤枠内右)

アコーディオン 見出し配置変更

アコーディオン 見出し配置変更
アコーディオン 見出し配置変更

幅広・全幅から選択

アコーディオン 見出し変更

アコーディオン 見出し変更
アコーディオン 見出し変更

見出し(h1~h6)から選択

アコーディオン 見出しテキストの配置画面

アコーディオン 見出しテキストの配置画面
アコーディオン 見出しテキストの配置画面

左寄せ・中央寄せ・右寄せから選択

アコーディオン 見出し画面サイズごとの改行

アコーディオン 見出し画面サイズごとの改行
アコーディオン 見出し画面サイズごとの改行

見出しの画面サイズごとの改行の設定

アコーディオン 見出し文字装飾

アコーディオン 見出し文字装飾(太字&斜体)
アコーディオン 見出し文字装飾(太字&斜体)

文字装飾の設定

太字
斜体

アコーディオン 見出しリンク設定

アコーディオン 見出しリンク設定
アコーディオン 見出しリンク設定

見出し リンクの設定

リンク先URL
新しいタブ

アコーディオン 見出しブロックツール

アコーディオン 見出しブロックツール(文字装飾)
アコーディオン 見出しブロックツール(文字装飾)

ブロックツールの設定

No wrap
インラインコード
インライン文字サイズ
インライン画像
キーボード入力
ハイライト
上付き
下付き
打ち消し
線蛍光マーカー

アコーディオン 見出しブロック編集

アコーディオン 見出しブロック編集
アコーディオン 見出しブロック編集

設定できる内容

コピー:ブロックのコピー。段落挿入後張り付けるとコピーされる。
複製:ブロックの複製。同じ内容が複製(コピペ)でき上段の作業を1回で行えるメリットがあります。
前に挿入:現在のブロックの前に新たなボックスを挿入することが出来ます。
後に挿入:現在のブロックの後に新たなボックスを挿入することが出来ます。
移動:ブロックの移動
HTMLとして編集
再利用ブロックに追加:該当ブロックを登録して再利用が行えるように登録する。※テーマプラグインにより表示されない場合がある。
グループ化:複数のブロックをまとめる事が出来る。
ブロックを削除

アコーディオン 段落(テキスト)の選択時のメニューバー

アコーディオン 段落(テキスト)の選択時のメニューバー
アコーディオン 段落(テキスト)の選択時のメニューバー

アコーディオン 段落(テキスト)選択アイコン

アコーディオン 段落(テキスト)選択肢
アコーディオン 段落(テキスト)選択肢

挿入するブロックを間違えた場合は、他のブロックに変更できる。があまり選択肢の幅はない。よく使うブロックに限られる。その為このブロックを削除して改めて選択し直す必要があります。

アコーディオン 段落(テキスト)移動

アコーディオン 段落(テキスト)移動
アコーディオン 段落(テキスト)移動

移動:ドラッグによる移動(赤枠内左)上下移動(赤枠内右)

アコーディオン 段落(テキスト)の配置画面

アコーディオン 段落(テキスト)テキストの配置画面
アコーディオン 段落(テキスト)テキストの配置画面

左寄せ・中央寄せ・右寄せから選択

アコーディオン 段落(テキスト)画面サイズごとの改行

アコーディオン 段落(テキスト)画面サイズごとの改行
アコーディオン 段落(テキスト)画面サイズごとの改行

見出しの画面サイズごとの改行の設定

アコーディオン 段落(テキスト)文字装飾・リンク設定

アコーディオン 段落(テキスト)文字装飾(太字&斜体)&リンク設定
アコーディオン 段落(テキスト)文字装飾(太字&斜体)&リンク設定

文字装飾の設定

太字
斜体
リンク先URL
新しいタブ

アコーディオン 段落(テキスト)ブロックツール

アコーディオン 段落(テキスト)ブロックツール(文字装飾)
アコーディオン 段落(テキスト)ブロックツール(文字装飾)

ブロックツールの設定

No wrap
インラインコード
インライン文字サイズ
インライン画像
キーボード入力
ハイライト
上付き
下付き
打ち消し
線蛍光マーカー

アコーディオン 段落(テキスト)ブロック編集

アコーディオン 段落(テキスト)ブロック編集
アコーディオン 段落(テキスト)ブロック編集

設定できる内容

コピー:ブロックのコピー。段落挿入後張り付けるとコピーされる。
複製:ブロックの複製。同じ内容が複製(コピペ)でき上段の作業を1回で行えるメリットがあります。
前に挿入:現在のブロックの前に新たなボックスを挿入することが出来ます。
後に挿入:現在のブロックの後に新たなボックスを挿入することが出来ます。
移動:ブロックの移動
HTMLとして編集
再利用ブロックに追加:該当ブロックを登録して再利用が行えるように登録する。※テーマプラグインにより表示されない場合がある。
グループ化:複数のブロックをまとめる事が出来る。
ブロックを削除

STEP
2

アコーディオン まとめ

アコーディオンはいかがでしたか?実務ではあまり使う頻度は少ないと思いますが、実際に「アコーディオン」を使用すると違った発見があるかもしれませんのでご自身で積極的に「アコーディオン」をお試しください。

PDFファイルによる使い方マニュアル

当サイトをPDFファイルにしました。オフラインでもご利用できますのでダウンロードしてお使いください。

今後の予定(動画による使い方マニュアルの作成)

今後動画による使い方をマニュアル作成を行っています。今後をお楽しみにお待ちください。また、逆引きマニュアルを企画しています。簡単にお話ししますと、やりたいことを画像で一覧表示します。その一覧からユーザーがやりたいパターンなどを選びできればソースをダウンロードできるようにしたいと考えています。まずは動画によるマニュアルの作成を網羅する予定です。

関連記事

お気軽にお問い合わせください。

お問い合わせ

ご依頼及び業務内容へのご質問などお気軽にお問い合わせください