Gutenbergブロック デフォルト

段落ブロック

段落ブロックには予めいくつかの1クリックで反映できるスタイルが用意されています。ただし、初期設定では非表示となっているので使うものだけを有効化して下さい。

段落スタイルではテーマ(及びプラグイン)として主に以下の設定が出来ます。

  • スタイルの設定
  • ボーダーの設定
  • アイコンの設定(一部)

Gutenbergの投稿画面とブラウザ側の表示は調整の仕様上、一部異なります。

テキスト

「リッチなテキスト制御」ボタンをクリックするとデフォルト以外にもいくつかテーマ固有のスタイルが用意されています

ver20230323より以下の仕様変更を行いました。

オリジナル装飾を別メニューへ変更
書式

AFFINGER独自の装飾を専用ボタンへ移動しました。

  • ソースコード風
  • ドット線
  • マイカラー(ver20210114より廃止)
  • マイ細マーカーA
  • マイ細マーカーB(ver20210114より)
  • 太字
  • 太字(赤)
  • 文字サイズ(大)
  • 文字サイズ(小)
ショートコードを挿入するメニューを追加

いくつかのショートコードによるアイコンを挿入するボタンを追加しました。

装飾削除ボタンを追加

装飾を削除するボタンを追加しました。

絵文字機能(ver20230703より)

段落ブロックに絵文字挿入機能をver20230703より追加致しました。

※最新のOSでは問題ないかと思われますが、環境依存のためご環境に依っては表示が異なる場合がございます。

カラー設定について

「マイカラー」「マイ細マーカー」やカラーパレットの4色はGutenberg設定にてカスタマイズできます。

スタイル

段落ブロックにあるスタイルの全体的な設定は「Gutenberg設定」>「段落ブロック」にあります。

設定では各スタイルの表示、非表示設定及び初期カラー、一部の角丸設定ができます。

スタイルの表示について

あまりたくさんのスタイルを表示(有効化)すると段落ブロック選択ごとに読み込み時間がかかる場合があるので注意して下さい

デフォルトで用意されている「カスタム」及び「ふきだし」「まるもじ」「ボタン」スタイルはアイコンリストから自由に選択することが可能です(それ以外は変更できません)。

より細かなカスタマイズを行いたい場合は「メモブロック」等をご利用下さい。

色の設定及び優先度について

Gutenberg管理の色の設定は左側がアイコン、右側が背景の基本カラーとなります。

また、カラーは各スタイルごとに投稿画面の色設定で買えることも可能です。

設定した背景色は「Gutenberg設定 < スタイルの色設定」で優先されます。アイコン色は「Gutenberg設定 < スタイルの文字色設定」となり、ブロック側で個別に文字色を指定した場合はその色にアイコンカラーも連動します。

色設定が反映されるのはカラーパレットのみになります(カスタムカラーは反映されません)

簡易会話について

会話ふきだしとは仕様が異なります

「簡易会話」スタイルは会話ふきだしデザインを簡易に表示するスタイルです。

原則としてショートコードや会話ふきだしブロックのものとは異なりますが、以下の点は設定が反映されます。

  • アイコンは「テーマ管理」>「会話アイコン」のアイコン画像1及びアイコン画像2が反映されます(※会話ふきだし機能と異なり、画像は背景として設定されます。必ず正方形の画像を指定してください)
  • カラーは「カスタマイザー」>「オプション」>「会話ふきだし」又は各カラーパレットで変更できます(※投稿の色設定が優先されます)
  • カスタマイザーの「アイコンの枠線を消す」、テーマ管理の「会話アイコンを少し動かす」「会話アイコンを少し大きく」に反映します
  • 仕様上、管理画面の表示とブラウザの表示が異なります(管理画面ではふきだしデザインになりません
  • ボーダーを反映すると吹き出し部分は塗りつぶしのデザインになります
  • アイコン名は表示されません

より細かなカスタマイズ等を行いたい場合は「会話ふきだし」ブロックをご利用下さい。

スタイルの紹介

カスタム

ダミーのテキスト

「カスタム」はアイコンを変更することが可能です。

より柔軟なカスタマイズを望む場合は「STINGER: メモ」ブロックをご利用下さい。

メモ

ダミーのテキスト

リンク
チェック

ダミーのテキスト

ポイント

ダミーのテキスト

インフォ

ダミーのテキスト

初心者

ダミーのテキスト

注意

ダミーのテキスト

注意(グレー)

ダミーのテキスト

マル

ダミーのテキスト

バツ

ダミーのテキスト

Like

ダミーのテキスト

Bad

ダミーのテキスト

Code

ダミーのテキスト

付箋

ダミーのテキスト

囲みドット

ダミーのテキスト

ふきだし

ダミーのテキスト

アイコンを設定することが可能です。

まるもじ

ダミーのテキスト

アイコンを設定することが可能です。

簡易ボタン

ダミーのテキスト

アイコンを設定することが可能です。

簡易会話A

ダミーのテキスト

簡易会話B

ダミーのテキスト

簡易会話などスタイルによっては仕様上、「テキストの配置」が反映されないスタイルもございます。

 

解決しないことは検索もしてみてね

人気の解析ツールをセットにしたお得なパックです。サイトの状況や改善点を視覚化することで目標達成のためやるべきことが明確になります。

  • シンプルでわかりやすいアクセス解析
  • クリック計測・広告管理機能
  • ABテスト機能

今ならお得なキャンペーン中!

さらに詳しくみる

テーマ固有の機能説明となります(WordPress自体の機能説明は省略しております)

Gutenbergブロックご利用の注意点

  • 当マニュアルにて記載(説明)していないブロック及び設定には対応していない場合がございます
  • ウィジェットブロックエディター及びメニューブロックエディター、テンプレートエディター機能には非対応です(対応予定は未定です。)
  • ブロック機能は原則としてコンテンツ(記事)内での利用を想定しております。以外の箇所では正常に反映されない場合やレイアウトが崩れる場合がございます。
  • オリジナルスタイルのカラーはパレットのみ対応しております(カスタムカラーには未対応です)
  • WordPress本体(デフォルト)のブロックパターンは非表示になっております
  • Gutenbergで設定できる数値等は柔軟性を持たせておりますが、極端な数値はレイアウトが破たんする場合がございます
  • 記事一覧(カテゴリ・タグ含む)、会話ふきだし、目次、URLカード等は「追加 CSS クラス」非対応です。
  • 原則としてパソコン端末での編集を想定しております(モバイル管理画面ではレイアウトが崩れる場合がございます)
  • クラッシックエディターとは別仕様となります。(できることや設定、デザインは異なります)
  • ブラウザ側と投稿画面のデザインは同一ではございません。(仕様上、Gutenberg側は簡潔又は別デザインとなる場合がございます)
  • AMP非対応(クラッシックブロックのみ対応※条件等はWING同様)
  • LPワイド(レイアウト)非対応(クラッシックブロックのみ※条件等はWING同様)
  • テーマのデザインや設定は原則として第一階層での使用を想定しております。入れ子による使用は状態によってレイアウトが崩れる場合がありますのでご注意下さい。
  • 幅が狭くなるカラムブロック内ではレイアウトが崩れる場合がございます。
  • 従来のショートコードはクラッシックブロック又はブロックに直接記入してご利用ください。
  • 従来のショートコードのによるデザインや設定とGutenbergブロックは名称が同じでも内容及びデザインが異なる部分がございます。
  • デザインにbefore、after属性をしているため編集時に(管理画面内にて)軽微なレイアウト崩れが起こるケースがございます
  • WordPressの仕様変更により、オリジナルブロックの「文字サイズ」設定の名称が「カスタム」に変更になりました。

基本と注意事項

Gutenbergブロックの基本と注意事項

グループ

マイブロック

ACTION 専用ブロック

SUGOI MOKUJI(すごいもくじ)[PRO] - 【公式】STINGER STORE
SUGOI MOKUJI(すごいもくじ)

9月末までキャンペーン中 5,980円 → 4,980円 本を買うときに目次を確認するように、ブログ ...

on-store.net

外部サイトやリンクもブログカードにできるWordPressプラグイン
外部サイトやリンクもブログカードにできるWordPressプラグイン

セール対象商品 3,980円 → 2,980円 このプラグインを利用するには別売のWordPress ...

on-store.net

AFFINGERデザインカード

オススメ記事

no image 1

ver20240115よりレイアウト及びウィジェットエリア名称を一部変更いたしました。 下部にPDF ...

2

https://action-sample.com/ 上のサイトのようなカテゴリーで分けた記事一覧の ...

3

AFFINGERブロックプラグインプラグインを有効化しよう 当テーマは「AFFINGERブロックプラ ...

-Gutenbergブロック, デフォルト

【AFFINGER監修】 SEOを考慮したAI記事作成ツールで圧倒的、効率化UP

AFFINGER監修 GPTsリストはコチラ

AFFINGER公式マニュアル

パスワードを入力してください

- 不明な方はコチラ -

PAGE TOP