ワードプレスの新エディタGutenbergで出来ること

皆さまごきげんよう。

ワードプレスの新エディタ・Gutenberg は使ってますか?これでどんなことが出来るのか?本日はこのページを使って、色々検証してみたいと思います(^^)

まず、ブロックを追加の + ボタンを押すと出てくるのが下の7つの項目です。

目次

インライン要素

インライン要素を使うと、画像が文章の一部として表示されます。

一般ブロック

一般ブロック 10種類

こちらが一般ブロック10種類です。今まで<h2>とかタグで囲ってやっていたことを、やらずに出来るようになりました。

もはや、htmlやcssがわからなくてもwebサイトが作れる時代になったということですね((((( ;゚Д゚)))

ではいくつか試してみましょう。

引用

引用とは、広義には、自己のオリジナル作品のなかで他人の著作を副次的に紹介する行為、先人の芸術作品やその要素を副次的に自己の作品に取り入れること。報道や批評、研究などの目的で、自らの著作物に他の著作物の一部を採録したり、ポストモダン建築で過去の様式を取り込んだりすることを指す。

ウィキペディア

引用を使うと、引用元を入力するフォーマットも一緒に現れるので便利です。

ギャラリー

大きさもバラバラな画像をメディアライブラリの中から適当に選んでみましたが、綺麗にグリッドレイアウトされています!

ファイル

ファイルのアップロードも簡単に出来ます。ダウンロードボタンも自動で付いて来ます。試しに、以前記事に書いたhtmlファイルをアップしてみます。

同様に、画像音声動画など、デバイスから簡単にアップロードすることが出来ます。ファイルをアップするのにFTP経由は手間なので、この機能は便利かも(^^)

フォーマット

次、フォーマット行ってみましょ〜

整形済み

段落や改行など、ブロックを使わずにそのまま書いた通りの状態で表示したい時に使う感じです。改行しなければ横スクロールが出ますよ。

ソースコード

ソースコードを試してみます。通常は<pre><code>で囲まれる部分です。シンプルですね。

function countdowntimer(){
var countdown = setTimeout(function(){
var today = new Date();//今の日時
var targetDay = new Date('2020/7/24 20:00:00');//開催日の日時
var daysBetween = Math.ceil((targetDay - today) / (246060*1000));//
var remainDay = (targetDay - today);//残り日時

プルクオート

プルクオート:本文からの抜粋見出しのこと。引用ではありません。本文の中の重要な部分などを抜粋して見出しっぽく表示させるやつですね。

Suspendisse potenti. 
Pellentesque id arcu scelerisque, fringilla felis nec,
auctor purus. Suspendisse eu risus felis.
Phasellus sit amet purus in lectus venenatis aliquam.
Mauris pharetra dapibus risus.
Suspendisse maximus maximus lorem, ut dictum erat elementum et.

テーブル

ABC
テーブルを試してみよう
りんごみかんバナナ

他、クラシックは以前のクラシックエディタ風、カスタムhtmlはhtmlで編集したい時に個別に使えます。

レイアウト要素

読んで字の如しなのですが、よく使うものでは、スペーサー はスペースを空けたい時に。幅も調節出来ます。続きを読む はmoreタグです。

この中で面白かったもの、メディアと文章カラムをご紹介します。

メディアと文章

メディアと文章では、画像とテキストを2カラムで配置出来ます。画像とテキストの位置は左右反転も出来ますよ。

コラム

そして、各ブロックを編集する時に右側の部分も見て下さい。この部分は以前とそれほど変わりませんが、見出しなら見出しの詳細設定など、ブロックをそれぞれ個別に編集出来るようになっています。右は段落の設定画面ですが、例えばテキストサイズ、背景色や文字色の変更、cssの追加もここで編集出来てしまいます!

カラム

2列のカラムが自動的に出来ました

改行するとカラム内にブロックが追加されていきます。

右の様に画像も挿入出来ます。雑誌のようなレイアウトが簡単に出来ますね。使いこなしたら面白いページを作れるようになるかも!

このカラムはなかなか優秀な機能ではないでしょうか?

カラムの中に更にカラムを追加してみた(笑)入れ子構造も難なくクリア、すごいよGutenberg!

このメディアと文章、そしてカラムは、ワンカラムデザインのテーマと相性良いですね!まさにwordperessの新テーマTwenty Nineteenにピッタリではないでしょうか。

ウィジェット

なんと、サイドバーやフッターに設置していたウィジェットも本文に入れられる様です。左にカテゴリー、右に最新の記事を入れてみましたよ。

埋め込み

埋め込み

数えたら、34種類もありました!てか、こんなにあるのか?SNS ⁂ヽ●┻┓〃ズコッ 知らないサービスだらけなんですが(笑)SNSで拡散狙うなら、アカウント作って埋め込みしよう。

jetpack

jetpack

こちらは、jetpackプラグインを入れている方のみに表示されているかと思います。

MapMapboxなるサービスに登録しなければ使えませんが、このサイト見に行ってみると、何かすごくカッコいいですよ、これ(゚o゚;;

subscription formはブログ購読フォームの設置(です多分 笑)登録してくれた方に記事が更新されたらメールが届く、メルマガみたいなものですかね。

tiled galleryはこんな感じ。Gutenbergのギャラリーよりも余白が少ないですね。

まとめ

いかがでしたでしょうか?私もこの記事を書きながら一つづつ試してきて、今やGutenbergにすっかり慣れてしまいましたよ♪

なお、ページ内ジャンプはhtmlとして編集しないと出来ないみたいです。

個人的には、カラムがヒットでした!昔から、webでもDTP的なデザインに惹かれるところがあるもので(^^)でも、この機能を活かすにはワンカラムデザインの方が相性良いでしょうね。ペラ1のランディングページなんかにも良さそうです。

クラシックエディタをお使いの皆さんも、ぜひ一度 Gutenberg 使ってみて下さいね!面白い発見があるかもしれませんよ。
ではでは。

コメントを残す