記事を検索

ブロックエディタは、WordPressの記事作成を直感的にできる画期的なツール。

画像挿入や文章を2列にするのも簡単にできる。

初めて触れる方でも簡単に使えるように、基本的な使い方から応用的な機能まで丁寧に解説する。

ブロックエディタの考え方

• 本文は複数のブロックで構成される。
• ブロックにはさまざまな種類がある。
  • 見出しブロック
  • テキストブロック
  • 画像ブロック
  • リストブロックなど

投稿画面全体の構成。

※ブロックは「メイン」で使う。

• 記事作成の全般的なメニュー（記事の下書き保存、公開など）

• タイトル
• 本文（ブロックを使う）

• 各種設定
  • 投稿全体の設定（カテゴリーの設定など）
  • ブロックごとの設定（文字サイズの調整など）

【補足】各ボタンの詳細

詳細は以下のサイトが分かりやすい。

【図解あり】WordPressブロックエディタ（Gutenberg）の使い方

この記事ではブロックエディタでの記事作成や個々のブロック操作を初心者向けにわかりやすく解説しています。この記事を読めばブロックエディタの基本操作をマスターできます。

https://www.xserver.ne.jp

1. クリック
   • プラスマークをクリックしてブロックを追加する。
2. ブロックの種類を選択
   • ブロックを何にするか選択する。

HTMLで実現できる基本的なタグはブロックエディタでも実現できる。

• 太字
• リンク
• 見出し
• 画像など

ブロックとブロックの間に、任意の余白(スペース)を挿入できる。

• ブロックを追加する「+」マークをクリックし、「すべて表示」を押すと「スペーサー」が選べる。

• スペースの高さはドラッグで任意に調節可能。

ブロックエディタを使うと簡単に横並びできる。

• ブロックを追加する「+」マークをクリックする。
• 「すべて表示」を押すと「カラム」が選べる。

• カラムを選択するとカラムのレイアウトを選べる。

• また、あとからカラム数を変更することもできる

一度作ったブロックを登録しておき、再利用することができる機能。

［投稿］の編集画面で以下のとおり操作する。

［投稿］の編集画面で以下のとおり操作する。

再利用ブロックは1つ変更すると他の再利用ブロックもすべて同じように修正される。

→「どの記事でも共通の内容を表示したい」場合などに使用するのがおすすめ！

特定のブロックだけを個別に編集したい場合

呼び出し後「通常ブロックへ変換」すればそのブロックだけを編集できる。

以下の動画の説明が分かりやすかった。

再利用ブロックを使用してラクに記事を書こう【WordPress新エディタ対応】 記事の書き方vol.9

＼ 新エディタ対応 ／WordPressでの記事の書き方をシリーズ動画で紹介 記事の書き方 vol.9 再利用ブロックを使用してラクに記事を書こう▼続きの動画https://youtu.be/PVEV5Wa_epE＼ 記事の書き方 シリーズ動画 ／【テーマ共通の基本】1. 新エディタの記事画面の見方　→　htt…

https://www.youtube.com

テーブルを実装できる

［投稿］の編集画面で以下のとおり操作する。

以下のサイトも分かりやすかった。

WordPressに表を挿入する！初心者でも簡単にできる方法や応用設定までを徹底解説｜ワプ活

挿入する事でサイトの滞在時間が伸びたり、間接的にSEO効果があったり、目標の達成率が改善する効果も期待できる表。本記事ではWordPressで簡単にキレイな表を挿入する3つの基本的な方法を紹介します。

https://www.conoha.jp

テーブル全体を選択し、画面右側のサイドバーで設定できる

【補足】「列」をヘッダーにする方法

※HTMLが触れる人向け

WordPressの機能では必ず「行」がヘッダーとなるが、以下の方法で「列」をヘッダーにできる。

• 「HTMLとして編集」で、ヘッダーにした部分をtdタグ→thタグに変える。

詳細は以下のサイトを参照。

WordPress5, デフォルトのテーブルで列をヘッダーに変える方法。プラグインなしで。

WordPressはバージョン5になってからGutenbergを編集画面のメインに使っているんですが、デフォルトのテーブルのカスタムがしずらくなりました。でも、列をヘッダーに変えることはできます。今回はプラグインは使いません。標準機能だけで行います。

https://tadtadya.com

【補足】Googleスプレッドシートのデータをテーブルにする方法

方法1 スプレッドシートの共有を有効にして表示する

共有するだけならプラグインを使わなくても実現可能だが、見やすくない。

プラグイン「Inline Google Spreadsheet Viewer」を使用すると…

• <iframe> の埋め込みではなく <table> で表を出力できる
• 生成した表にソート機能や検索機能がつけられる
• 表のデータを CSV や Excel ファイルとしてユーザーにダウンロードしてもらえる
• 表データをもとに SVG 形式でグラフを出力できる

以下のサイトで詳しく説明されている。

Inline Google Spreadsheet Viewer｜Google スプレッドシートから WordPress に表を埋め込む | セオリコ

Googleスプレッドシートで作成した表をHTML形式で埋め込みできるプラグイン「Inline Google Spreadsheet Viewer」の使い方を解説します。

https://naifix.com

方法2 スプレッドシートからHTMLを掃き出す

手順1 スプレッドシートをHTML形式でダウンロード

スプレッドシートを開き、
［ファイル−ダウンロード−ウェブページ（.html）］

手順2 ダウンロードしたHTMLをWordPressに貼り付け

WordPressで［投稿］編集画面を開き、テーブルのブロックを追加する。

テーブルをHTMLとして編集する状態にする。

ダウンロードしてきたHTMLファイルをテキストエディターで開く。

内容をすべてコピーする。

WordPressに貼り付ける。

※スタイルもそのまま適用される

※スプレッドシートで文字がセルから溢れているとWordPress側でもあふれるので注意

【補足】横長のテーブルをスクロール可にする方法

※HTMLが触れる人向け

「HTMLとして編集」し、tableタグをdivタグで囲み、divタグにstyle=”overflow-x:auto;”と記述する。

https://pianobeam.com

※CSSが触れる人向け

CSSを追加したいブロックを選択した状態で、
［ブロックー高度な設定ー追加CSSクラス］で指定する