そらのまなびぶろぐ

＼　 THE THOR で ブログを はじめる 初心者さん 向けに 簡単な言葉と 画像たっぷりで 手順を紹介 　／

WordPress【THE THOR】ブロックエディタどうやって使うの？簡単に説明♪

  • THE THORでブロックエディタを使って記事はどうやって書くの？
  • ブロックエディタの使い方が分からない
  • THE THORでブロックエディタは使わない方がいいの？

ブロックエディタは使い方が分からないと記事が書けません(￣▽￣;)。

「見出しってどうやったらなるの？文字の色ってどうやって変更するの？マーカーってどこにあるの？」という状況に、初心者そらはなりました(;^_^A

で、すぐに「ブロックエディタ」の使用はあきらめて、直感的に使える「クラシックエディタ」を使用することにしました。

が、「クラシックエディタ」プラグインの使用が出来なくなるという情報をみて(誤情報だったらごめんなさい）「ブロックエディタ」を使用するようになりました。

私が使用しているバージョン

wordpress　5.8.1
THE THOR　2.3.4

大まかな機能の紹介の次に、THE THOR（ザ・トール）での使用方法を紹介していきます。

テーマによって、表示されるブロックがちがうので、この記事はTHE　THORを使用している方のブロックエディタについてになります。

目次

ブロックエディタとクラシックエディタの違い

  • ブロックエディターは、見出し、文章、画像、動画などを個別の「ブロック」という「かたまり」として扱います。
  • クラシックエディタは、ワードなどの使い方に似ている感じなので、ワープロソフトを使用したことのある方なら感覚で作成出来る感じです。

ブロックエディタは「かたまり」ごとに作成していく感じで、クラシックエディタはワープロソフトのように作成していく感じですね。

THE THOR♪ブロックエディタとクラシックエディタのメリット＆デメリット

それぞれにメリットとデメリットがあります。
それぞれのエディタの特徴など詳しくは下の記事を参考にしてください。

>>>【ブログの始め方作り方】THE THOR(ザ・トール)の記事の書き方

WordPress【THE THOR】ブロックエディタのブロックって何？

ブロックエディタは、見出しや文、画像をそれぞれブロックで管理します。

ブロック単位で管理できるので、このブロック消したいな～という時はブロック単位で消せます。

このブロックにかいた文章は、やっぱりもう少し下に表示させたいな～という時は赤丸の「ｖ」を使用してブロックごと移動できます。

WordPressブロックエディタ/ブロックの種類

ブロックを作成する時にブロックの種類を選択してから作成します。

ブロックを作成してからも、ブロックの種類を変更することもできます。

ブロックの種類を一部紹介します。

上記のブロックの他に、メディア/デザイン/埋め込みのブロック群があります。

文章を書く時は、段落ブロックを使用します。

WordPressブロックエディタ/画像を使用/加工する方法

画像処理はクラシックエディタよりブロックエディタが優秀です(;^_^A

私はエディター拡張プラグインを使用しているため、画像では「クラシック版の段落」というブロックが表示されています。

画像ブロック追加をクリックしたしてください。

「アップロード」・「メディアライブラリ」・「URLから挿入」から使いたい画像を選択してクリックしてください。

挿入した画像の加工方法

画面右側で画像の加工ができます。

スタイルの「角丸」を選択すると、HTMLが分からなくても画像の角を丸くすることが出来ちゃいます(^^♪

正方形の画像で角を丸くすると、円形画像ができます♪

使用するときは、必ず「画像の寸法」の下にある「％」を必ずどれかをクリックしてください。（AMPを使用した時Google　search　consoleでエラーになるので(￣▽￣;)）

WordPressブロックエディタ/改行

改行するときは「Swift」キー押しながら「Enter」キーを押してください。

私は1行書いてエンターキーを押すとブロック追加になってしまうのは、慣れるまで地味に使いづらさを感じました(-_-;)

シフトキー　+　エンターキー　＝　改行

エンターキー　＝　改段落（新しいブロックが追加される）

ビジュアルエディタとコードエディタ変換とブロックの種類の表示設定は？

表示されているエディタの変換の紹介になります画面右上の端にある点が３個縦に並んでいるのをクリックして下さい。

ビジュアルエディタとコードエディタ変換は「エディター」項目

エディター項目には「ビジュアルエディター」と「コードエディター」の2つがあります。

コードを自分で書いていきたいんだ～という人以外、ここを触ることはないと思いますが情報としてここに書いておきます(￣▽￣;)

ここで、自分の使いたいエディターをクリックすると変更されます。

もう1つの方法

「Ctrl」キー　+　「Shift」キー　+　「Alt」キー　+　「M」　＝　エディター変更

どちらで変更しても大丈夫です。

ブロックの種類の表示設定は「ツール」項目

この記事中で紹介している「ブロック」の種類が表示されていない場合は、この項目の「ブロックマネージャー」をクリックして表示させる様に選択してください。

ビジュアルエディタで「HTMLとして編集」

ブロックディタはデフォルトの状態はビジュアルエディタです。
特定のブロックだけコードをいじりたい場合は「HTMLとして編集」を選択します。

テキストエディタでHTMLとして編集したいブロックをクリックして「メニューバー」を表示させた後、右端の三個の点をクリックします。

表示されている項目の中の「HTMLとして編集」をクリックします。

WordPressブロックエディタ/画面左上のツールバー

画面左上の「W」のマークの横に6個のアイコンが並んでいます。

この「+」の部分をクリックすると、ブロックを追加できます。

ブロックの選択・編集モードが選べます。

鉛筆

ブロックの選択・編集モードが選べます。
選択するには Esc を、編集に戻るには Enter を押します。

私は「鉛筆」を選択して使用しています。
三角の「選択」を選択すると、ブロックをクリックしたときに「見出し」とか「段落」とか表示されます。

矢印

「戻す」「進む」これは感覚的にわかると思います。

「　i　」

タイトル文と見出し文を抜きだしてコンテンツの構造を表示してくれます。

（文字数、見出しの数、段落数、ブロック数もここで分かります）

横線3本

「　i　」と違って文ではなく、「ブロックの種類」でコンテンツ構造を表示してくれています。

ブロックに付いているツールバー

「段落」ブロックのツールバー

①ブロックの種類を変更

  • ②　→　ブロックを好きな場所に移動
  • ③　→　ブロックを上下に移動
  • ④　→　文章揃え
  • ⑤　→　太字
  • ⑥　→　イタリック
  • ⑦リンク

⑧　よりリッチなテキスト制御

⑨詳細設定

画面右側の項目の説明

段落のブロックの時の項目を紹介します。

「投稿」タブ

「ステータスと公開状態」

ここで、コンテンツを公開するのか。

そして公開するなら、いつ公開するとするのかを設定できます。

「リビジョン」

書いている記事の保存されたデータです。

「パーマリンク」

「パーマリンク」今書いているページのアドレスの最後の部分といえばいいのでしょうか。

その変更をここで設定します。

「カテゴリー」「タグ」

書いているコンテンツのカテゴリーとタグを設定できます。

「アイキャッチ画像」

検索エンジンで検索結果に表示されたりします。

「抜粋」

カテゴリーの記事一覧などで表示される文の事です。

「ディスカッション」

コメントを受け付けるかなどの設定をここでします。

「カラム設定」

ブログの構造をどうするか設定する所です。

私のブログのトップページが１カラム。

通常の記事は２カラムになっています。

「ブロック」タブ

画面のブロックをクリックすると、「ブロック」タブが表示されます。

これは「ブロック」の種類によって表示される項目が違います。

「タイポグラフィ」

文字のサイズ変更の設定をします。

「色設定」

ブロックの文字色、背景色を設定します。

「テキスト設定」

ブロックの先頭の文字を大きくしたい時に「ドロップキャップ」をＯＮにします。

「テキストの色」

テキストの文字単位の文字色を変更できます。

「高度な設定」

アンカーの挿入がここで出来ます。

ページ内でのジャンプの着地点が「アンカー」です。

私は、これがここにあることに驚きました。

「THE THOR」のクラシックエディタだとプラグインを入れないと表示されないんです　Σ(･ω･ﾉ)ﾉ！

【THE THOR】の「スタイル」をエディタに表示

記事を書くための、「ブロックエディタ」の基本となる情報を紹介しました。

次はTHE THOR（ザ・トール）のマーカー機能やカスタムボタン機能が使える「スタイル」の紹介です。

「スタイル」を使用したい時は、ブロック作成時に「テキスト」の「クラシック」を選択します。

「ブロック」から「クラシック」へのブロック変換項目がない！

デフォルトのままだと、変換できるブロックのスタイルは８種類。

THE THOR（ザ・トール）のマーカー機能やカスタムボタンなどの機能が使える「クラシック」の項目が見当たりません。

ブロックのスタイル変換に「クラシック版の段落」を追加

エディタ拡張プラグイン「Advanced Editor Tools (previously TinyMCE Advanced)l」のインストールと有効までしてきてください。


下の記事で詳しく手順を紹介していますので、参考にしてください。

≫THE THOR(ザ・トール）ページ内部リンクが使えるエディタにカスタマイズ

☆私がチェックを入れている項目☆

  • ブロックエディター (TinyMCE)タブ
  • クラシック版の段落とクラシックブロックのツールバー
  • エディターメニューを有効化する (推奨)。

上級者向け設定

  • クラシック版の段落ブロックを追加
  • クラシック版の段落もしくはクラシックブロックをデフォルトのブロックにする (ハイブリッドモード)

管理

３項目すべて

「クラシック版の段落」がブロックスタイルの変換項目に追加されますので、選択して使用してください。

このブロックをクリックすると、クラシックエディタが表示されます。

THE THOR♪ブロックエディタ「クラシック版の段落」で出来る事

  • THE THOR（ザ・トール）のマーカー機能やカスタムボタン、吹き出しなどの機能が使える。
  • AddQuicktagプラグインが使用できる。（同じ記述を使用したい時に便利なプラグイン）
  • クラシックからブロックへのブロック変換

THE THOR♪ブロックエディタ「クラシック版の段落」で出来ない事

アイコンオプションの項目がどうしても表示されません。
「アイコン挿入」は表示されるので、アイコンのコードされ分かれば使用に困りませんが(;^ω^)

記事を書くエディタの画面はマーカー非表示になる

プレビューを見ると、ちゃんと表示されているのですが、記事を書いている時にはみえません。

「クラシック」→「ブロック」へのブロック変換方法

ブロックをクリックしてメニューを表示させて、左端のアイコンをクリックしたら表示されるプルダウンメニューの中に「クラシック版の段落」が表示されていますので、クリックしてください。

「ブロック」→「クラシック」へのブロック変換方法

赤色で囲ってある３個の点をクリックして、「ブロックへ変換」をクリックすると、「クラシック版の段落」から「ブロックに変換」されます。

（「クラシック版の段落」→「クラシック」→「ブロックに変換」の場合もあります）

カラムブロックで高さがずれるをCSSで解消

THE THORは、ブロックエディタにある「カラムブロック」を使用すると高さがずれます(￣▽￣;)

この画像のように上辺の高さがそろいません。
「外観」＞「カスタマイズ」＞「追加CSS」の順にクリックしていき、下の「追記するコード」の文を記入してください。

追加するコード

/* —カラムの高さ調整— */
.wp-block-column {
margin-top: 10px!important;
}

コードの意味を紹介

「10px」というのがブロックの上辺の空間の大きさを指定しています。
空間をもっと減らしたいと思えは、数字を小さく。
空間をもっと増やしたい場合は、数字を大きくしてください。

ブロックを装飾したい

THE THORにはブロックを装飾する機能は無いように思います。
枠線などを使用したい場合は私はCSSを使用しています。
ここではブロックを装飾しなくても、初めから完成されているブロックが使用できる「Arkhe Blocks」、「Useful Blocks」、「 Gutentor – Gutenberg Blocks – Page Builder for Gutenberg Editor 」の無料プラグイン３個を紹介します。

Arkhe Blocks

このプラグインは、テーマ「swell」製作者の了さんが作成しています。
無料版「 Arkhe Blocks 」と有料版「Arkhe Blocks Pro」があります。
プラグインの詳細で「Arkhe”テーマに最適化された、Gutenbergを拡張するプラグイン」と書かれていますが、無料版をTHE THORで使用してみましたが問題なく私は使用できました。
６個のブロックがありますが、使用しやすい「通知」ブロックを紹介♪

この画像は通知ブロックなのですが、クリックで簡単に装飾されたボックスを作成できます。
難点は細かく変更できない事ですね(;^_^A
色がカスタマイズ出来れば１００点！と言いたいのですが(￣▽￣;)

Useful Blocks

「 Useful Blocks 」プラグインは、ぽんひろさんと了さんが開発したプラグインになります。
上のプラグイン同様、無料版と有料版があります。
画像は無料版です(￣▽￣;)
5個のブロックがありますが、使用しやすい「通知」ブロックを紹介♪

Gutentor – Gutenberg Blocks – Page Builder for Gutenberg Editor


最後に油断私が使用しているブロックエディターの拡張プラグイン「Gutentor – Gutenberg Blocks – Page Builder for Gutenberg Editor」を紹介します。
上の２個のプラグインとの大きな違いは、細かく設定出来る事です。
そしてブロックの数がとても多いです。
多いので、上の画像でもすべてのブロックではないです(￣▽￣;)
どのようなプラグインかは下の記事を見ていただけたらなと思います♪

>>>THE THOR(ザ・トール)ブロックエディタ拡張プラグインを紹介

WordPress【THE THOR】ブロックエディタどうやって使うの？まとめ

基本的な機能の紹介をしました。

このブロックエディタは、この記事で紹介している機能を覚えないと記事が書けないので初心者には使いこなすのが大変だと思います。

しかし、「クラシックエディタ」にはない機能があるので、私は「ブロックエディタ」で「クラシック」を使用して書くのがオススメですね。

THE THOR(ザ・トール)に使用できるブロックエディタ拡張プラグインに興味がある方は下の記事をどうぞ♪

関連記事
THE THOR(ザ・トール)ブロックエディタ拡張プラグインを紹介

ブロックエディタの「クラシック」でTHE　THORの機能使うの面倒 ブロックエディタで区切り線を使いたい！ ブロックエディタで装飾ってどうやるの？ ブロックエディタで自分が使いたいブロックの種類は足りていますか？ […]

THE THORで使用できるブロックエディタ拡張プラグイン

ランキングサイトに登録しているのでクリックしていただけると嬉しいです♪

ランキングサイトに参加しているのでクリックしていただけると嬉しいです(^^♪

ランキングサイトに登録しているのでクリックしていただけると嬉しいです(^^♪

最新情報をチェックしよう！

THE THOR準備編の最新記事8件