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

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

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

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

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

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

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

wordpress 5.7.2
THE THOR 2.3.2

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

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

目次

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

挿入した画像の加工方法

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

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

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

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

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

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

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

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

エンターキー = 改段落(新しいブロックが追加される)

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

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

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

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

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

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

もう1つの方法

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

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

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

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

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

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

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

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

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

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

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

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

鉛筆

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

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

矢印

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

「 i 」

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

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

横線3本

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

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

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

①ブロックの種類を変更

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

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

⑨詳細設定

画面右側の項目の説明

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

「投稿」タブ

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

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

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

「リビジョン」

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

「パーマリンク」

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

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

「カテゴリー」「タグ」

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

「アイキャッチ画像」

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

「抜粋」

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

「ディスカッション」

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

「カラム設定」

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

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

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

「ブロック」タブ

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

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

「タイポグラフィ」

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

「色設定」

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

「テキスト設定」

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

「テキストの色」

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

「高度な設定」

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

上級者向け設定

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

管理

3項目すべて

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連記事

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

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

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

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

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

アフェリエイトの登録は無料です!

Amazonなどの物販に興味がある方は、アソシエイトの保険として「もしもアフィリエイト」からの申請もお勧めします。

A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。 ここもおすすめ♪アフィリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/

在宅でちょこっと収入~♪

クラウドソーシング「ランサーズ」会員募集 (無料)

私は今の所、アンケートだけしています( ̄▽ ̄;)
アンケートに答えて5円とか11円とかから、100文字位の感想を書いて数百円とか。
アフィリエイトより小銭がたまりそうです(笑)

クラウドソーシング「ランサーズ」
最新情報をチェックしよう!
>

そら

プログラマーとして働いていたが結婚後を機に田舎に戻り、独学でHTML・Perlを勉強し自宅でWEBの仕事をはじめるも、アレルギー児の子育てで断念。 子供の手が離れたのを機にWorldpressの勉強をしながらブログをはじめました。

 そらのまなびぶろぐ について 


そらのまなびぶろぐでは、wordpressの有料テーマ【THE THOR(ザ・トール)】を使用して収益化ブログの作り方を初心者向けに紹介しています。 エディタの使い方、アドセンス申請に必要なページの書き方&作り方、ブログの装飾の方法までを紹介しています。

サイトに広告を掲載してお小遣いが稼げる!【A8.net】
無料登録はこちら
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
無料登録はこちら