グーテンベルク　ブロックを見やすくする方法 | 福岡のホームページ制作はマリオ君にお任せ

本日は、ワードプレス・グーテンベルクのブロックを見やすくする方法をご紹介させていただきます。

投稿する時にとても便利な機能、ワードプレスのグーテンベルク。
ブロックエディターとも呼ばれ、ブロックという単位で管理しているのが特徴です。

ん？ブロックという単位で管理している？

ブロックで管理という割にはブロックわかりずらくない？？
ということでわかりやすく線を引くことにしました。

グーテンベルクのブロックに線を入れる

前から、ブロック使いやすいけど見ずらいなと思っていて、見やすくできないかと思ってググって見ましたが、ヒットせず。

線を弾くだけだから、いいかと思い、デベロッパーツールでCSSをコピーしてちょいちょいっと。

すると

めっちゃ見やすいじゃん！！

めっちゃ使いやすいじゃん！！

てことで。
ブロックに線を入れる方法をご紹介させていただきます。

めっちゃ簡単です。

ブロックに線の入れ方

//管理画面で独自のCSSを読み込ませる
function add_admin_css() {
    wp_enqueue_style( 'my_admin_css', get_stylesheet_directory_uri() . '/css/wpkanri.css' );
}
add_action( 'admin_enqueue_scripts', 'add_admin_css' );

//管理画面で独自のCSSを読み込ませる

これを.functions.phpに貼り付けるだけで、自分の書いたCSSを反映させることができます。
wpkanri.cssというファイルを読み込んでいます。

変更するのは３行目で、cssというフォルダの中にwpkanri.cssを入れているので上記のパスになっています。こちらは、皆さんの環境にあったパス、お好きなファイル名に変更してください。

wpkanri.cssの中身はこちら

.editor-styles-wrapper .wp-block{
	
	border: 1px solid #DDD;
	padding: 12px;
	margin: 0 auto 20px;
	
}

ボーダーを入れてみました。
ボーダーだけでもいいのですが、少し見やすくpaddingとmarginを入れています。

paddingの12pxはカスタムHTMLを使用した時のtextareaのpaddingと同じ数字にしています。
※特に意味はありません。見やすくするため。

marginの下20pxはショートコードなどを連続で使用した際などにぴったりくっついて使いづらかったので入れています。

基本お好きなCSSをいれてもらって大丈夫です。

見やすさ重視だと赤とかでもいいかもですね。線を赤だとこんな感じになります。

入れてみた結果どうなったか

入れてみてわかったことはめちゃくちゃ使いやすいってことと、

一番は過去記事をみるとなんとめちゃくちゃなこと。

今まで見えずらかったもが見えるようになったので、必要のない段落や、文字の初めに改行が入っていたり、めちゃくちゃでした。

コードエディターとかソースをみて確認しておけばよかったのでしょうが、少しでも早く投稿ができるよう、コードエディターを使わずに、ブロックのみで書いていたのが仇になりました。

見つかるミスの数々

どの記事にもでるわでるわ、まるでGの様にミスが浮き彫りに。

３時間ぐらいかけて修正しました。

いかがでしたでしょうか。ブロック見ずらいなと思っているのは私だけ？

余計なものが入っていないか、チェックの為だけに一度線をいれてみるのもありかと思います。

以上がワードプレス・グーテンベルクのブロックを見やすくする方法になります。

それではまた。