Column

ヒラシカ

Wordpress関連

Gutenbergには、どんなブロックが存在する?

2019.01.31

『一般ブロック』を使いこなす。※重要

『一般ブロック』一覧

段落 テキストを書くのに使用します。
画像 画像を挿入します。
見出し 見出しタグを挿入します。
ギャラリー 複数の画像でギャラリーを作成します。
リスト 箇条書きのリストを作成する。
引用 引用部分を示すのに使用します。
音声 音声コンテンツを埋め込む際に使用します。
カバー カバー画像を設定する際に使用します。
ファイル ダウンロード用のファイルを配置する際に使用します。
動画 動画コンテンツを配置する際に使用します。
特に使用頻度の高いブロック
段落

段落ブロックは記事を投稿する際に用いられる通常のテキスト分を生成するブロックです。

※右側のメニューでは、ブロック全体の設定を行うことができます。

文字の設定
※文字サイズの設定では、「小」「標準」「中」「大」「特大」から感覚から選択することもできますし、右側のボックスにポイントを指定することも可能です。
ドロップギャップをオンにすると、下図のようにブロック先頭の文字を大きく表示することができます。
(他のブロックの表示に影響することもあるので、プレビューを確認しましょう)
注)製作会社にHPの製作をご依頼された場合、文字サイズの設定が反映されない仕様になっている場合があります。
(画面全体のレイアウトを保持するため)

背景色・テキストの設定
※色設定の項目では、ブロック全体の背景色やテキストの文字色を変更できます。

コンテンツエリア内の上部にあるツールについて
テキストの配置や一部分のテキストを太字にしたりリンクを設定することも可能です。

画像

画像ブロックでは、従来のように画像を挿入することが可能です。

画像のアップロードについて
TinyMCEエディター(旧エディタ)に実際されていた『アップロード』『メディアライブラリ』以外にも、
『URLから挿入』というアップロードの方法が追加され、任意の画像URLを入力することで画像を購入することができます。

画像の配置位置の指定
※画像の配置を「左寄せ」「中央」「右寄せ」と簡単に変更することができます。

見出し

記事内の見出しを設定するブロックです。
見出しのレベル(h2~h6)を右側メニュー及び上部のツールから簡単に選択でき、
HTMLアンカーを設定することもできます。

ギャラリー

ギャラリーブロックとは、複数の画像を並べて表示するかできるブロックです。
※画像の掲載方法は『画像ブロック』と同様な手順になりますが、
右側のメニューで設定を変更することで、表示形式を設定することができます。
個人的には便利な機能の一つだと思います。

リスト

箇条書き(順番(記号)なし・あり)を作成するブロックです。
上部のツールで順番(記号)なし・ありを切り替えられる他、インデントの上げ下げも簡単に行うことができます。

『フォーマット』で記事を見やすくしよう!

『フォーマット』一覧

コード コードを埋め込む際に使用します。
クラシック TinyMCEエディタ(旧エディタ)で編集できるブロックを作成します。
カスタムHTML HTMLを直接記述する際に使用します。
整形済みテキスト 特殊文字などをそのまま表示したい際に使用します。
プルクオート スタイルが適用された引用文を作成できます。
テーブル 表形式のコンテンツを作成します。
詩的なコンテンツを作成します。(背景色がつきます)
特に使用頻度の高いブロック
クラシック

クラシックブロックは通常のブロックと異なり、少し特殊なブロックになります。
旧エディタの『Tiny MCEエディタ』を使用することができ、複数のブロックをまとめて扱うことができます。
※以前に投稿エディタの仕様にできると捉えていただいた方がイメージしやすいかと思います。

また、クラシックブロックを挿入しなくても、コードエディタにHTMLを入力し、
ビジュアルエディタに戻すとクラシックブロックとして扱われます。

カスタムHTML

ビジュアルエディターでHTMLを挿入、編集しやすくするためのプロックです。
すべてHTMLで記事を投稿したい方にお勧めです。
※記事を独自に装飾したい場合に活用できます。またプレビューで確認ができるため、HTMLで構築できる方には自由度が広がるかと思います。

テーブル

表形式のコンテンツを作成するブロックです。
htmlで記述すると面倒だったtableタグも、
Gutenbergなら作成する際に列数と行数を指定するだけで簡単に作成することができます。
※会社案内やポスターなどの開催場所や開催日時を表示させたい場合など多岐にわたり使用頻度は高いかと思います。


このように簡単に実装できました。

表(テーブル)の配置
また上部のツールを使うことで、テーブル全体の「左寄せ」「右寄せ」「中央寄せ」ができます。
(もう一度クリックすることで解除されます。)

表(テーブル)の配置
行、列も上部ツールから追加・削除ができます。

表示スタイルを変えてみよう
右側のメニューにある『スタイル』から「一般的な罫線式」と「ストライプ式」を選ぶことができます。
用途に合わせて使い分けてください。

列の幅を均等に配分したい
右側のメニューにある『テーブル設定』から「固定幅のテーブルセル」のカーソルを右にスライドすると、列の幅が均等になり、見た目も整います。

『レイアウト要素』で記事にアクセントをつけよう!

『レイアウト要素』一覧

ボタン ボタンを作成します。
カラム 複数カラムのコンテンツを作成します。
メディアと文章 メディアと文章を2カラムで表示します。
続きを読む トップページで抜粋表示する際の位置を指定します。
ページ区切り 次のページに移動する位置を指定します。
区切り 記事の区切りを挿入します。
スペーサー ブロックの間の余白を挿入します。
特に使用頻度の高いブロック
カラム

記事内のページを分割してくれるブロックです。
スマホで見た場合も自動で縦に並び変えてくれます。

メディアと文章

よくサイトで見かける「画像とテキストが横並びされる」を設定できるブロックです。
ただし、自動生成される記述に難があり、見てる方のブラウザ(IE,Firefox、Chome)などで反映されないデメリットもあります。
画像の左右の配置切り替えや大きさも青丸のドラッグで簡単に行えます。

『ウィジェット』って何ができる?

『ウィジェット』一覧

ショートコード ショートコードを挿入します。
アーカイブ アーカイブウィジェットを挿入します。
カテゴリー カテゴリーウィジェットを挿入します。
最新のコメント 最新のコメントを表示します。
最新の記事 最新の記事を表示します。

『埋め込み』機能を使いSNSを記事に埋め込んでみよう!

※埋め込み機能は数が多いので一部だけ抜粋

『ウィジェット』一覧

埋め込み URLを指定して画像・動画などのコンテンツを埋め込みます。
Facebook Facebookの投稿を埋め込みます。
Twitter Twitterの投稿を埋め込みます。
Youtube YouTubeの動画を埋め込みます。
特に使用頻度の高いブロック
Facebook

Facebookも入力することで埋め込むことができます。

Youtube

Youtubeの動画URLを入力すれば埋め込むことができます。


このコラムを書いた人

ヒラシカ

ヒラシカ

more

おすすめのコラム