Affinger

【AFFINGER5】ボックスの使い方とボックス一覧(ブロックエディタ対応)

スポンサーリンク

本記事では、AFFINGER5でボックスを使用する方法・ボックス見本一覧を紹介します。

ボックスとは、以下のようなものです。

ポイント

マイボックス見本(枠なし)

まっきー

ブロックエディタ(Gutenberg)での使用方法を解説しますね♪

AFFINGER5 ボックスの使い方と見本

AFFINGER5でボックスを使用する方法は2つあります。

  • ブロックエディタを利用する方法
  • クラシック版の段落を利用する方法

それぞれ詳しく解説します!

ボックスの使い方(STINGER)

まず、AFFINGER5購入時についてきた「Gutenberg用プラグイン」をインストールする必要があります。

具体的なインストール方法は「 リンク」にありますので参考にしてください。

ブロックエディタを追加し、ボックスと検索してください。

3種類のボックスが使用できます。以下、使用例。

マイボックス

ポイント

バナー風ボックス

見出しテキスト

見出し付きフリーボックス

見出しテキスト

見出し、マーク、色などの細かな設定は右側の歯車マークから行うことができます。

以上がブロックエディタでの使い方です。

しかし、枠のみでボックスを作りたい場合はこの方法ではできません。

クラシック版のエディタを使いましょう!

「ブロックエディタしか使ってない」って方でも、簡単にできるので大丈夫です!

ボックスの使い方(TinyMCE クラシック版の段落)

まず、有名なプラグイン「TinyMCE Advanced」をインストールして有効化しましょう。

ブロックエディタを追加し、「クラシック版の段落」を選択します。

「タグ」->「ボックスデザイン」へ進むと、様々な種類のボックスが利用できます。

一例として、「マイボックス」の「基本」を選択します。

すると、下記のようなコードが出てきます。それぞれの役割は、赤色で記入してあります。

後はそれぞれ、実際に値を変更して確認してみてください!

マイボックス使用例一覧

バナー風ボックス

基本

タイトル

背景ナシ

タイトル

左寄せ

タイトル

マイボックス

基本

ポイント

しかく(枠のみ)

まるみ

参考

参考

メモ

メモ

ポイント

ポイント

注意ポイント

注意ポイント

はてな

はてな

ミニふきだし

ふきだしテキスト

マイボックス(+CSSクラス)

メモ

メモ

メモ(下線のみ)

メモ

メモ(枠のみ)

メモ

メモ(枠・下線あり)

メモ

注意(下線のみ)

ここに注意

必要なモノ

必要なモノ

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

必要なモノ(ドット下線)

必要なモノ

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

チェックリスト

チェックリスト

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

チェックリスト(ドット下線)

チェックリスト

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

簡単な流れ

簡単な流れ

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

簡単な流れ(ドット下線)

簡単な流れ

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

見出し付きフリーボックス

基本

ポイント

注意

注意

はてな

はてな

ポイント

ポイント

メモ

メモ

基本(タイトル幅100%)

見出し(全角15文字)

注意(タイトル幅100%)

注意

はてな(タイトル幅100%)

はてな

ポイント(タイトル幅100%)

ポイント

メモ(タイトル幅100%)

メモ

メモボックス

メモ

 

 

スライドボックス

+ クリックして下さい

スライドボックス見本

チェックボックス

 

こんな方におすすめ(v)

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

こんな方におすすめ[v]

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

ガイドマップメニュー

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

以上が使えるボックス一覧です。

ご自身の好みに合わせて使ってみてください!

スポンサーリンク

-Affinger

© 2021 まきろぐ Powered by AFFINGER5