記事の詳細

前の記事はこちら

Wordpressの見た目が変わった?投稿画面(エディタ)はどうやって使えばいいの?Wordpress5.0で追加された「Gutenberg」とは。
新しいWEBサイトを建ててWordPressを入れた時、投稿画面が見慣れない様子に変わっていました。「ついに来ちゃった」感ハンパない、WordPress5.0にて追加されたエディタ...
WordPress5.0で追加された「Gutenberg」の投稿画面(エディタ)使い方【レイアウト編】
前の記事はこちらアップデートが入りまして、前回より若干の項目変更が行われているようです。が、基本的な使い方は前回とほぼ一緒。ブロックを重ねていく方法がわかれ...

1回目で「一般ブロック」の使い方、2回目で「レイアウト要素」使い方をご紹介しました。
今回は「フォーマット」の使い方をご紹介します。

Gutenbergのフォーマット

フォーマットの意味

フォーマットは書式や仕様といった意味を持ちますが、Gutenbergの投稿記事における「フォーマット」は「書き方の方法」といったほうがしっくりくると思います。表示のされ方も様々ですので、うまく使っていきましょう。

プルクオート

テキストの引用に特別な視覚的強調を加えます。
テーマによって表示されるプルクオートに差異があります。線の装飾はでないかも。

Gutenbergのフォーマット プルクオート

 

ソースコード

余白やタグを考慮したコードスニペットを表示します。

Gutenbergのフォーマット ソースコード

Gutenbergのフォーマット ソースコード

文字に色を付けたい、行数などを出したい、といった、プラグインでできることが必要ないのであれば、こちらのソースコードだけでもいいかもしれませんね。

 

カスタムHTML

ウィジェットでもよく使うフォーマットです。htmlでページ編集ができます。クラシックエディタの「テキスト」ビューがこれにあたります。
編集しながらプレビューが可能です。

Gutenbergのフォーマット カスタムHTML

整形済み

スペースやタブを含むテキストを追加し、スタイリングして表示します。
段落などを利用すると消えてしまう半角アキなども再現されます。

Gutenbergのフォーマット 整形

Gutenbergのフォーマット 整形済

詩を挿入します。特別な余白形式を使ったり、歌詞を引用したりできます。印象としては「整形済」と同じような感じです。「整形済」とは異なるフォーマット、けれど違う色やデザインを当てはめたいときは、こちらを使うのもありでしょう。

 

クラシック

「クラシックエディタ」がそのブロックで使えます。もし「使い勝手が悪いからクラシックエディタに戻す」という理由でしたら、このフォーマットを使うことでプラグインを利用することなく回避できます。

クラシックエディタがさまざまな他のシステムに影響を及ぼしている場合は、まだプラグインを使っておきましょう。

Gutenbergのフォーマット クラシック

 

テーブル

表の挿入。チャートとデータの共有に最適です。
残念ながらCSV等からの挿入はできません。その場合はテーブルプレスなどのプラグインを利用したほうが早そうです。

Gutenbergのフォーマット テーブル

覚えるブロックの種類が多いGutenbergですが、マスターするととても早く作業が進みます。食わず嫌いをしないで、新しいことはどんどん吸収していきましょう!

いや、本当に早いですよ。
びっくりするくらい早くなりましたよ……。

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
久保田 里美

久保田 里美

価値あるコンテンツ制作部インクループ株式会社
デザイナー。コンセプト設立からデザインを理論立てて起こすことをポリシーに、WEB媒体から紙媒体まで幅広く手掛けていきたいデザイナー。日々勉強日々精進。

ほかの投稿も読んでみませんか?

コメントは利用できません。

AD

光回線受付センター
ページ上部へ戻る