カスタマイズなしの状態

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

コード

html

  <mf-keyword-ranking></mf-keyword-ranking>

レンダリング結果

表示言語の設定

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

コード

html

  <mf-keyword-ranking lang="ja"></mf-keyword-ranking>

レンダリング結果

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

コード

css追加

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

html

  <mf-keyword-ranking class="head-bycss"></mf-keyword-ranking>

レンダリング結果

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

コード

css追加

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

html

  <mf-keyword-ranking class="my-head-text" head-text="ホットキーワード"></mf-keyword-ranking>

レンダリング結果

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

コード

css追加

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

html

  <mf-keyword-ranking 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-keyword-ranking>

レンダリング結果