使ってますかグーテンベルク。
classic editorですねそうですね。
わたしも古いインターネットの人なのでグーテンベルクにはどうにもなじめないんですが、「新入りは気に食わん」みたいな態度で居続けるわけにもいかないのでいいところを探して使っています。
このブログもグーテンベルクと向き合っていくための一環だったりします。
グーテンベルクちゃんはとっつきづらいですけども、こちらからちょっと歩み寄るととっても付き合いやすいいい子なので、今回はその付き合い方をお伝えします。
表示：エディタ表示画面を変える
ブロック表示でこれができるのが私が感じるグーテンベルクの最大の利点だと思ってます。
実際に表示されるページとほぼ同じ見た目にできる、というところ。
若干の専門知識が必要となりますが、以下のとおりにすればできます。バックアップとったうえ自己責任でどうぞ。
エディタ用cssを有効にする
function.phpに以下を追加。
function my_setup() {
add_theme_support( 'editor-styles' );
add_editor_style( 'css/editor.css' );
}
add_action( 'after_setup_theme', 'my_setup' );CSSを用意する
見出し、段落、表組などよく使うあたりのcssを移植してeditor.cssを用意します。
このサイトで使ってるのはこんなかんじ。
font-familyと見出し二つの最小限です。でもこの二つだけでもかなり違う感じ。
.wp-block{font-family: 'Noto Sans JP',sans-serif;
}
.block-editor-block-list__layout p{
font-size:16px }
h2{
padding:1rem !important;
border-left: 7px solid #4ab0d5;
margin-top: 4rem !important;
margin-bottom:2rem;
font-size:26px;
font-weight:bold;
}
h3 {
border-left: 4px solid #b7dfee;
padding:0.5rem 1rem 0.5rem 1rem !important;
color: #000;
margin-top: 4rem !important;
margin-bottom:1rem;
}エディタ画面がほぼ投稿後表示どおりに！
上記設定すませるとエディタがこんなかんじに！ ほとんど投稿後の見た目どおりで、編集できることに違和感すら感じるレベル……これで段落つかんで上下入れ替えなどもできるんだから最高ー。
入力：ちょっとだけマークダウンを覚える
ブログ記事など書いていて、グーテンベルクでとくにめんどくさいなーと思うのが見出しです。
ブロックで見出しボックスを選んで、そこからH2か3かを選んで…というマウス操作が増えるのがとってもストレス。
現在のグーテンベルクはマークダウン記法に対応してるので、見出しだけでもこれで書いてしまうととっても、とっても楽。
グーグルドキュメントなりメモ帳なりに書いた文章をグーテンベルクにコピペすれば見出しもリンクも対応済みになります。
（グーテンベルク自体の使いやすさからは目をそらしつつ）
マークダウン記法とは
プログラマが作った、文章に属性を簡単につけられるやつ。
詳しくはwikipedia
改行
行末で「半角スペース」を「2個」入力すると、改行されます。ブログ記事ではあまり使わないかも？
見出し
冒頭に「#」を入力することで、見出しを作ることができます。「#」の数で見出しの大きさを変えられます。
これができるとほんとに速度と心理的なしんどみが違う。
例）
#(半角スペース)今日の朝食
##(半角スペース)今日の朝食
###(半角スペース)今日の朝食リンク
リンクテキストと入力することで、指定したURLへリンクできるようになります。
例）
表記：[グーグル](google.com)表記：グーグル
グーテンベルクのよさ
このエディタは完全に「知らない」人が触るためのしかけがたくさんされていて、フリック入力のように一度なじめばいろんなやりたいことが「迷わずに」できるようになっていると考えています。
初心者を迷わせずに自分で操作させる、ことに特化しているので制作者などは無言でコードエディタに切り替えて使いがちですが、上記のように見た目の調整とマークダウンを使うことでグーテンベルクも悪くはないな……と思えるようになります。
新しい見た目のものからも逃げずに向かっていきましょうね。アラフォーの自戒でした。
こういうこともできるみたい
https://haniwaman.com/block-link-acf/
