サイト構築関連

WordPress新エディタ「Gutenberg」の使い方

Sponsored Link

Sponsored Link

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。

新エディタはブロックを積み上げていくような感じになるので。
旧エディタと比べると見かけがかなり違っています。
なので旧エディタに慣れている方には使い勝手が悪いと感じられると思います。
私もしばらくは旧エディタが使える「Classic Editor」のプラグインを使っていましたが・・・・

だからといって今までのエディタを使っていても結局は「Gutenberg」が旧エディタに取って代わりますから。
もし「Gutenberg」を使わないとするとWordPressを使わないという選択肢しかなくなります。

どうせ使わなくてはならないのなら一刻も早く「Gutenberg」を使いこなせるようになりたい。

ということで私も「Gutenberg」を触り始めましたが。
かなり便利だということがわかりました。
今までにはない便利な機能もたくさん追加されていて非常に魅力的です。

インライン系アプリでは使えなくなったものも

ただ、この「Gutenberg」はブロック特化型のエディタです。
そのためインライン装飾で使えるプラグインが使えなくなっています。
これが使っていて一番問題だと感じられる点です。

例えば「Add Quick tag 」は全く使えなくなってしまいました。
これは一度登録しておいてショートコードやタグ、文章を簡単に文章中に挿入する事ができるというプラグインですが。

見栄えに関するものとしては他にShortcodes by Angie Makes も新エディタでは反映されなくなっています。


これは予め様々なデザインの装飾がショートコードで紐付けられていて。
更にそれが対応する表示項目をクリックするだけで記述されるというすぐれものなんですが。
「Gutenberg」ではそれを呼び出すボタンが「Classic Paragraph」にも見当たりません。

でも以前旧エディタで使用したコードは生きていました。
「Add Quick tag 」で行った装飾も同様にちゃんと表示されました。

私としてはかなり便利に使っていたので。
ぜひとも使えるようになってほしいものです。

旧エディタと「Gutenberg」の切り替え

もしこのプラグインを使おうと思えばプラグイン「Classic Editor」をインストールした上で。 「Gutenberg」を旧エディタに変更します。

「Gutenberg」一番右上をクリックして。
プルダウンメニューから「クラシックエディタに切り替え」を選ぶと旧エディタに切り替わります。

旧エディタから 「Gutenberg」 に戻す場合には旧エディタの右一番下のエディターという項目があり。
そこにある「ブロックエディターに切り替える」をクリックします。

これで切り替えができますので、旧エディタでしか使えないのプラグインをどうしても使いたいという場合はこのようにします。

ただ使ってみた感じでは 旧エディタと新エディタを行き来するぐらいであれば「Gutenberg」を使いこなすべきだと思います。
というのも先程のプラグインを補完するような機能が新エディタにもブロックとしてついているからです。

「Gutenberg」 の基本的な使い方

基本的な使い方は

  • タイトルをつける
  • ブロックを追加し、文章などの入力
  • ブロックごとに装飾をかける

ということの繰り返しだけなんですが。
ブロックがたくさんありすぎで・・・・^^;
とりあえずすぐに必要なものを見ていきたいと思います。

その他のブロックの解説は以下の記事で。


ブロックは左上の丸十字をクリックし。出てきたメニューから選んでいきます。

見出しの使い方

最初に新規追加でエディターを開くと。
タイトルを書く欄にスポットが当たります。
それでタイトルを付けて下書き保存をするとその後その部分にフォーカスをするとパーマリンクが表示され、変更することができるようになります。

パーマリンクが出てきます。
旧エディタよりも少しだけ便利になりました。

見出しはブロック一覧からをクリックし。
以下から設定を行います。

ブロックの追加

見出しを書き終わったら文章を書いたり画像を貼り付けたりしていきます。

文章を書くためのブロック


文章を書く場合はを選択しますが。
このブロックはこんな感じで

「TinyMECacvernced」プラグインを入れて装飾項目を加えても装飾のバリエーションが少ないため。
取り消し線などが必要な場合にはブロックを使います。
Classic Paragraphやクラシックだと ブロックエディター用の「TinyMECacvernced」 で装飾項目を加えると
ほぼ旧エディタと同じ仕様になります。

また全体の文字の大きさが調整できますし。最初の文字をこのように大きくすることもできます。
段落ブロックにした上で右端のテキスト設定のドロップキャップのボタンを有効にすることで切り替えができます。

画像や動画の挿入

画像の挿入

画像に関しては段楽ブロックにてインライン画像が使えます。
文章と文章の間に画像を入れるもので先程の

取り消し線などが必要な場合には

ブロックを使います。

のように文章内に画像をはめ込むことができます。
これは旧エディタになかったものなので大変に便利です。
ただし段楽ブロックでのみ使用できます。

画像をブロックで埋め込むにはブロックを使います。
画像をアップロードするとその画像の下に「キャプションを入力」とあってそこにコメントを入れられるようになっています。
これも旧エディタにはなかったものです。

また画像を並べることもできます。
これはブロックを使えばできます。

GIFなんかでも様々できます。
これも新しい機能です。
キャプションを入れられますので便利です。

なおこのギャラリーに入っている画像はクリックすると拡大されます。
なので小さめで説明付きの画像などを並べておくには便利です。

動画の挿入

動画を挿入する場合にはブロックを使います。
これは動画をそのままアップすることができますので大変便利なんですが。
動画はファイルが大きすぎる場合はアプロードができません。

なのでリサイズをしてからアップロードをします。
動画のリサイズは本サイトで詳しく説明しているAviUtlなどでもできるんですが。

まとめ記事です。
ここから必要な場所に飛んでください。


わざわざソフトを立ちあげるのも面倒なので。
オンライン上でリサイズできるものを使うと画像と同じ感覚で貼り付けができてとても便利です。
動画をオンライン上でリサイズするものとしておすすめなのは例えばこれ。
VideoSmaller

(なお上の画像はクリックすると拡大されますので拡大した上でご覧ください。)

こうして圧縮した上で動画を貼り付けていきます。

今までですとサーバーに動画を保存し。
それをvideoタグなどを使って貼り付けていました。
細かい設定をするんだったらそれもいいと思いますが。
とりあえず出来合いでいいと思えばパソコンに保存した動画をそのままアップすることができますので作業が激減!大変便利です。

背景をつける

ただ背景の色を変える

背景についてはただ背景に色を付けたい場合には段落ブロックを呼び出し。
右端の「色設定」から背景色を選ぶだけです。
背景だけでなく文字の色も変えられます。

試しにここの段落ブロックを文字色は赤色、背景色はライトグレイにしてみます。
するとこのようになります。

動画や画像を背景にする

カバーブロックを使えば背景に重ねて記事を書いたりボタンを付けたりできます。
動画のカバー設定で背景の透過率も調整することができます。
普通に文章を書くこともできますし、リンクを貼ることもできます。
見出しもつけることができます。
またオーバーレイ(薄く色で覆うこと)もできます。

以下に一例を示します。

動画を背景にすると楽しいね

まだ画像を背景にすることもできまして結構使いみちがあると思われます。
画像も上記の動画のやり方と基本的には同じです。

右側にあるカバー設定で画像を動かすこともできますし。
オーバーレイで色を重ねることもできます。
もちろん透過率を調整もでき。
様々テキストを加えたりリンクを貼ることもできますが動画でできたボタンを追加することはできません。

緑色のオーバーレイをかけ文字色をオレンジにてみました。

まとめ

ここまでは実際作業をする上での最低限の使い方について見てきましたが。
実際には様々なブロックがありますので。
使えるようになっておくと便利です。
それは次に詳しく見ていくつもりです。

今回はここまで

Sponsored Link

Sponsored Link

関連記事

  1. エックスサーバーでSSL化設定をするやり方を詳細に解説してみた
  2. WordPressのフォルダ構成とバックアップの仕方
  3. 【Basics of site construction】カテゴ…
  4. 【Basics of site construction】ワード…
  5. WordPressエディタ「Gutenberg」で用意されている…
  6. 【Basics of site construction】ドメイ…
  7. WordPressエディタ「Gutenberg」の使い方 総まと…
  8. 簡単なワードプレスのバックアップ方法 エックサーバーでの詳細説明…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. HTMLで動画や画像を埋め込みする方法を詳説
  2. WordPressエディタ「Gutenberg」の使い方 総まとめ
  3. 【Basics of site construction】多すぎる選択肢 ホームページ作成方法  HTMLとCMSの長所と短所を知るべし
  4. WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 
  5. Windows10 でフォルダの拡張子を表示するには?
  6. 【Basics of site construction】ドメインの選び方と名前の選定 サブディレクトリとサブドメインの役割について
  7. ソースコードを記事中に表示させるために必要なことは?簡単にソースコード変換ができるサイトやプラグインEnlighter – Customizable Syntax Highlighterも紹介
  8. WordPress新エディタ「Gutenberg」の使い方

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。<TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

Windows10でブルーライトカットの設定 コントロールパネルの使い方
MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
HTMLで動画や画像を埋め込みする方法を詳説
AviUtl合成モードの種類とその効果 使い方
AviUtlでGIF形式で動画を保存することができる出力プラグイン Direct GIF Export 2
AviUtil カメラ制御の基本の基本を詳しく解説
AviUtlのすべてのエフェクトについての解説③クリッピング・斜めクリッピング・マスク
HTML CSS テーブル(表)の作り方とその装飾の仕方 基本
AviUtlのすべてのエフェクトについての解説⑫アニメーション効果(2)

ソフト・アプリの使い方

PAGE TOP