• WordPressブロックエディターの使い方

    New コピペで使える!ブロックパターンギャラリーをリリースしました!

    LIQUID PRESS は、ブロックエディターに対応しています。 ブロックエディターにより、ノーコードでリッチなデザインを簡単に作成することができます。

    Gutenbergブロックスタイルデザイン

    会話形式の吹き出し、ポップアップバナー等についてはプラグインがあります。

    デザイン変更については、無料デザインスキン&パーツもご覧ください。

    注意事項

    ※ブロックエディターは、WordPress本体のコア機能に依存します。本体の仕様変更等によって、エディター仕様も変更される場合があります。予めご了承ください。
    ※ブロックエディターで問題が発生する場合は、よくある質問をご覧ください。

  • 各部名称

    ブロックエディター編集画面の各部名称

    ブロックエディター編集画面の各部名称(WordPress 5.3 時点)。
    ※WordPress本体のバージョンにより異なります。

    文書設定

    パーマリンク

    WordPressブロックエディターの使い方 パーマリンク

    カテゴリー・タグ

    WordPressブロックエディターの使い方 カテゴリー・タグ

    アイキャッチ画像

    WordPressブロックエディターの使い方 アイキャッチ画像
  • エディター設定

    フルスクリーン解除

    WordPress 5.5 からは、フルスクリーンモードがデフォルトで有効になっています。
    右上のツール設定を開き、フルスクリーンモードのチェックを外すと解除することができます。 WordPressブロックエディターカスタマイズ方法 フルスクリーン解除

    トップツールバー

    各ブロック上に表示される、ブロックツールバーはトップに固定することができます。
    右上のツール設定を開き、トップツールバーにチェックを付けます。標準設定だと使いにくい場合は試してみてください。 WordPressブロックエディターカスタマイズ方法 トップツールバー

    ブロックマネージャー

    挿入する際に表示される、ブロックの候補をカスタマイズすることができます。
    右上のツール設定を開き、ブロックマネージャーを押下し、使用しないブロックのチェックを外します。候補が沢山ありすぎて使いにくい場合は変更します。 WordPressブロックエディターカスタマイズ方法 ブロックマネージャー

    再利用ブロックを管理

    再利用ブロックを管理することができます。
    右上のツール設定を開き、再利用ブロックを管理を押下すると、管理ページに遷移します。 通常の記事のように編集、削除したり、JSON形式でインポートおよびエクスポートすることができます。 WordPressブロックエディターカスタマイズ方法 再利用ブロックを管理
  • ブロックの作成

    プラスアイコンを押下すると、ブロックの候補が表示されます(ブロックの一覧)。
    ブロックを選択すると挿入されます。ブロックツールバーには、サイドバーやメニューの内容はブロックにより異なります。 WordPressブロックエディターの使い方 ブロックの作成

    代表的なブロック

    見出しブロック

    WordPressブロックエディターの使い方 見出しレベルを変更

    段落ブロック

    WordPressブロックエディターの使い方 背景色やテキスト色を変更

    ギャラリーブロック

    WordPressブロックエディターの使い方 カラム数やリンク先を設定

    カバーブロック

    WordPressブロックエディターの使い方 カバーブロック

    カラムブロック

    WordPressブロックエディターの使い方 カラムブロック

    埋め込みブロック

    WordPressブロックエディターの使い方 埋め込み
  • ブロックの操作方法

    ブロックの色設定

    対応するブロックでは、サイドバーで背景色や文字色等を設定することができます。 LIQUID PRESS では、一番左上の色は「テーマカラー」と連動しています。

    ブロックの並び替え

    ブロックにフォーカスすると、左側に並び替えツールが表示されます。
    上下アイコンを押下またはドラッグしてブロックを移動することができます。

    ブロックの幅広/全幅

    対応するブロックでは、幅広、全幅のレイアウトを選択することができます。
    幅広:通常ブロックより少し幅が広く表示されます。
    全幅:画面幅いっぱいに表示されます。※1カラムのページ向け。 WordPressブロックエディター ブロックの幅広/全幅

    ブロックをコピー

    ブロック上のメニュー(3点リーダー)から「コピー」します。貼り付けしたい位置で一旦「段落」を作成し、ペースト(Ctrl+V or Cmd+V)できます。 WordPressブロックエディターの使い方 「ブロックをコピー」

    すべてのコンテンツをコピー

    ブロック右側のメニュー(3点リーダー)から「すべてのコンテンツをコピー」します。
    本文エリア上で右クリック「貼り付け」できます。 WordPressブロックエディターの使い方 「すべてのコンテンツをコピー」

    ブロックの複製

    ブロック右側のメニュー(3点リーダー)から「複製」できます。 ブロックの複製

    再利用ブロック

    ブロックの内容を保存して再利用できる機能です。よく使うブロックを保存しておくと便利です。
    ブロック右側のメニュー(3点リーダー)から「再利用ブロックに追加」できます。名前をつけて保存します。 WordPressブロックエディターの使い方 再利用ブロック 「再利用可能」ブロックの中に、保存したブロックが表示されます。個別に変更する場合は「通常のブロックへ変換」して編集します。 WordPressブロックエディターの使い方 再利用可能ブロック

    HTMLとして編集

    ブロック右側のメニュー(3点リーダー)から「HTMLとして編集」できます。 WordPressブロックエディターの使い方 HTMLとして編集

    コードエディター

    画面上部右上のメニュー(3点リーダー)から「コードエディター」に切り替えることができます。
    旧テキストエディターのように、HTMLを編集するモードになります。
    なお、ブロックはHTMLコメントで識別できるようになっています。 <!-- wp:cover-image -->...<!-- /wp:cover-image --> WordPressブロックエディターの使い方 コードエディター
  • グループブロック

    複数のブロックを選択して「グループ」化することができます。
    グループブロックは、背景色や文字色を設定し、セクションとしてデザインに活用できます。
    詳しくは動画マニュアルをご参照ください。

  • ブロックスタイル

    LIQUID PRESS では、ブロックスタイルを利用して簡単にデザインを変更することができます。
    詳しくは、ブロックスタイルデザインをご参照ください。 ブロックスタイルデザイン
  • ブロックパターン

    WordPress 5.5 からブロックパターン機能が利用できるようになりました。
    ブロックパターンは、画像や段落等の複数ブロックをまとめてデザインパターン化したものです。 個別に編集可能な点が再利用ブロックとは異なります。

    再利用ブロック:編集すると過去の物も変更される。個別の編集には「通常のブロックへ変換」が必要。
    ブロックパターン:個別に編集可能。

    プラスアイコンを押下し、「パターン」タブからブロックパターンを選択して挿入します。 WordPressブロックエディター ブロックパターン

    ブロックパターン作成方法

    ブロックパターンを作成して追加することも可能です。
    無料WordPress公式プラグイン「LIQUID BLOCKS」でブロックパターンを作成、管理することができます。 WordPress ブロックパターンの管理画面 ブロックパターンの追加方法について、詳しくは下記をご参照ください。
    無料!Gutenbergブロックテンプレート LIQUID BLOCKS
  • デザインカスタマイズ方法

    LIQUID PRESS では、ブロックスタイル機能で簡単にデザインを変更できますが、設定サイドバー>高度な設定>追加 CSS クラス で、 さらに詳細なカスタマイズをすることができます。 高度な設定>追加 CSS クラス

    追加 CSS クラス

    影付きブロック

    追加CSSクラス:shadow p-3 影付きブロック

    枠線付きブロック

    追加CSSクラス:border p-3 枠線付きブロック

    角丸のブロック

    追加CSSクラス:roundedまたはrounded-circle
    画像にも指定可能です。 角丸のブロック

    フォントサイズ

    フォントサイズの調整が可能です。
    追加CSSクラス:h1からh6

    横幅のサイズ

    横幅のサイズの変更が可能です。
    追加CSSクラス:w-25 w-50 w-75 w-100 w-auto

    margin

    マージンの調整が可能です。
    追加CSSクラス:m-0からm-5
    mt-0mr-0mb-0ml-0 中央寄せm-auto

    padding

    パディングの調整が可能です。
    追加CSSクラス:p-0からp-5
    pt-0pr-0pb-0pl-0

    display

    ディスプレイの変更が可能です。
    d-none d-inline d-inline-block d-block d-table d-flex
    LIQUID PRESS では、Bootstrapに対応しているため、 豊富なCSSクラスを利用してレイアウトやスタイリングを行うことができます。
    使用可能なCSSクラスについて詳しくはこちらをご覧ください。
  • 画面サイズによる出し分け

    LIQUID PRESS では、ブロックのメニュー>詳細>追加CSSクラス に、表示ユーティリティを入力することで、 デスクトップとスマートフォン等でブロックを出し分けることが可能です。

    表示ユーティリティ(例)

    画面サイズCSSクラス
    xsのみ非表示(デスクトップのみ表示)d-none d-sm-block
    xsのみ表示(モバイルのみ表示)d-block d-sm-none
    ブロックを、デスクトップ向けとモバイルの向けの2つ作成して編集します。 WordPressブロックエディターでのデザイン 画面サイズによる出し分け さらに詳細な出し分けは 表示ユーティリティ をご参照ください。

    カラムの順番を変更する

    デスクトップとスマートフォンで、カラムの順番を変更することができます。
    例:「カラム」ブロックに対して、追加 CSS クラスorder-md-0 order-2を指定します。
    デスクトップでは画像が先(左)。 スマートフォンでは画像が後(下)。
  • スライダー

    カラムスライダーフェードスライダー手動スクロールスライダーなどを簡単に作成できます。
    詳しくは ブロックスタイルデザイン をご参照ください。 カラムスライダー
  • 吹き出し

    会話形式の吹き出しが作成できる、無料WordPress公式プラグインです。
    詳しくは LIQUID SPEECH BALLOON をご参照ください。 LIQUID SPEECH BALLOON 会話

LIQUID PRESS では、WordPressブロックエディター対応を推進しております。