STORK19ブロックエディタ吹き出しなど装飾機能10選一挙紹介

猫プリン侍
こんにちは!人情ブロガーの猫プリン侍だよ!

今回はSTORK19に搭載しているGutenbergブロックエディタを使って、吹き出しやBOXなどの装飾機能の作り方10選を一気に紹介します。

ちなみに前回の記事で紹介したSTORK19の使い方で紹介した、吹き出しやBOXなどをショートコードで挿入する方法は、クラシックエディタを使っての方法です。

猫プリン侍
なぜ今回はブロックエディタを使って装飾機能の作り方を紹介するのかと言うとそれは、2021年12月31日でプラグインのクラシックエディタのサポートが終了してしまうからなんだ!
猫プリン侍
そう言った事情から、今からでも僕も含めてクラシックエディタでブログを書く事に慣れてしまっている人達に今後は、ブロックエディタを使っての操作を、少しでも慣れて欲しい思いからなんだ。

よって僕と同じくSTORK19でクラシックエディタを使っている人は必見です!

猫プリン侍
STORK19を使ったブロックエディタの基本的な操作方法はこちらを参考にしてみてね!

ブロックエディタとクラシックエディタ比較|使いやすいのはどっち?

猫プリン侍
さらにSTORK19のカスタマイズやサポートに関する評判はこちら

STORK19評判|吹き出しやボックス、カスタマイズやサポートどうなの?

ブロックエディタについて

ワードプレスにブロックエディタが搭載されたのは2018年のワードプレス5.0verからです。

これによって従来のクラシックエディタのお馴染みの見慣れたヴァージョンから一気にこのように投稿画面が大きく変わりました。

猫プリン侍
よって慣れていないほぼ全員が一瞬、かなり戸惑うよね?事実僕もまだブロックエディタは使いこなせていないもん!

詳しくはまた別の記事で、ブロックエディタとクラシックエディタの違いや、双方のメリット&デメリットについて解説しますが、ブログを書きながら、編集画面のプレビュー画面に切替せずとも、実際に表示されるページと同じ見た目を再現する事が出来るので、慣れれば”作業の効率化を図る”事が出来ます。

STORK19のブロックエディタによる装飾の使い方

STORK19のブロックエディタによる装飾の使い方について、これは使う頻度が間違いなく多いだろう!と言う物を10選紹介します。

吹き出し

吹き出しの作り方の紹介です。

猫プリン侍
記事入力画面でのボタンをクリックするよ。
猫プリン侍
そうすると左側に”吹き出しブロック”が出るよ。

猫プリン侍
吹き出しブロックをクリックすれば、右の本文に吹き出しが挿入されたよ。

猫プリン侍
次に右側の設定➡ブロックをクリックすれば、このように「吹き出しデザイン」・「アイコン位置」・「アイコンの色」が選択出来るようになっているよ。

猫プリン侍
それぞれ3つの項目を選択した結果、吹き出し背景ブルーの、左側アイコンの赤丸にしたよ。

猫プリン侍
後は画像をクリックして、吹き出しに挿入したい画像を選択すれば、

猫プリン侍
こんな感じで簡単に僕の猫プリン侍の吹き出しが出来たよ。
アイコンの下に、名前を入れる事も出来るよ。

ボックス

ボックスにはタイトルボックスとノーマルボックスの2種類が有ります。

どちらもブロックの使い方は同じです。

タイトルボックス

タイトルボックスの作り方をご説明致します。

猫プリン侍
ブロックエディタの左側ののボタンをクリック➡ブロック➡ボックス(タイトル付き)を選択するよ。

猫プリン侍
タイトル付きのボックスが出てきたよ。

猫プリン侍
次に右側の設定➡ブロックをクリックするとボックスデザインとカラーが出てきたよ。

猫プリン侍
デザインとカラーを選択して後は、タイトルとボックスの中に文章を入れるだけでタイトル付ボックスが完成したよ。

ノーマルボックス

次にノーマルボックスの作り方の紹介です。

猫プリン侍
同じように左にあるブロックエディタのをクリックしてボックスを選択するよ。

猫プリン侍
すると記事投稿画面にボックスが出てくるので、右側の設定➡ブロック選択からボックスデザインとカラーを選ぶよ。

猫プリン侍
最後にボックスの中にテキスト文章を入れれば完成だよ!

ボタン

次にブロックエディタを使ってボタンの作り方をご紹介致します。

ボタンもアフィリエイトリンクやLPサイトで公式サイトに誘導する場合に非常に重要なパーツです!

猫プリン侍
ブロックエディタ画面から左のをクリック。少し下へスライドさせてデザインのボタンをクリック。

猫プリン侍
中央のブロックエディタ画面に公式サイトが追加されたよ。

右側の設定➡スタイルでボタンのカラーを設定するよ。

猫プリン侍
リッチピンクにするよ。

最後に以下を設定して完成!

テキストを入力(バナーはテキストの幅に応じて横に広がるよ。)
リンクマークをクリック
URLを入力
新しいタブで開かない場合は左。開く場合は右にボタンを移動させる

Q&A

Q&Aの装飾もブロックエディタで簡単に作成する事が出来ます。

ECサイトには欠かせないQ&Aの項目。

猫プリン侍
同じようにマークをクリックすればブロックが下に出てくるので、Q&Aをクリック。

猫プリン侍
記事にQ&Aが挿入されたよ。

猫プリン侍
QとAにそれぞれテキストを入力

猫プリン侍
右側の設定➡ブロックから、スタイル・アイコンデザイン・角丸をそれぞれ選択していくよ。

猫プリン侍
そうすればこんな風なQ&Aが完成したよ!

補足説明

補足説明も記事中に注意喚起の意味でよく使われる装飾です。

そんな補足説明装飾も、エディタを使って簡単に作る事が出来ます。

猫プリン侍
➡補足説明をクリック。

猫プリン侍
記事中に補足説明のブロックが挿入されたよ。

猫プリン侍
次に右側の設定➡ブロックからスタイルを選択するよ。

猫プリン侍
スタイルが挿入されたよ。最後にテキストを入力すれば完成!

アコーディオン

アコーディオンもSTORK19ではブロック対応しています。

チラリズムではありませんが、長い説明文をすっきりとさせる為にはアコーディオンで、短くした方が良いです。

猫プリン侍
をクリック➡アコーディオンを選択するよ。

猫プリン侍
アコーディオンのブロックが出てきたよ。

猫プリン侍
タイトル・文章を入力して、その下に入れるコンテンツを追加していくよ。
コンテンツ追加もをクリックして追加していくよ。
例えばリストを選択。

猫プリン侍
さらにをクリックして画像を追加する事も出来るよ。

猫プリン侍
画像が追加出来たよ。

こんな感じで色々な文章の下にコンテンツを追加していき、アコーディオンで広げたり格納したりする事が出来るようになります。

関連記事

関連記事も、リンクだと少し殺風景な感じですが、関連記事のブロックを使えば、ブログカード風に仕上がって見栄えもよくなるので、その分クリックもされやすくなります。

猫プリン侍
をクリック➡関連記事を選択。

猫プリン侍
関連記事のブロックが記事中に挿入されたよ。

猫プリン侍
右の設定➡ブロック➡関連記事のURLorID指定。その他に表示タイプを指定。
(日付表示の有無と、リンクの別タブ設定も出来るよ。)

猫プリン侍
実際にURLとカードを選択すればこんな感じの関連記事が出来たよ。

猫プリン侍
その一方でのシンプルを選んだ場合はこんな感じの関連記事が出来るよ。

記事リスト一覧

記事リスト一覧もブロックを使って記事中に表示させる事が可能です。
(新着、カテゴリー、タグの3つの種類から表示させる事が可能です。)

猫プリン侍
➡ブロック➡記事リストのカテゴリー/タグ/新着の中から好きなやつを選ぶよ。

猫プリン侍
記事リストのブロックが表示されたよ。

猫プリン侍
右の設定➡ブロックから記事リストの記事のタグID、表示記事数、

猫プリン侍
表示設定の表示デザイン、日付表示、タグ見出し表示を設定すれば、

猫プリン侍
こんな感じでカテゴリー記事リストブロック、

猫プリン侍
タグ記事リストブロック、

猫プリン侍
新着記事リストブロックがそれぞれ記事中に表示出来るようになるよ。

ツールバーテキスト装飾

ツールバーのテキスト装飾に関しては、本文に文字を入力した時に上に出てくるツールバーを使って、文字にライン線を引いたり、ラベルを貼ったり、文字のサイズを大きくまたは小さくする事が出来ます。

ライン線を引く

猫プリン侍
文字にライン線を引く場合は、文字を左クリックで範囲を指定した後に、のペンをクリック。

猫プリン侍
するとイエロー/ピンク/ブルー/グリーンの4色から選ぶ事が出来るよ。

ラベルを貼る

猫プリン侍
文字にラベルを貼る場合は同じく文字の範囲を指定して、の万年筆をクリック。

猫プリン侍
すると今度は、イエロー/ピンク/レッド/ブルー/グリーン/グレー/ブラックの7色から選ぶ事が出来るよ!

猫プリン侍
ピンクを選択したから、ピンクのラベルが貼れたよ。

文字のサイズを変える

猫プリン侍
文字のサイズを大きくしたり、小さくするのは、のTのマークをクリック。
するとSS/S/M/L/LLと5種類のサイズに対応しているよ。

猫プリン侍
こんな感じでM➡Lサイズに文字が大きくなったよ!

クラシックエディタ

さらにSTORK19のブロックエディタでは、クラシックエディタに切替せずとも、ブロックエディタ上でクラシックを使って文章を入力したり、文字の大きさを変えたり、色を付けたりする事も出来ます。

やはりクラシックの方が使いやすい!と言うあなたにはおすすめのブロックです。

猫プリン侍
をクリック➡クラシックをクリック。

猫プリン侍
するとブロックエディタ上にあの懐かしい?クラシックエディタのバーが出てきたよ!

猫プリン侍
後はいつものように、太文字/カラー文字/ラインマークをつけたりしながら、記事を書いていくだけだよ。(いつもし慣れた作業なので、簡単だよね?)

STORK19ブロックエディタの装飾機能を使ってみた感想まとめ

今回はSTORK19に搭載しているGutenbergブロックエディタを使って、吹き出しやBOXなどの装飾機能の作り方10選を一気に紹介してみました。

その中でも『吹き出し』・『ボックス』・『ボタン』の3つのブロック機能はよく使うので、覚えておいた方が良いです。

テーマは違っても基本的な使い方はどれも同じだと思います。

それとやはり装飾機能は、クラシックエディタに比べて感覚的にその場で色々なパターン。(例えば吹き出しの場合だと、背景の色/アイコンの左右の位置/アイコンの色を好きな通りに瞬時に組み合わせて作る事が出来るので、非常に便利だと思いました!)

猫プリン侍
クラシックエディタだと、ブラグインaddquickに記憶したショートコードですぐに吹き出しを出す事が出来るけどその場合、背景の色/アイコン左右の位置/アイコンの色/アイコンの画像は、事前に登録しておいた固定したデザインのタイプしか出す事が出来ないので、少し不便さを感じるかもしれないね。(事前に複数の吹き出しパターンをaddquickに登録しておけば問題の無い事だけどね。)

以上になります。

是非あなたも、便利になったブロックエディタ搭載のワードプレステーマSTORK19を使ってみてはいかがでしょうか?

STORK19公式サイトはこちら


猫プリン侍
こちらの僕の厳選おすすめ商品一覧も覗いてみてねぇ

メルマガやっています!

私が今までにやってきたアフィリエイトの数々(トレンドアフィリエイト/せどり/PPC/ペラサイト量産型/アドセンスetc)の経験を基に、今旬なアフィリエイト手法や最新情報。

さらにはネット副業以外にも役に立つ、ビジネスをやる上での心構えなどのメンタルな面のお話も、配信させて頂いております。

匿名とフリーメールアドレスだけで登録が出来、且ついつでも解除okなので、

是非登録してみて頂ければ、尻尾を振って猫プリン侍も大喜びです。🐾

今ならメルマガ登録をして頂いた方限定で、「リスクなしでまずは3万円を稼ぐ密書」をプレゼントしております。

>>猫プリン侍のメルマガ列伝登録のページはこちら

猫プリン侍のLINE@

猫プリン侍のLINE@も始まりました!

こんな人向け
  • 稼げるネットの副業情報を知りたい方
  • 初心者でもリスク無しで始める事が出来るネットの副業情報を知りたい方
  • ネットの副業をやる上での基礎知識を知りたい方
  • ネットの副業でガッツリと稼ぎたい方
猫プリン侍
こんなあなたは是非僕のLINE@にも登録してみてね。

登録してくれた人限定で、お楽しみのプレゼント🎁企画もご用意しています。

メール無料相談受け付け中!

完全在宅でアフィリエイトを始めてみたいけど、一体何から始めて良いのか?わからない!?

そんなあなたも多いかと思います。

選択肢や情報(あれは稼げるけど、あれは稼げないなどの偏った情報)が多い分、

情報の洪水に流されてしまい、私は一体何から始めてよいのか?本当にわからない!

って方が多いと思います。

そんな時は迷わずに、是非完全無料のメール相談をご活用して頂ければ幸いです。

これまで学習の為に情報商材・塾・コンサルで私自身総額200万以上は使っているので、その経験から必ず力になれるはずです!

>>猫プリン侍にメール相談をしてみる