WP Demo

作成日 :

2-2.セクションの階層構造とデザイン

H2 セクションの階層構造と微インデント

H3 草枕 冒頭 – 游明朝

山路(やまみち)を登りながら、こう考えた。

H4

智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。

H5

住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

H6

人の世を作ったものは神でもなければ鬼でもない。やはり向う三軒両隣りにちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。あれば人でなしの国へ行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。

越す事のならぬ世が住みにくければ、住みにくい所をどれほどか、寛容(くつろげ)て、束の間の命を、束の間でも住みよくせねばならぬ。ここに詩人という天職が出来て、ここに画家という使命が降る。あらゆる芸術の士は人の世を長閑(のどか)にし、人の心を豊かにするが故に尊とい。

越す事のならぬ世が住みにくければ、住みにくい所をどれほどか、寛容(くつろげ)て、束の間の命を、束の間でも住みよくせねばならぬ。ここに詩人という天職が出来て、ここに画家という使命が降る。あらゆる芸術の士は… 略 …

<main>
  <article>
    <h1>
    <section>
      <h2>
      <p>
      <section>
        <h3>
        <p>
        <section>
          <h4>
          <p>
          <section>
            <h5>
            <p>
            <section>
              <h6>
              <pre>
                <code>
/* セクションの微インデント
 * クラス属性を持ち、かつ直下に h3~h6 を含んでいる section 要素 */
section:has(> h3)[class] > * + *:not(h3), 
section:has(> h4)[class] > * + *:not(h4),
section:has(> h5)[class] > * + *:not(h5),
section:has(> h6)[class] > * + *:not(h6) {
    margin-left: var(--wp--preset--spacing--step-1) !important;
}
COPY

見出しアイコン設定

functions.php に register_block_style 関数で登録し、エディタのUI にボタンを表示し、そのボタンから選択、クラス名を着脱して、CSSによるスタイルを表示する。サイドバーの高度な設定の追加 CSS クラスに追加される。

// // ブロックスタイル
function wp_test_register_block_styles() {
    … 略 …
    // ページタイトルアイコンを登録
    register_block_style(
        'core/post-title',
        array(
            'name'  => 'post-title-icon',
            'label' => 'ページタイトルアイコン',
        )
    );
    // 見出しアイコンを登録 ※ CSSセレクタによりH1~区別
    register_block_style(
        'core/heading',
        array(
            'name' => 'heading-icon',
            'label' => '見出しアイコン'
        )
    );
    … 略 …
}
add_action( 'init', 'wp_test_register_block_styles', 10 );
COPY
/* ページタイトルアイコン */
h1.is-style-post-title-icon::before {
    content: "";
    display: inline-block;
    background-color: yellowgreen;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    width: 25px;
    height: 25px;
    margin-right: 0.4em;
    vertical-align: bottom;
    -webkit-mask-image: url('./assets/images/svg/leaf.svg');
    mask-image: url('./assets/images/svg/leaf.svg');
}

/* 見出しアイコン */
/* 共用 */
.is-style-heading-icon::before {
    content: "";
    display: inline-block;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
/* h1 */
h1.is-style-heading-icon::before {
    width: 25px;
    height: 25px;
    margin-right: 0.4em;
    vertical-align: bottom;
    -webkit-mask-image: url('./assets/images/svg/leaf.svg');
    mask-image: url('./assets/images/svg/leaf.svg');
}
/* h2 */
h2.is-style-heading-icon::before {
    width: 23px;
    height: 23px;
    margin-right: 0.24em;
    vertical-align: sub;
    -webkit-mask-image: url('./assets/images/svg/pagelins.svg');
    mask-image: url('./assets/images/svg/pagelins.svg');
}
… 略 …
COPY