多機能テーマに付いているお馴染みの機能は、実はGutenberg（グーテンベルク）で解決するかもしれない。
だが、一部使用に向いていない方も存在するので、導入はこの記事を参考にしていこう。
一応、このようなことも可能だ。
簡単にオシャレの権化を作成できるが、文字色・背景色はAMPで活躍不可なのがとても残念。
ここではどのように魅力ある機能が存在するのか、どれほど簡単にできるかを紹介していき、自分に合っていると思うなら「WordPressを始めたときのように挑戦」するといいだろう。
向いている人
画像を多用しない- 文字色を多用しない
AMPを使用していない（場合による）記事の中でカラムわけをしない（簡単にできるようになった）- 余計なプラグインを減らしたい（結構な数をGutenbergで代用可能）
だいぶ状況が変わってきた。
私はGutenbergを10ヶ月以上前から使っているが、画像を多用しAMPもガッツリ使用していて、ほぼ自然に使っている。
だが、「段落」ブロックでしか文字色を変えることはできずAMP非対応となっているため、必然的に文字色の数は減っていく。
当サイトとしては文字色・ただの太字などの装飾に見やすさ効果を感じられないなら、バッサリ諦めてシンプルに乗り換えすることを推奨。
不都合な仕様
- Gutenbergエディターで作成した文字色・ボタン・カバー画像がAMP非対応
- カバー・ギャラリーブロックが使いにくい
- 段落の文字色、背景が範囲選択ではなく、段落・背景全体に適用される
- Gutenbergにコピペした際、スペースが入ったりスタイルを引き継ぐ
- ChromeとFirefoxはCtrl＋Shift＋Vのプレーンテキスト化で乗り切れる。ビジュアルエディタも同じ？
カバー画像例：固定背景＋オーバーレイの色ピンク＋透過率40＋文字色は変更不可
上記のようにとても目を引くカバー画像だが、AMPでは「キャプション」しか表示されない。
一応「段落」の一文字目にサイズを変えられるドロップキャップという機能も簡単に使える（AMP非対応）。
文字色・背景は段落すべてに適用される仕様となっているし、一部分だけ色を変えられるといったこともできず、AMP非対応のため普通の文字に戻される。
AMPページ【機能爆発5.0対応】多機能テーマ不要？Gutenbergの使い方
ギャラリーはモバイルサイズだと改行されないので風景ならいいかもしれないが、文字入り画像は調整しないと文字が見づらかったりする。
PCでは複数カラム、モバイル・AMPで綺麗に画像を1カラムにするなら「カラム」ブロックを使えばいいので、当サイトはギャラリーを使用していない。
文字を回り込ませる画像は残念ながら改行不可。
使えた記事もあったが、なぜそうなったのかを覚えていない。調整すればおそらく使えるはずなので、ガチャガチャするしかないのではないだろうか。
回り込み画像ではないが、モバイル・AMPで1カラムにできる「メディアと文章」ブロックもあるので（冒頭のオシャレの権化のこと）、1カラム目的ならそちらを使おう。
なお、上記2つの画像は2カラムの中に「画像」ブロックを使用しているため、モバイル・AMPでしっかり改行してくれる。
最近出現した、AMPの画像になぜか1200px以上のサイズを求められる、「推奨サイズより大きい画像を指定してくださいSearch Consoleエラー」に絶望していたら、逆にメリットだろう。
表示設定
下書きや公開ボタンの右側から細かな設定が可能。
表示は自分が使いやすいよういろいろ試し、他の機能はガチャガチャするだけでいいだろう。
コードエディターは完全に使用する必要がないため、触らないように。
使用する基本ブロック一覧
あまりにも特殊なものは紹介せず、「使う頻度の高いブロック」を紹介する。十分魅力的なブロックを紹介するので、参考にしよう。
ちなみに、ブロックの選択方法はこんな感じ。
「段落」ブロックを作成すると右側に直近3つまでの「よく使うブロック」が表示される。
さらにスラッシュ（/）を使用すると10個まで確認可能。
一般ブロック所属：段落・リスト・引用
これらはブロックを選択して使うだけだ。
もちろん使うと「よく使うブロック」にも同じブロックが出現するし、他のブロックを試しに使ってみるのもいいだろう。
ちなみに、引用には「引用元を入力する欄」が存在し、入力するだけで「cite」タグに囲ってくれて初心者に優しい。
引用文章テストもじもじ
引用元入力欄もじもじもーじ
フォーマット所属：クラシック
何度もでてきた「クラシック」ブロックを先に紹介。
一言でいうと、「旧ビジュアルエディターをそのまま使える最強のブロック」。
おそらく一番使うであろうブロックで、基本装飾はブロック内に記述することになる。
多機能テーマであればクラシック内でその機能を使うこともでき、用意された枠などの装飾も何不自由なく使える。
TinyMCEも通常どおり使えるので、乗り換え自体は覚えるだけしか苦行はない。
なお、Gutenbergにどこからかコピーしてきた装飾系を貼り付けするとすべて除外されるため、クラシック内に貼り付けするようにしよう。
CocoonにCocoon Blocksが組み込まれた！ プラグインが減ってとてもうれしい。
一般ブロック所属：見出し
「ツールバー」にはH2からH4までしかないが、投稿編集右側の「設定」にはH1からH6まで存在するので簡単に変更可能。
アンカーリンク（好きな見出しに移動）
なんと機能として最初から使用可能。
アンカーリンクはもともとAMP対応しているので、「AMPからモバイルページのURLに飛んでしまう」ようなことはなく、きちんと「AMPからAMPの見出し」へ飛ぶことができる。
やり方は、
- 行き先の見出しを選択
- 右側に表示中の設定から「詳細」→「 HTMLアンカー」に記入（画像では「過去記事」と記入）
- 呼び出したいところにリンクで頭に「#（半角シャープ）」を付け、HTMLアンカーに記入した名前を入れる（画像では「#過去記事」と記入）
試しに下の章に飛ぶアンカーリンクを作成しておいた。
一般ブロック所属：画像
変な仕様があるので、その部分だけ覚えておこう。
- 右側の「設定」でalt属性（代替テキスト）を入れても、その記事でしか保存されない
- 右側の「設定」でリンク設定を変更しても、メディアライブラリで設定したように記憶されない※
※今までは一度メディアファイルに変更した場合、再度変更するまでメディアファイルのままだったが、右側の「設定」だと画像ごとになってしまう。
ちなみに、リンク先を「メディアファイル」にした状態だと「新しいタブで開く」が出現し、有効にすると別タブで画像が開く、一部の人には喜ばれる機能が付属。
当然AMPも別タブで開くため、「画像をクリックして別タブで拡大」してほしいならこの機能が魅力的だろう。
なお、当サイトはこの別タブ拡大機能を使っていない。拡大になっているのはCocoon搭載の機能だ。
回り込み画像
挿入した画像を選択 → ツールバーの左寄せ・右寄せで画像を回り込ませることができる。
仕様上特殊な動作のため、一度試してみることを進める。
公式サイトGutenbergのデモ
デモだと「幅広」・「全幅」が存在し、CocoonとTwenty Seventeenだと未対応なのか存在しない。
フォーマット所属：テーブル
厄介なテーブルタグが、恐ろしく簡単にできる。
幅の固定も右側の「設定」で簡単にでき、もうテーブルタグの知識は捨てていいだろう。
フォーマット所属：カスタムHTML
「カスタムHTML」ブロックを作成し、そこにコードを貼り付けするだけだ。
カスタムHTMLの「プレビュー」だとデザインは違うが（Gutenberg内のため）、公開または更新ボタンの隣にあるプレビューは正常にスタイルが適用されるので、確認はこちらからにしよう。
カエレバはカスタムHTMLのプレビューを常に有効化させて表示を少なくできるよ！
ちなみに、
- 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未導入の風景画像ガチ勢サイトは参考にしてね！
回り込み画像ではないので文字は回り込まない。
ウィジェット所属：最新の記事・カテゴリー
記事内に最新の記事・最新のコメント・アーカイブ・カテゴリーを召喚することができる。
最新の記事とカテゴリーデフォルトはリスト表示の模様。
- 【SSS】究極！機能被りを抑えたWordPressセキュリティプラグイン選び
- 【SSS】WordPressセキュリティプラグインは買い切りのBBQ PROが化物
- 【SS】超高速ファイアウォールをコピペ実装！感動のプラグインなし
- 【SS】超高速！WordPressで高セキュリティを実現するBBQプラグイン
カラムを応用してみた。
いろいろできるようだが、多機能すぎるのでこれ以上は無視。
ウィジェット所属：ショートコード
ショートコード対応テーマなら段落に「ショートコードのみ」を入れるだけで、ショートコードウィジェットを自動で召喚できる。
文章の途中に入れた場合は発動しないが、Cocoonでは通常どおり表示されるぞ！
もし呼び出せないのなら、ウィジェットからショートコードブロックを手動でやろう。
再利用ブロック（ショートコードごっこ）
作成したブロックを保存可能。保存したブロックは他の記事でも使用でき、「ブロックの追加」の一番下に追加されていく。
定型文など固定なものを登録するのに優れ、1つの記事で更新すると「すべての記事でも更新」される。
削除するなら一度呼び出し、選択中に「再利用ブロックから削除」しよう。
ショートコードとして使わず、通常のブロックに戻す
あらかじめ仕込んでおいた再利用ブロックを通常のブロックに戻し、「通常のブロックとして使う」こともできる。
ただ、この利用方法は必ず「通常のブロックへ変換」を先にすること。変換前に再利用ブロックを編集すると、すべての記事で更新されてしまうぞ！
エクスポート（書き出し）・インポート（読み込み）・複数削除
「再利用ブロックを管理」でエクスポート・インポート・複数削除ができる。
再利用ブロック選択時の右下にある「歯車マーク」か、公開ボタンの近くにある ︙ から行けるが、別タブで開かないので「下書き保存」してからの移動、または「右クリック」→「新しいタブで開く」で開こう。
そうすると見たことのあるような画面が出現するので、エクスポートやインポートをしよう。
埋め込みブロック
ショートコードと同じく、段落の最初に入れると自動で呼び出してくれる。
反応しない場合は手動で埋め込みから該当のサービスを選択し、埋め込んでみよう。
TwitterやYouTubeはもちろん、Instagramや他にもたくさんあるので、Gutenberg公式のデモを使い確認するといい。
基本操作
この応用で回避できる場合もあり、覚えておくといいだろう。
巻き込む（複数選択）
巻き込みたいブロックをドラッグするだけだ。
削除できないブロックがあったら「巻き込んで削除」できるし、「複数選択して一気に変更する」といったこともできる。
複製（巻き込み対応）
選択したブロックを鬼のように複製できる。
「先にタイトルを決めてから記事を書く」タイプの方は、見出しを作成して「Ctrl ＋ Shift ＋ D」のショートカットを使うのがオススメ。
上下移動（巻き込み対応）
ブロックの左側にカーソルを載せると、「上下移動の印」と「掴めそうな何か」が表示される。
画像だと移動距離がなく雑な動きをしているが、長距離移動は上下移動でスムーズに使用できる。
ドラッグ移動のコツは「文字の上に持ってくること」なので、画像のように「線が出てきたところ」に入れよう。
Gutenbergの弱点を知る
実は仕様とバグはこの他にも存在する。
導入する前に見てもいいが、何か問題があってから確認するだけでも良い。
当サイトはセキュリティサイトのため、WordPressのセキュリティに物申したい。
私の知識を使い理想的で競合しにくい組み合わせを考えたので、以下のプラグインを使っていたり、利用してみたいと思っていたならカンニングするといい。
- SiteGuard WP Plugin（通称サイトガード）
- Wordfence（ワードフェンス）
- All In One WP Security & Firewall（AIOWPS）
- Sucuri Security
- ログイン系にファイアウォールを付け足す
- 2段階認証
コメント