polo-web.com/WP
Lazy Blocks – 区切り線の作成

Lazy Blocks – 区切り線の作成

2025年3月4日
Lazy Blocks

一番簡単なhrでの区切り線を作成してみる。

下の画像で薄いグレーのラインが最初のブロックを入れた時に表示されるライン（プレビュー）になる。

hrタグ、HTML5から大きく仕様が変わっている。
今まで使えていた、線の色「color」や、線の長さを「width」などの属性は、HTML5以降廃止。
従って結論としてCSSで作成するしかない。

最初にhtmlのhrタグをこの中に入れることから開始する。ここではCSSを使っているので、hrタグに対してCSSでリイアウトを作成していく。

これがまず最初の作業になる。その後、PHPを作成していく手順になる。

目次

Lazy Blocksでの作業

左側：５つの項目を作成：
右側：SLUG：lazyblock/lesshrgreater：自分では何でこれか不明。なんでも良いので自分で作成してもよいと思う。
ICON：作成したブロックに近いイメージのアイコンを選択。
CATEGORY：Lazy Blocks
KEYWORDS：なし
DESCRIPTION：なし

線の種類

  • LABEL：線の種類
  • NAME：hr_select
  • TYPE：選択
  • CHOICES：実線-solid、立体線-3D-line、点線-dashed、二重線-double
  • ALLOW NULL：No
  • MULTIPLE：No
  • OUTPUT FORMAT：Value
  • DEFAULT VALUE：solid（上の実線のvalue=solid）、最初にこれが表示される。
  • HELP TEXT：なし
  • PLACEMENT：Inspector
  • GROUP：Default
  • REQUIRED：No
  • SAVE IN META

線の太さ

  • LABEL：線の肉太さ
  • NAME：polo_thickness
  • TYPE：数値
  • MINIMUM VALUE：1
  • MAXIMUM VALUE：10
  • STEP SIZE：1
  • PLACEHOLDER：なし
  • DEFAULT VALUE：1
  • HELP TEXT：なし
  • PLACEMENT：Inspector
  • GROUP：Default
  • REQUIRED：No
  • SAVE IN META：No

線の横幅

  • LABEL：線の横幅
  • NAME：polo_width
  • TYPE：数値
  • MINIMUM VALUE：10
  • MAXIMUM VALUE：100
  • STEP SIZE：10
  • PLACEHOLDER：なし
  • DEFAULT VALUE：100
  • HELP TEXT：なし
  • PLACEMENT：Inspector
  • GROUP：Default
  • REQUIRED：No
  • SAVE IN META：No

線のカラー

  • LABEL：カラー
  • NAME：polo_color
  • TYPE：カラーピッカー
  • ALONGSIDE TEXT：なし
  • ALPHA CHANNEL：No
  • COLOR PALETTE：Yes
  • OUTPUT FORMAT：Value
  • DEFAULT VALUE：#E5E5E5
  • HELP TEXT：なし
  • PLACEMENT：Inspector
  • GROUP：Default
  • REQUIRED：No
  • SAVE IN META：No

線の間隔（二重線）

  • LABEL：線の間隔
  • NAME：polo_line-spacing
  • TYPE：数値
  • MINIMUM VALUE：2
  • MAXIMUM VALUE：10
  • STEP SIZE：1
  • PLACEHOLDER：なし
  • DEFAULT VALUE：3
  • HELP TEXT：この間隔は二重線を選択した時のみ有効になる。
  • PLACEMENT：Inspector
  • GROUP：Default
  • REQUIRED：No
  • SAVE IN META：No

Code

OUTPUT METHOD：PHP
Single output code for Frontend and Editor：オン
CODE OUTPUT IN EDITOR：Display Always
Preview：現在の設定がプレビューされている。

<?php

$polo_solid_value = 'solid';
$polo_3Dline_value = '3D-line';
$polo_dashed_value = 'dashed';

if ($polo_solid_value == $attributes['hr_select']) {
    echo "<hr class='polo_solid' noshade>";
} elseif ($polo_3Dline_value == $attributes['hr_select']) {
    echo "<hr class='polo_linear-gradient'>";
} elseif ($polo_dashed_value == $attributes['hr_select']) {
    echo "<hr class='polo_dashed' noshade>";
} else {
    echo "<hr class='polo_double'>";
}

?>

<style>
    hr.polo_solid {
        border: none;
        border-top: <?php echo esc_html($attributes['polo_thickness']) ?>
            px solid;
        /*肉太さ*/
        border-color: <?php echo esc_html($attributes['polo_color']) ?>;
        /* borderだけだと上下の線がダブって表示されるので肉太くなる */
        width: <?php echo esc_html($attributes['polo_width']) ?>%;
        /* 画面幅の50%に横線を調整 */
    }

    hr.polo_linear-gradient {
        border: none;
        width: <?php echo esc_html($attributes['polo_width']) ?>%;
        height: <?php echo esc_html($attributes['polo_thickness']) ?>px;
        background: linear-gradient(0.25turn, white, <?php echo esc_html($attributes['polo_color']) ?>, white);
    }

    hr.polo_dashed {
        border: none;
        border-top: dashed
            <?php echo esc_html($attributes['polo_thickness']) ?>px
            <?php echo esc_html($attributes['polo_color']) ?>;
        background-color: transparent;
        width: <?php echo esc_html($attributes['polo_width']) ?>%;
    }

    /*二重線はdoubleでは間隔を調整できないのでborder-topになっている*/
    hr.polo_double {
        border: none;
        width: <?php echo esc_html($attributes['polo_width']) ?>%;
        border-top: <?php echo esc_html($attributes['polo_thickness']) ?>px solid
                <?php echo esc_html($attributes['polo_color']) ?>
        ;
        border-bottom: <?php echo esc_html($attributes['polo_thickness']) ?>px solid
                       <?php echo esc_html($attributes['polo_color']) ?>;
        height: <?php echo esc_html($attributes['polo_line-spacing']) ?>px;/*二重線の上下間隔*/
    }
</style>

ブロックに出来上がったアイコン

その他のコード記述例

こんな書き方もある：これをベースにLazy Blocksで設定していく。

<hr style="border:none; border-top:dashed 1px #ff0000; height:1px;color:#FFFFFF; width:500px;">;
echo '<hr style="border:none; border-top:dashed 1px #ff0000; height:1px;color:#FFFFFF; width:500px;">';