検索対象:
ブロックの追加

WordPress5のブロック機能

WordPress 5の新エディターGutenbergは、「ブロック」でコンテンツを管理しています。ブロックは、すでに60種以上、搭載されています。

ブロック機能に対応しているプラグインも出始めていて、プラグインをインストールする際にオリジナルプラグインも同時にインストールされます。
これらのブロックも、[ブロック]メニューに追加されます。

ブロックを使うには

ブロックの挿入位置でクリックし、[ブロックの追加]ボタンをクリックします。
[ブロックの追加]ボタンは、挿入位置の左側と、ツールバー左端にあります。また、前後のブロックを選択したときに表示される場合もあります。
どのボタンをクリックしてもOKです。

ブロックの追加
▲[ブロックの追加]ボタンは、どれをクリックしてもOK

 

ブロックメニュー

ブロックのメニューは、カテゴリーに分けて整理されています。
カテゴリー内のブロックの配置は、使用環境によって変化します。

  • 最も使われている
  • インライン要素(表示されない場合もあり)
  • 一般ブロック
  • フォーマット
  • レイアウト要素
  • ウィジェット
  • 埋め込み

この他にも、プラグインベンダーから提供されるオリジナルブロックがメニューに追加されます。

ブロックカテゴリー
▲ブロックカテゴリー(プラグインベンダーのブロックも追加される)

 

最も使われている

頻繁に使われるブロックが10種類表示されます。ここに表示されるブロックは、お使いの環境によって変化します。
また、最もよく使うブロック([段落]ブロックは除く)は、ウィンドウ右側に表示されるので、ここで選ぶことも可能です。

よく使うブロック
▲最も使われているブロック(表示ブロックは使い方によって変化)

 

インライン要素

タイトル以外で、テキストを選択できる状況になったときに表示されるカテゴリーです。[インライン画像]ブロックは、とても重宝する機能です。
インライン画像は、文字と同様に扱われますので、文字の増減があったときに付随して動いてくれます。

また、他のブロック内に挿入することで、ワンポイントの画像をすばやく作成できます。たとえば、[テーブル]ブロック内に[インライン]ブロックを使うと、以下のような表を簡単に作成できます。

▲[テーブル]ブロックに[インライン]ブロックを組み合わせる
▲[テーブル]ブロックに[インライン]ブロックを組み合わせる

 

一般ブロック

使用頻度の高いブロックが集まっています。中でも[段落]ブロックはよく使います。
[段落]や[見出し]などのテキスト系ブロックは、ブロックを挿入したら、直接文字を入力していきます。
[画像]ブロックや[カバー]ブロックなどのファイル選択系ブロックは、ブロックを挿入すると続けて選択パネルが表示されるので、必要な画像やファイルを選択して挿入します。

  • 段落 テキスト系
  • 見出し テキスト系
  • リスト テキスト系
  • 引用 テキスト系
  • 画像 ファイル系 →→ 選択パネルが表示される
  • カバー ファイル系 →→ 選択パネルが表示される
  • ギャラリー ファイル系 →→ 選択パネルが表示される
  • 音声  ファイル系 →→ 選択パネルが表示される
  • ファイル ファイル系 →→ 選択パネルが表示される
  • 動画 ファイル系 →→ 選択パネルが表示される
ファイル選択系ブロック
▲ファイル系のブロックでは、選択パネルが表示される

 

段落

[段落]ブロックが最もカスタマイズ機能が豊富です。
太字、イタリック、リンク、取り消し線、行揃え、文字サイズ、ドロップキャップ、背景色/文字色などを設定できます。
最も使用頻度が高いブロックです。

フォーマット

「ビジュアルエディター」上でコードを入力するための[コード]ブロック、同じくHTMLを直接入力するための[カスタムHTML]ブロック、作表用の[テーブル]ブロックなど、コンテンツの形を保ったまま挿入するブロックが集められています。

この中で、[クラシック]ブロックは特殊な役目のブロックで、旧エディターのコンテンツをまるごと包みこみます。他のブロックでは、ブロック挿入時に専用のコード(コメントタグ)が付与されますが、[クラシック]ブロックにはありません。いわば、旧エディターのコンテンツを救済するブロックです。

レイアウト要素

段組みを設計する[カラム]ブロックや[メディアと文章]ブロック、ボタンを挿入する[ボタン]ブロックなどがあります。

ウィジェット

最新の記事一覧を自動表示させる[最新の記事]ブロック、カテゴリー一覧を自動表示される[カテゴリー]ブロックなどがあります。
ウィジェットに属するブロックは「動的ブロック」になっていて、記事やコメントが更新されたときに、連動して表示内容も更新されます。

埋め込み

TwitterやYouTubeなどのコンテンツを埋め込むためのブロックです。数が多いです。

プログラムベンダーのブロック

JetpackやYoast SEOのように、プラグインをインストールするときに同時にブロックもインストールされる場合があります。今後は、このタイプが増えていくと思われます。スタイルの設定もできるので、なかなか使いやすいです。
Yoast SEO、Gutenbergブロックに対応→→


『WordPress はじめてのデザイン&カスタマイズ入門』
ブログ・サイトの改善方法がわかる

WordPressはじめてのデザイン&カスタマイズ入門

著 者:茂木葉子、岩本修
監修者:星野邦敏、吉田裕介
出版社:技術評論社
ISBN978-4-294-10362-0
292ページ
2,580 円
2019年1月25日発売

WordPress本:概要

WordPress 5.Xでカスタマイズする方法を凝縮

WordPress はじめてのデザイン&カスタマイズ入門』に興味を持っていただき有難うございます。

本書は、WordPress 5を使ったカスタマイズ入門書です。WordPress 5とGutenbergでWebサイトを制作&カスタマイズするための必要な情報を盛り込みました。

  • WordPressを今回初めて使うけれど、自分にも使えるの?
  • 設計してもらったWordPressで記事は書いているけれど、仕組みは把握できていない……
  • 新しいブロック機能、使っても大丈夫? どうやって使うの?
  • WordPressサイトをもう少しオリジナルデザインに変えたい!

段組み(カラム)の設計、背景画像や動画の上にテキストを重ねたデザインなど、従来はPHPやCSS、プラグインで設計していたデザインが、Gutenbergのブロックを選択するだけで再現されます。手軽に楽しく、WordPressサイトのカスタマイズに挑戦いただけることと思います。

HTMLやCSS、PHPの機能のうち、「カスタマイズのためには、ここだけはぜひ押さえておきたい」事項も解説しています。併せてご活用ください。

活版印刷技術の発明者Johannes Gutenbergにあやかって命名されたGutenbergエディターが、これからどのように広がっていくのか、とても楽しみです。
ぜひワクワクしながら、WordPress 5のカスタマイズの世界をお楽しみください。

目次

Chapter1:WordPressの機能をおさらいしよう

  1. 「誰のため? 何のため?」を意識しよう
  2. WordPressって何だろう?
  3. WordPressフォルダの中は、どうなっている?
  4. 新エディターGutenberg、登場!
  5. WordPressを使ってみよう
  6. WordPressの環境を整えよう
  7. Webサイトのデザインを決めよう

Chapter2:「投稿」や「固定ページ」で記事を書いてみよう

  1.   Gutenbergエディターを使ってみよう
  2. 「投稿」と「固定ページ」の相違点
  3. 「投稿」で記事を書いてみよう
  4.   記事一覧を管理しよう
  5. 「投稿」を使いこなさおう
  6. 「固定ページ」を使いこなそう
  7.   公開方法をコントロールする

Chapter3:Gutenbergエディターを使いこなそう

  1. ブロックを使いこなそう
  2. ブロックでページにメリハリをつける
  3. ブロックを再利用する
  4. 「コードエディター」でコードを確認する

Chapter4:Webページのコンテンツを充実させよう

  1. 画像を挿入する
  2. 動画やファイルを挿入する
  3. 「ウィジェット」でサイト内を自由に回れるようにする
  4. 「プラグイン」で機能を拡張する
  5. 「ホームページ設定」で固定ページを表示させる
  6. 「メニュー」を設定する

Chapter5:サイトのデザインをカスタマイズしよう

  1. カスタマイズの方法を知ろう
  2. [カスタマイズ]画面でカスタマイズする
  3. HTMLとCSSの基本を知ろう
  4. [CSS編集]画面でCSSを編集する

Chapter6:「テンプレート」の働きを理解しよう

  1. 「テンプレート」の役目を理解しよう
  2. PHPの基本的な読み方を理解しよう
  3. 代表的なテンプレートファイル
  4. テンプレートファイルを編集する

Chapter7:サイトの機能を強化して本格的な運用に備えよう

  1. SEOを強化する
  2. SNSとの連携を強化する


『WordPress はじめてのデザイン&カスタマイズ入門』
ブログ・サイトの改善方法がわかる

WordPressはじめてのデザイン&カスタマイズ

著 者:茂木葉子、岩本修
監修者:星野邦敏、吉田裕介
出版社:技術評論社
ISBN978-4-294-10362-0
292ページ
2,580 円
2019年1月25日発売