【WordPress】自分でブロックスタイルを追加する方法 【角つきラベル】

6 min

WordPress のブロックエディタではテーマで用意されたブロックのスタイルを適用できるので便利です。

自分で作ったブロックスタイルをワンボタンで使用できたら便利ですよね。ブロックスタイルを追加するのが意外と簡単だったのでやってみました。

ちょっとした見出しとして、マイクロコピーなどに使えそうなラベル(段落ブロック)のスタイルです。

実際のラベル

文字色とボーダーの色はブロックエディタから変更可能です。

通常のブロックと同じ用に段落ブロックを追加して、サイドバーからスタイルを適用できます。

「高度な設定」から追加CSSを手動で記述する必要がなくなるので、よく使うクラスなどをブロックスタイル化しておくと時短になるかもしれませんね。

検証したテーマ
  • THE SONIC

他テーマでも利用できますがズレたりするので修正が必要です。

新たにブログを始める・新しい移転先は ConoHa WINGがおすすめです。長期契約(12ヶ月〜36ヶ月)のWINGパックならTHE SONICを割引料金で使えますよ。

THE SONIC 7,800円 > 5,980円/年

WINGパックでTHE SONIC がお得!

サーバー料金も最大60%オフ

編集するファイル

FTPソフトなどを使って子テーマ内のファイルを編集します。

3つのファイルを編集
  • functions.php
  • style.css
  • editor-style.css

functions.php

functions.php ファイルにエラーがあるとWordPressの表示ができなくなりますので必ずバックアップを取って編集しましょう。

functions.php
/**
 * ブロックスタイル 見出し
 */
add_action( 'init', function() {

	register_block_style(
		'core/paragraph',
		[
			'name' => 'under-angle',
            'label' => '下部角ラベル'
		]
	);

    register_block_style(
		'core/paragraph',
		[
			'name' => 'top-angle',
            'label' => '上部角ラベル'
		]
    );

});

エディタ用のスタイルシート(editor-style.css)を読み込んでいない場合は

functions.php
/*
 * エディター用スタイルシート
 */
add_action( 'enqueue_block_editor_assets', function() {

    // ブラウザキャッシュを防ぐためのタイムスタンプ
    $time_stamp = date('mdgis');

    // エディター用のスタイル
    wp_enqueue_style( 'editor-style', get_stylesheet_directory_uri() . '/editor-style.css', [], $time_stamp );

}, 20 );

style.css

style.css
/*--------------------------------------
下線角ラベル
--------------------------------------*/
.is-style-under-angle {
    position: relative;
    border-radius: 0 0 32px 32px;
    border: 3px solid currentColor;
    border-top: transparent;
    min-width: fit-content;
    width: 25%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px 4px;
    font-weight: 900;
}

.is-style-under-angle::before {
    position: absolute;
    bottom: -16px;
    left: 50%;
    border: 3px solid currentColor;
    border-top: transparent;
    border-left: transparent;
    background: linear-gradient(-45deg, currentColor 50%,  transparent 50%, transparent );
    transform: rotate(45deg) translateX(-50%);
    width: 12px;
    height: 12px;
    content: "";
}

.is-style-under-angle.has-background {
    padding: 4px 16px;
    border-radius: 0 0 32px 32px;
}

/*上向き角ラベル*/
.is-style-top-angle {
    position: relative;
    border-radius: 32px 32px 0 0;
    border: 3px solid currentColor;
    border-bottom: transparent;
    min-width: fit-content;
    width: 25%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 16px 0;
    font-weight: 900;
}

.is-style-top-angle::before {
    position: absolute;
    top: -5px;
    left: 50%;
    border: 3px solid currentColor;
    border-bottom: transparent;
    border-right: transparent;
    background: linear-gradient(135deg, currentColor 50%,  transparent 50%, transparent );
    transform: rotate(45deg) translateX(-50%);
    width: 12px;
    height: 12px;
    content: "";
}

.is-style-top-angle.has-background {
    padding: 4px 16px;
    border-radius: 32px 32px 0 0;
}

下向きだけの場合は /*上向き角ラベル*/ の前までコピーしてください

editor-style.css

WordPressの投稿画面(ブロックエディタ)用のスタイルシートです。ファイルが存在しない場合は、子テーマ内に新しく editor-style.css を追加しましょう。(ファイル名はfunctions.phpで設定したものになります)

editor-style.css
/*--------------------------------------
下線角ラベル エディタ
--------------------------------------*/
.is-style-under-angle {
    position: relative;
    border: 3px solid currentColor;
    border-top: transparent;
    border-radius: 0 0 32px 32px;
    min-width: fit-content;
    width: 30%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
}

.is-style-under-angle::before {
    position: absolute;
    bottom: -13px;
    left: 50%;
    border: 3px solid currentColor;
    border-top: transparent;
    border-left: transparent;
    background: linear-gradient(-45deg, currentColor 50%,  transparent 50%, transparent );
    transform: rotate(45deg) translateX(-50%);
    width: 12px;
    height: 12px;
    content: "";
}

.is-style-under-angle.has-background {
    padding: 0 16px;
}

/*上向き角ラベル*/
.is-style-top-angle {
    position: relative;
    border-radius: 32px 32px 0 0;
    border: 3px solid currentColor;
    border-bottom: transparent;
    min-width: fit-content;
    width: 25%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
}

.is-style-top-angle::before {
    position: absolute;
    top: -5px;
    left: 50%;
    border: 3px solid currentColor;
    border-bottom: transparent;
    border-right: transparent;
    background: linear-gradient(135deg, currentColor 50%, transparent 50%, transparent );
    transform: rotate(45deg) translateX(-50%);
    width: 12px;
    height: 12px;
    content: "";
}

.is-style-top-angle.has-background {
    padding: 4px 16px;
    border-radius: 40px 40px 0 0;
}

下向きだけの場合は /*上向き角ラベル*/ の前までコピーしてください

追加したブロックスタイルの使い方

通常のブロックと同じように段落ブロックを追加後、右の サイドバー > ブロック からスタイルを適用できます。

文字、やボーダーの色はサイドバーの文字色から設定できます。ボーダーの色は文字と同色になります。

ラベルの位置は中央固定です。

参考になる記事

ブロックスタイルやカスタムブロックの追加方法はWordPressテーマ SWELL の開発者の了さん(@ddryo_loos)が丁寧に解説されており、分かりやすいです。

公式のハンドブック

ZIMA

気になるガジェットやサービスをレビュー!日常生活のアップデートを目標に役に立つ情報を掲載していきます。

仕事のご依頼などはお問い合わせからどうぞ。

FOLLOW

カテゴリー:
関連記事

コメントを残す

メールアドレスが公開されることはありません。