2020/01/24【WordPress】Gutenbergを3つの裏技で使いやすく&効率化するB!WordPress5.0が出て、デフォルトのエディターがクラシックエディターからGutenbergに変わってもうすぐ1年経とうとしてます。時の流れは早いですね。出た当時、批判がすごかったGutenbergも批判してた人が慣れてきたからかそれなりに評価されつつあります。そんなGutenbergをもっと効率的に、使いやすくするための裏技集ですん。くじマークダウンを使うエンジニアの方は馴染深いかと思いますが、最近のイケてるエディター同様、Gutenbergでもマークダウン記法が使えます。マークダウン記法とは、文を書き出す前に半角で特定の記号や文字とスペースを入力するとそのブロックが自動でマークアップされる書き方のことです。ここではよく使いそうなものだけ紹介。マークダウンで見出しを使う半角の「#」とスペースを組み合わせて使います。書くと、h4タグの見出しが出来上がります。マークダウンでリストを使う半角の「–」とスペースを入力すると自動でそのあとのブロックはリストになります。番号付きのリストにしたい場合は半角数字とドット(.)とスペースです。マークダウンで引用を使う半角の「>」とスペースを入力すると引用ができます。メールのやり取りなどでよく使うので覚えやすいですね。選択している文を複製できたりとか色々便利技はありますが、まずはここら辺を抑えておくと凄く効率化が図れます。マークダウンについてもっと詳しく知りたい人は下記記事が参考になるかと。buttonを使う最近見つけたのですが、Gutenberg系のカスタマイズはこちらを使用するのが最適解かと思います。通常のGutenbergではインライン装飾(ブロック内の一部の装飾)ができません。このプラグインを使うとインライン装飾が可能になります。開発者は日本人の方で、更新も頻繁に行われています。buttonの使い方は同ページのこちらに書いてあります。Gutenbergを使用すると色々なレイアウトが簡単に再現できます。これは「マークダウン?面倒で使ってらんねえやい!ガッテン!」っていう人に向いているプラグインです。詳しい使い方は別記事にまとめました。Gutenberg』使い方が、一応どんなことができるかというgifをいくつか載せておきます。アコーディオンアコーディオンはクリックで開閉するブロックです。コードなど記事を見る人みんながみんな必要とするわけではないくせにやたらスペースを取るものを格納するのに使えます。カウントアップ0から数字が指定した値まで繰り上がっていきます。そこまで汎用性は高くないのですが、LP用途の固定ページとかで数字での訴求がしたい時の演出として有効そう。タブ切り替えタブ切り替えが簡単に設置できます。タブの部分の背景色や文字色も当然変更できます。各種サービスの特徴などをまとめた記事などで役に立ちそう。ボタンの設置ボタンの設置も簡単に行えます。ホバーすると少し影が浮かぶアクションもデフォルトでついています(取り外し可能)し、背景色や文字色の変更、リンク付けも簡単にできます。他にも10種類以上の機能がGutenbergに追加されるので自分でカスタマイズするのが面倒だという場合にはオススメです。Gutenbergを使う手もありますが、Gutenbergにもデフォルトで様々な機能がついているのでそれらをCSSでカスタマイズする手もあります。Gutenbergエディターを魔改造カスタマイズしてみる詳しくは上記事にまとめてありますが、下で紹介するコードを追加CSSに入力すると、こんな機能が得られます。テーブルがレスポンシブでも綺麗に表示されるボタンがホバー時にふわっと浮くようになる「メディアと文章」ブロックの文章部分が吹き出しになる特定の背景色を選択すると適宜マークがつくこんな感じのことができるようになるよって分かるようなgifを貼っておきます。無料のWordPressテーマです。✒️たかさきしがないたかさきです。HTML/CSS/JS/PHP/Ruby/SQLちょっと書けます、Photoshopちょっと使えます。Vue勉強中、埼玉とか都内の勉強会良いのあれば教えてください〜。メディア売買経験あります、ミドルレベルでの検索結果1位何回か取ったことあります。キャンセル入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。内容をご確認の上、送信してください。お名前メールアドレス次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。👘CreatedBy。