カスタマイズなしの状態

カスタムエレメントmf-related-keywordsを利用する。

コード

html

  <mf-related-keywords></mf-related-keywords>

レンダリング結果

表示言語の設定

カスタムエレメントの上位のエレメント(bodyでもよい)またはカスタムエレメント自体に 属性langを設定する。

コード

html

  <mf-related-keywords lang="ja"></mf-related-keywords>

レンダリング結果

ヘッダをcssでカスタマイズ

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .head-bycss .mf_finder_relatedkeywords_head {
    background-color: pink;
  }
  /* content をデフォルト(Related Keywords)から「関連キーワード」へ変更 */
  .head-bycss .mf_finder_relatedkeywords_head:before {
    content: "関連キーワード";
  }
  </style>

html

  <mf-related-keywords class="head-bycss"></mf-related-keywords>

レンダリング結果

ヘッダのテキストを属性「head-text」で指定

属性 head-textで指定する。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-head-text .mf_finder_relatedkeywords_head {
    background-color: pink;
  }
  /* content を空に */
  .my-head-text .mf_finder_relatedkeywords_head:before {
    content: "";
  }
  </style>

html

  <mf-related-keywords class="my-head-text" head-text="関連語"></mf-related-keywords>

レンダリング結果

ヘッダのコンテンツをカスタマイズする

スロット headでテンプレートをカスタマイズする。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-head-slot .my-dd-head {
    background-color: pink;
  }
  </style>

html

  <mf-related-keywords class="my-head-slot">
    <template slot="head">
      <!-- ヘッダの先頭にアイコン設置 -->
      <header class="my-dd-head">
        <img src="//c.marsflag.com/mf/img/mf_pwdb.gif">関連キーワード
      </header>
    </template>
  </mf-related-keywords>

レンダリング結果