サイト作成ソフト

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

Sponsored Link

Sponsored Link

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

旧エディタにどっぷりと使っている方々には新エディタはエディタに対するアプローチが違うため使いづらさが先に立つのかもしれませんが。
慣れてしまえば旧エディタよりもずっと使いやすくて便利!

ということで前記事で触れなかった「Gutenberg」の使い方と、
今回は私が使ってみて感じた点について書いてみます。

エディタ内には2箇所(縦型の三点リーダ)があり、それをクリックして出てきたメニューで全体またはブロックの仕様を変更していきます。
全体の変更は記事の一番右上端にあります。

全体の変更を行う⋮(3点リーダ)

クリックすると以下のようなメニューが現れます。
ただし以下の場合 Classic EditorJetpack by WordPress.com のプラグインをインストールしてある状態になります。

表示メニュー

トップツールバー

トップツールバーをオフにした状態だと記事内のブロックに一々ツールバーが表示されます。
以下のような感じです。

しかしチェックを入れるとトップツールバーの表示が上にあるブロック・文書ツールの横に表示されます。

一々ブロックのところに表示されると煩わしい、と感じられる場合はチェックを入れておくことをおすすめします。

スポットライトモード

これを指定しておくと、フォーカスしているブロック以外が半分消えたようになります。
例えば先程のトップツールバーと言う見出しブロックに焦点を当てた場合、
それ以外のコンテンツは灰色になって薄くなっています。

フルスクリーンモード

これは記事を書くのとは関係ないWordPressの左側のメニューなどを見えないようにするというもの。
気になればチェック、というところです。

エディタメニュー

これは旧エディタにおける「ビジュアル」と「テキスト」の切り替えです。
新エディタにはカスタムHTMLというブロックがあり。
また追加のCSSもビジュアルエディタのままで挿入することができます。
なので「ビジュアル」 のままでもHTMLを扱えますが、 「Gutenberg」 の欠点というか。
次々にブロックが生成されて。
ビジュアルモードだとよくわかりませんが、コードエディタにすると使わなかったブロックが溜まっていますので。
削除する必要があります。
わたしは記事を書いたら最後にコードエディタにして、不要なブロックを削除するようにしています。

プラグイン

旧エディタで扱える「クラッシック」と「Classic Paragraph」というブロックが装備されており。
ほぼ旧エディタと同じような間隔で作業ができますが、一番の問題は旧エディタで使うことができたプラグインで使えなくなっている物があるということです。
どうしても使いたい場合には完全に旧エディタに戻す必要があります。

旧エディタを使うためには以下のプラグインをインストールし、有効化する必要があります。

そうすると 「Gutenberg」 のプラグインのところに

のように出てきますので。
「クラッシックエディターに切り替え」をクリックすると旧エディタに切り替わります。

旧エディタから 「Gutenberg」 に戻すには旧エディタの右側に以下のような表示があります。

ブロックディターに切り替えをクリックします。

トップツールバーにある⋮(3点リーダ)メニュー

それぞれにブロックにあるトップツールバーの右端にある⋮をクリックすると以下のようなメニューが出てきます。

ブロック設定の非表示

ブロック設定を非表示にすると様々なブロックの動きが止まります。
なので私個人の感想では、作業がしやすくなります。

新エディタが使いづらいという方の中にはブロックが勝手に出てきたりして面倒くさいという方がいると思いますが。
ブロック設定を非表示にするだけでかなり使いやすくなります。

ただし非表示にすると右側にある様々な設定項目も消えてしまいますので。
色を付けたりテキスト設定をしたい場合はコンテンツを入れ終わったら非表示を解除します。

前に挿入・後ろに挿入

ここをクリックするかショートカットキーで指定するとブロックを前や後ろに指定することができます。
ただそれだけです^^;

HTMLとして編集

これはとても便利です。
HTMLとして編集をクリックするとHTMLで書き込めるようになり、
かつブラウザ表示では正常に記事のコンテンツになります。

<h1>インコの飼い方</h1>
   <p>インコは扱いやすくてかわいいよ</p>
  	<h2>インコの種類</h2>
  	<p>インコには沢山の種類がありますが、一番お手軽なのは<span>セキセイインコ        </span>です。
  	</p>
  	<p>
  		<a href="https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%B3">wikipediaに移動します。</a>
  	</p>
  </body > 

これを「HTMLとして編集」として書き込んだだけで以下のようになります。


インコの飼い方

インコは扱いやすくてかわいいよ

インコの種類

インコには沢山の種類がありますが、一番お手軽なのはセキセイインコ です。

wikipediaに移動します。


カスタムHTMLブロックと同じ働きをします。

再利用ブロックに追加

コンテンツを記したブロックを「再利用ブロックに追加」をクリックすることで
そのブロックを保存することができます。
それを呼び出すにはトップツールバーではなくて記事右側の⋮をクリックし。
「すべての再利用ブロックを管理」をクリック。
まあ決まった方ができたら使えば良いと思います。

実際の作業の流れ

作業自体はブロックを積み重ねていくだけです。
最低限の流れは以下の記事に書いておきました。

またどんなブロックが会ってどのように使うかということは以下の記事にまとめておきました。

最後に

基本的なものをまとめただけですが。
ここまでしっかりと理解していただければ 新エディタ「Gutenberg」 は簡単に使えるようになるはずです。

おそらくはこのエディタはさらに進化していくと思われますので。
非常に楽しみです。

今から使いこなして行く意味はあると思います。
私も最初は面倒くさいなあと思いながら触っていましたが。

ここまで便利になってしまうともはや旧エディタに戻る気持ちにはなりません。

こんなこともあんなこともできます

触っていて楽しいですよ^^;

ということで。
高度な設定についてはまた別記事にします。

Sponsored Link

Sponsored Link

関連記事

  1. 簡単なワードプレスのバックアップ方法 エックサーバーでの詳細説明…
  2. 【Basics of site construction】多すぎ…
  3. WordPressエディタ「Gutenberg」で用意されている…
  4. WordPressのフォルダ構成とバックアップの仕方
  5. WordPress新エディタ「Gutenberg」の使い方
  6. 【Basics of site construction】ワード…

コメント

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

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

サイト構築関連

  1. エックスサーバーでSSL化設定をするやり方を詳細に解説してみた
  2. 【Basics of site construction】カテゴリーを設定はSEO対策に最重要 読者にもわかりやすい整理整頓方法とは
  3. 【Basics of site construction】ワードプレスで日付を消す方法
  4. WordPress新エディタ「Gutenberg」の使い方
  5. 【Basics of site construction】多すぎる選択肢 ホームページ作成方法  HTMLとCMSの長所と短所を知るべし
  6. Windows10 でフォルダの拡張子を表示するには?
  7. WordPressのフォルダ構成とバックアップの仕方
  8. HTMLで動画や画像を埋め込みする方法を詳説

プログラミング関連

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)の作り方表を作るには。テーブルタグを使います。&lt;TABLE&g…

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

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

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

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

AviUtl

AviUtl

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

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

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

人気の投稿とページ

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

ソフト・アプリの使い方

PAGE TOP