【機能爆発5.0対応】多機能テーマ不要?Gutenbergの使い方

WordPress
この記事は約14分で読めます。

多機能テーマに付いているお馴染みの機能は、実はGutenberg(グーテンベルク)で解決するかもしれない。

カエレバ・アプリーチなどのブログパーツも「カスタムHTML」ブロックで正常に使える。

だが、一部使用に向いていない方も存在するので、導入はこの記事を参考にしていこう。

一応、このようなことも可能だ。

簡単にオシャレの権化を作成できるが、文字色・背景色はAMPで活躍不可なのがとても残念。

各テーマ作者達が動いているはずなので、さらに使いやすく、今後テーマによっては色もAMP対応するかも? 実際、当サイト使用中のCocoonでは、決められた色やストロングではない太さなどが解禁されたので、各テーマを詳しく見てみる調べるといい

ここではどのように魅力ある機能が存在するのか、どれほど簡単にできるかを紹介していき、自分に合っていると思うなら「WordPressを始めたときのように挑戦」するといいだろう。

テスト自体はインストールする必要はなく、Gutenberg公式のデモと当記事を表示させて使うといい。
スポンサーリンク

向いている人

  • 画像を多用しない
  • 文字色を多用しない
  • AMPを使用していない(場合による)
  • 記事の中でカラムわけをしない(簡単にできるようになった)
  • 余計なプラグインを減らしたい(結構な数をGutenbergで代用可能)

だいぶ状況が変わってきた。

私はGutenbergを10ヶ月以上前から使っているが、画像を多用しAMPもガッツリ使用していて、ほぼ自然に使っている。

だが、「段落」ブロックでしか文字色を変えることはできずAMP非対応となっているため、必然的に文字色の数は減っていく。

このような枠などの装飾も「クラシック」ブロックで旧ビジュアルエディターの機能(TinyMCEなど)や多機能テーマ機能を使い、普通に使えてしまう。ただ、クラシックを毎度作成せざるを得ないので文字色の頻度で使うとクラシックだらけになる。

当サイトとしては文字色・ただの太字などの装飾に見やすさ効果を感じられないなら、バッサリ諦めてシンプルに乗り換えすることを推奨。

不都合な仕様

  • Gutenbergエディターで作成した文字色・ボタン・カバー画像がAMP非対応
  • カバー・ギャラリーブロックが使いにくい
  • 段落の文字色、背景が範囲選択ではなく、段落・背景全体に適用される
  • Gutenbergにコピペした際、スペースが入ったりスタイルを引き継ぐ
    • ChromeとFirefoxはCtrl+Shift+Vのプレーンテキスト化で乗り切れる。ビジュアルエディタも同じ?

カバー画像例:固定背景+オーバーレイの色ピンク+透過率40+文字色は変更不可

上記のようにとても目を引くカバー画像だが、AMPでは「キャプション」しか表示されない。

一応「段落」の一文字目にサイズを変えられるドロップキャップという機能も簡単に使える(AMP非対応)。

文字色・背景は段落すべてに適用される仕様となっているし、一部分だけ色を変えられるといったこともできず、AMP非対応のため普通の文字に戻される。

AMPページ【機能爆発5.0対応】多機能テーマ不要?Gutenbergの使い方

ギャラリーはモバイルサイズだと改行されないので風景ならいいかもしれないが、文字入り画像は調整しないと文字が見づらかったりする。

注釈は見えても、項目名(下のギャラリー画像なら英字部分)がどうしても2カラムのままで小さい。

PCでは複数カラム、モバイル・AMPで綺麗に画像を1カラムにするなら「カラム」ブロックを使えばいいので、当サイトはギャラリーを使用していない。

文字を回り込ませる画像は残念ながら改行不可。

使えた記事もあったが、なぜそうなったのかを覚えていない。調整すればおそらく使えるはずなので、ガチャガチャするしかないのではないだろうか。

回り込み画像ではないが、モバイル・AMPで1カラムにできる「メディアと文章」ブロックもあるので(冒頭のオシャレの権化のこと)、1カラム目的ならそちらを使おう。

まとめると、カバー・ギャラリー・Gutenberg付属の文字色機能は一切使わない。回り込み画像は調整必須。
PCの回り込み画像例
PCの回り込み画像例
モバイル回り込み画像例
モバイル・AMP回り込み画像例

なお、上記2つの画像は2カラムの中に「画像」ブロックを使用しているため、モバイル・AMPでしっかり改行してくれる。

逆に言うとAMPさえ使わなければフルに使うことができ、おしゃれマスターになることができる。もちろん、ページごとのAMP設定はプラグインでも可能なはずだ。

最近出現した、AMPの画像になぜか1200px以上のサイズを求められる、「推奨サイズより大きい画像を指定してくださいSearch Consoleエラー」に絶望していたら、逆にメリットだろう。

スポンサーリンク

表示設定

下書きや公開ボタンの右側から細かな設定が可能。

表示は自分が使いやすいよういろいろ試し、他の機能はガチャガチャするだけでいいだろう。

オプションにある「公開前チェックを有効化」が、多機能テーマでなくても使えるメリットがある。さらに、表示したくない機能のチェックを外すことも可能。

コードエディターは完全に使用する必要がないため、触らないように。

当サイトは「統合ツールバー」を使用している画像で進行していく。
スポンサーリンク

使用する基本ブロック一覧

あまりにも特殊なものは紹介せず、「使う頻度の高いブロック」を紹介する。十分魅力的なブロックを紹介するので、参考にしよう。

ちなみに、ブロックの選択方法はこんな感じ。

ブロックの追加方法

「段落」ブロックを作成すると右側に直近3つまでの「よく使うブロック」が表示される。

さらにスラッシュ(/)を使用すると10個まで確認可能。

スラッシュの効果

一般ブロック所属:段落・リスト・引用

これらはブロックを選択して使うだけだ。

もちろん使うと「よく使うブロック」にも同じブロックが出現するし、他のブロックを試しに使ってみるのもいいだろう。

一般ブロックの場所

ちなみに、引用には「引用元を入力する欄」が存在し、入力するだけで「cite」タグに囲ってくれて初心者に優しい。

引用文章テストもじもじ

引用元入力欄もじもじもーじ
が、引用の中にリストを作成できない仕様のため、リストの引用は「クラシック」ブロックを使おう。
当サイトは多機能テーマCocoonを使用しているため、引用も装飾されている。つまり、引用のデザインはテーマやCSSごとに異なる。

フォーマット所属:クラシック

何度もでてきた「クラシック」ブロックを先に紹介。

一言でいうと、「旧ビジュアルエディターをそのまま使える最強のブロック」。

おそらく一番使うであろうブロックで、基本装飾はブロック内に記述することになる。

多機能テーマであればクラシック内でその機能を使うこともでき、用意された枠などの装飾も何不自由なく使える。

初期の頃は画像を挿入できなかったが、現在は普通に挿入可能。
クラシックブロックを呼び出す

TinyMCEも通常どおり使えるので、乗り換え自体は覚えるだけしか苦行はない。

なお、Gutenbergにどこからかコピーしてきた装飾系を貼り付けするとすべて除外されるため、クラシック内に貼り付けするようにしよう。

【朗報】Cocoon用プラグイン「Cocoon Blocks」が公開された。このプラグインでクラシックブロックを使用しなくても、簡単にブロックを呼び出せるようになった(開発段階のためすべてではない)。

CocoonにCocoon Blocksが組み込まれた! プラグインが減ってとてもうれしい。

一般ブロック所属:見出し

「ツールバー」にはH2からH4までしかないが、投稿編集右側の「設定」にはH1からH6まで存在するので簡単に変更可能。

見出しタグの変更は簡単

アンカーリンク(好きな見出しに移動)

なんと機能として最初から使用可能。

アンカーリンクはもともとAMP対応しているので、「AMPからモバイルページのURLに飛んでしまう」ようなことはなく、きちんと「AMPからAMPの見出し」へ飛ぶことができる。

用途は「読み飛ばす」など。

やり方は、

  • 行き先の見出しを選択
  • 右側に表示中の設定から「詳細」→「 HTMLアンカー」に記入(画像では「過去記事」と記入)
  • 呼び出したいところにリンクで頭に「#(半角シャープ)」を付け、HTMLアンカーに記入した名前を入れる(画像では「#過去記事」と記入)
アンカーリンクを作成

試しに下の章に飛ぶアンカーリンクを作成しておいた。

【悲報】:日本語を使うとパーマリンクと同じく長くなる模様。気づきにくく実際はなんの問題もないが、パーマリンクと共通にしたいなら注意。わからなければ、上記リンクを試しにコピーしてアドレスバーに貼り付けてみるといい。

一般ブロック所属:画像

画像ごとにしか設定できない

変な仕様があるので、その部分だけ覚えておこう。

  • 右側の「設定」でalt属性(代替テキスト)を入れても、その記事でしか保存されない
  • 右側の「設定」でリンク設定を変更しても、メディアライブラリで設定したように記憶されない※

※今までは一度メディアファイルに変更した場合、再度変更するまでメディアファイルのままだったが、右側の「設定」だと画像ごとになってしまう。

ちなみに、リンク先を「メディアファイル」にした状態だと「新しいタブで開く」が出現し、有効にすると別タブで画像が開く、一部の人には喜ばれる機能が付属。

当然AMPも別タブで開くため、「画像をクリックして別タブで拡大」してほしいならこの機能が魅力的だろう。

なお、当サイトはこの別タブ拡大機能を使っていない。拡大になっているのはCocoon搭載の機能だ。

「カバー・ギャラリーはalt属性を画像ブロックのように設定できない」のも使いにくい。

回り込み画像

挿入した画像を選択 → ツールバーの左寄せ・右寄せで画像を回り込ませることができる。

仕様上特殊な動作のため、一度試してみることを進める。

公式サイトGutenbergのデモ

画像の回り込みの仕方

デモだと「幅広」・「全幅」が存在し、CocoonとTwenty Seventeenだと未対応なのか存在しない。

フォーマット所属:テーブル

厄介なテーブルタグが、恐ろしく簡単にできる。

テーブルの作成

幅の固定も右側の「設定」で簡単にでき、もうテーブルタグの知識は捨てていいだろう。

フォーマット所属:カスタムHTML

「カスタムHTML」ブロックを作成し、そこにコードを貼り付けするだけだ。

カスタムHTMLにコードを入れる

カスタムHTMLの「プレビュー」だとデザインは違うが(Gutenberg内のため)、公開または更新ボタンの隣にあるプレビューは正常にスタイルが適用されるので、確認はこちらからにしよう。

ぷっぷ
ぷっぷ

カエレバはカスタムHTMLのプレビューを常に有効化させて表示を少なくできるよ!

Bitwarden パスワードマネージャー

Bitwarden パスワードマネージャー

無料posted withアプリーチ

ちなみに、

  • Gutenbergにそのままコードを貼り付け
  • フォーマット所属の整形済みテキストに貼り付け

は何の意味もなく、コードそのものを貼り付けすることができない。

一応「クラシック」ブロック内に「︙」→「HTMLと編集」でコードを挿入、「︙」→「ビジュアル編集」で戻しても同じように使えるが、カエレバのデザインが「amazlet風-2(cssカスタマイズ)」以外だった場合おかしくなるのでカスタムHTML推奨。

※当サイトのカエレバCSSはCocoon独自のものだぞ。

レイアウト要素所属:カラム

カラムわけすることができ、「カラム数を増やしたいカラムを選択した状態」で左上にあるブロックナビゲーション(Shift + Alt + O)一番最初のカラムを選択すると、右側の「設定」で3~6に増やすことができる。

ブロックナビゲーション以外だと、カラムを上下に動かす模様のあいだを選択・カラムのちょっと下を選択する方法でもカラム選択可能。

削除はブロックナビゲーション(Shift + Alt + O)→ カラム → Deleteで削除が可能。

カラムの追加・削除

このカラムはモバイル・AMPで複数あっても改行される

以下の画像は2カラムに画像を入れたもので、横幅が狭いモバイル環境では1行になっているはずだ。これを改行したくないのであれば、ギャラリーを使うといい。

もちろん片方だけ文字、すべて文字としてカラムを利用できる。

レイアウト要素所属:メディアと文章

このようなこともできる。

文字サイズはもちろん、1文字目をドロップキャップで巨大化も可能。

「画像を選択」した状態なら文字背景に色を付けられるし、「モバイル時に上下する」項目を有効化させれば、狭いモバイルとAMPで1カラムなってくれる。

が、例のごとく色やドロップキャップはAMP非対応なのを忘れないように。

ぷっぷ
ぷっぷ

これ、綺麗だと思うの……AMP未導入の風景画像ガチ勢サイトは参考にしてね!

回り込み画像ではないので文字は回り込まない。

ウィジェット所属:最新の記事・カテゴリー

記事内に最新の記事・最新のコメント・アーカイブ・カテゴリーを召喚することができる。

最新の記事とカテゴリーデフォルトはリスト表示の模様。

カラムを応用してみた。

いろいろできるようだが、多機能すぎるのでこれ以上は無視。

ウィジェット所属:ショートコード

ショートコード対応テーマなら段落に「ショートコードのみ」を入れるだけで、ショートコードウィジェットを自動で召喚できる。

文章の途中に入れた場合は発動しないが、Cocoonでは通常どおり表示されるぞ!

ショートコード挿入

もし呼び出せないのなら、ウィジェットからショートコードブロックを手動でやろう。

再利用ブロック(ショートコードごっこ)

作成したブロックを保存可能。保存したブロックは他の記事でも使用でき、「ブロックの追加」の一番下に追加されていく。

再利用ブロックを作成
再利用ブロックを召喚

定型文など固定なものを登録するのに優れ、1つの記事で更新すると「すべての記事でも更新」される。

例:アフィリエイトリンクを登録し、変更したらその再利用ブロックのリンクを変更するだけで、他の記事のリンクも更新される。

削除するなら一度呼び出し、選択中に「再利用ブロックから削除」しよう。

再利用ブロックから削除

ショートコードとして使わず、通常のブロックに戻す

あらかじめ仕込んでおいた再利用ブロックを通常のブロックに戻し、「通常のブロックとして使う」こともできる。

再利用ブロックを通常ブロックに戻す
上記画像はクラシックブロックを通常ブロックに戻しているが、現在は不可能なので戻し方だけを参考にしよう。

ただ、この利用方法は必ず「通常のブロックへ変換」を先にすること。変換前に再利用ブロックを編集すると、すべての記事で更新されてしまうぞ!

エクスポート(書き出し)・インポート(読み込み)・複数削除

「再利用ブロックを管理」でエクスポート・インポート・複数削除ができる。

再利用ブロック選択時の右下にある「歯車マーク」か、公開ボタンの近くにある ︙ から行けるが、別タブで開かないので「下書き保存」してからの移動、または「右クリック」→「新しいタブで開く」で開こう。

Manage All Reusable Blocksへアクセス
英語だけど、再利用ブロックを管理のことだよ

そうすると見たことのあるような画面が出現するので、エクスポートやインポートをしよう。

エクスポートなどしたいことを選択
今後どうなるかわからないが、この画面で再利用ブロックの編集はできない。

埋め込みブロック

ショートコードと同じく、段落の最初に入れると自動で呼び出してくれる。

反応しない場合は手動で埋め込みから該当のサービスを選択し、埋め込んでみよう。

TwitterやYouTubeはもちろん、Instagramや他にもたくさんあるので、Gutenberg公式のデモを使い確認するといい。

スポンサーリンク

基本操作

この応用で回避できる場合もあり、覚えておくといいだろう。

巻き込む(複数選択)

巻き込みたいブロックをドラッグするだけだ。

ブロックを巻き込む

削除できないブロックがあったら「巻き込んで削除」できるし、「複数選択して一気に変更する」といったこともできる。

巻き込んでクラシックに貼り付けをすると、隠されたGutenbergタグも貼り付けされてしまうので消そう。

複製(巻き込み対応)

選択したブロックを鬼のように複製できる。

選択したブロックを複製

「先にタイトルを決めてから記事を書く」タイプの方は、見出しを作成して「Ctrl + Shift + D」のショートカットを使うのがオススメ。

上下移動(巻き込み対応)

ブロックの左側にカーソルを載せると、「上下移動の印」と「掴めそうな何か」が表示される。

ブロックを移動

画像だと移動距離がなく雑な動きをしているが、長距離移動は上下移動でスムーズに使用できる。

ドラッグ移動のコツは「文字の上に持ってくること」なので、画像のように「線が出てきたところ」に入れよう。

スポンサーリンク

Gutenbergの弱点を知る

実は仕様とバグはこの他にも存在する。

導入する前に見てもいいが、何か問題があってから確認するだけでも良い。


当サイトはセキュリティサイトのため、WordPressのセキュリティに物申したい。

私の知識を使い理想的で競合しにくい組み合わせを考えたので、以下のプラグインを使っていたり、利用してみたいと思っていたならカンニングするといい。

  • SiteGuard WP Plugin(通称サイトガード)
  • Wordfence(ワードフェンス)
  • All In One WP Security & Firewall(AIOWPS)
  • Sucuri Security
  • ログイン系にファイアウォールを付け足す
  • 2段階認証

コメント

タイトルとURLをコピーしました