ブロックエディタ使ってますか?

わたしはここ最近、ブロックエディタばかり使っています。

リリース当初は酷評だったけど、今は大分改良されていてかなり使いやすいエディタになってると思う。

物足りないとしたらデザイン的な部分だよね。

いくら使いやすくてもデザインがしょぼかったら、うーん・・・ってなるし。

そこで、いいプラグインはないか、公式リポジトリに登録されている色々試した結果、「Qubely」っていうのが割といい感じだったので使い方を紹介します☆

「Qubely」のダウンロード

管理画面で「Qubely」と検索すれば出てきます。

実際の表記はwordpress.org上では「Gutenberg Blocks and Page Builder – Qubely」。

追加後のプラグイン一覧では「Qubely – Advanced Gutenberg Blocks」って感じで表示されています。

↑ここからzipファイルダウンロードしてインストールしてもOK!

インストール&有効化ができたら早速使っていこう♪

基本的な使い方

←プラスマークをクリックすると、ブロックカテゴリーが表示されます。

↓こんなのです。

ここで「Qubely」という個所をクリックします。

↓そうするとこんな感じに開きます。

ここで使いたいブロックを選んで使っていきます。

各ブロックの設定方法

例として「Icon List」を挙げて解説します。

▼サンプル①

  • Add beautiful icons and text
  • Set icon color for normal and hover state
  • Manage space between icon and the text
  • Choose a desired layout from the list

まずブロックを使うと上の サンプル① のようなリストが表示されます。

テキストはそのまま消して上書きで編集する感じ。

アイコンを変えるのは変えたいアイコンをクリックです。

デザインは右サイドバーから行います。

各項目の意味は次の通り。

Alignment

アライメント。
2パターンからデザインを選択。
リストの左右中央寄せを選択。

Icon

アイコン。
アイコンの大きさや位置、テキストとのスペースを設定。

Animation

アニメーション。
設定するとリストが表示されるときに動きが加わる。

Typography

タイポグラフィ。
文字の大きさや太さ、フォントの種類の設定。

Design

デザイン。
リスト同士の縦のスペース、ボーダーを設定。

Interaction

インタラクション。
Pro版へのリンクあり。
Enable Mouse Movementはマウスホバーアクションを追加。

適当にいじると↓のようにもできます。

  • ランチ合コン探偵〜恋とグルメと謎解きと〜
  • チョコレート戦争〜朝に道を聞かば夕べに死すとも可なり〜
  • トップナイフ―天才脳外科医の条件―
  • シロでもクロでもない世界で、パンダは笑う。
  • 100文字アイデアをドラマにした!

こんな感じで、

まずは+ボタンから使いたいブロックを選び、

右サイドバーからデザインを変更する

という流れで使用できます。

デバイス毎の設定

↑このアイコンがある項目は、

  • PC
  • タブレット
  • スマホ

それぞれで設定することも可能です。

デバイス毎にスペースやフォントサイズなど、細かいところにこだわれます。

スペースやボーダーの設定

↑こんなアイコンを見かけたことがあるかと思います。

これは左を選択すると全周(上下右左)まとめて指定。

右を選択すると上下左右の辺を個別に指定することが可能になります。

その他、Qubelyのブロックで分かり辛そうなところを解説

デフォルトでは日本語化が不十分のため、ちょっと分かりにくいものがあるのでそれを解説しておきます。

※2020年1月現在の話です。

Row

カラム分けをするブロックです。

「Advanced List」と「Icon List」の違い

Advanced listはアイコンが1つに統一、Icon listはリスト毎にアイコンが変更できます。
Advanced listの方が使いやすいかな。

Testimonialって?

Google翻訳によるとお客様の声です。
レビューを入れる時に便利そう。

見出しやテキストはGutenbergのデフォルトにもあるけど?

違いはQubely独自の装飾ができることです。

.potファイルから翻訳してみようと思ったけど、翻訳準備もあまりできていない感じでしたorz

Qubelyはインライン装飾もできる

独自のブロックを追加するだけではなく、インライン装飾までできます。

そのやり方は、まずは文章を書きます。

文章を書いたら装飾したい部分をドラッグ。

その状態でブロックの上にあるツールバーの下向き三角をクリック。

そうするとサブメニューが開きます。

この「背景色」「色」で装飾ができます。

デフォルトのカラーパレットは変更できます。

やり方は、右上の「Q」っていうアイコンから。

そうするとカラーパレットが出てくるので、ここで変更できます。

レイアウトをインポートもできる

ブロックを追加した時点で既にある程度デザイン済みではありますが、より実用的なレイアウトセットをインポートできるんです。

やり方は右上の「Import Layout」から。

クリックすると、デザイン済みのレイアウトがズラ―っとでてきます。

全てが使えるわけではなく、右上に PRO と出ているものはPRO版にアップグレードしないと使えません。

ただ、無料で使えるものでも結構便利なそうなものもあるんじゃないかと思います。

CSSの読み込み方式

気が利くことに、オプションでこれが変更できます。

やり方は「ダッシュボード」→「Qubely Options」から。

CSS Save Methodで、

  • Header → ヘッダーインライン読み込み
  • File System → 別ファイルメタタグ読み込み

から選択可能です。

デフォルトではHeader、すなわちインライン読み込みとなっているので、高速化のためにも基本的にはこのままでいいかな。

他にもいろんなブロックが使えるよ!

Qubelyでは全部で30個のブロックが提供されています。

ここで紹介していないブロックにも使いやすいのは結構ありました。

例えばGoogle Mapのブロック。

↓住所を入れるだけでこんな感じに表示されます。

↓「Block Wrapper」はシンプルに背景や枠線、ボックスシャドウを設定・カスタマイズできます。

Block Wrapperを使っています。

WordPressデフォルトのブロックエディタじゃ物足りない・・・。

なかなか良いブロックエディタの拡張プラグインが見つからない・・・。

という方はQubelyを試してみてはいかがでしょうか(*´ω`*)

あとがき

このプラグインにたどり着くまで、実にたくさんのプラグインを試してきました(;´Д`)

評価数300超えとか、有効インストール20万超えとか、メジャーなのも試してはみたんだけど、

  • 画像遅延読み込み
  • 非同期読み込み
  • CSSやJavascript のインライン読み込み

などなど、いわゆる高速化施策との相性が悪いのが多くて(>_<)

テーマ側でブロックエディタの機能を拡張しているものもあるけど、それってテーマを変えたら全部崩れるんだよ?

テーマを変えなきゃいい話だけど、WordPressはテーマを色々変えられるのもメリットの1つだと思う。

実際、テーマの数は国産・海外産、有料・無料を含めて数え切れないほどあるよね。

昔から“このテーマを使っとけばOK”っていうのもないし。

これは裏を返せば、次から次に有用なテーマが登場し続けてるってことでしょ。

う~ん、、、そういうテーマを使ってる人多いけど、わたしはテーマとエディタは分けるべきだと思うな~。