こんにちは、さち です。
先日、スクフェス用のLvMAXに必要な経験値を計算するサイト
を作ってみたという記事を書きました。
サイトを作成する際、 jQuery Mobile を使ったのですが
そのときに、<div data-role="header"> の内容が
ページタイトルに反映されてしまうことに困りました。
今回は、その解決法について書いていきます。
<title>タグが上書きされてしまう
jQuery Mobile を使ってこんな感じに HTML を書きました。
<title> で「スクフェスLvMAX計算 - sachi-web」とページタイトルを指定
<div data-role="header"> でヘッダーとして「スクフェスLvMAX計算」と記述しました。
（data-role="header" はヘッダー領域を指定する jQuery Mobile 用の記述）
ブラウザで確認するとページタイトルは「スクフェスLvMAX計算」。
<title> で「スクフェスLvMAX計算 - sachi-web」と指定したのに
<div data-role="header"> で記述した「スクフェスLvMAX計算」になっています。
つまり、<title> で指定したページタイトルが
<div data-role="header"> の内容で上書きされてしまったのです。
これは jQuery Mobile の仕様。
「ヘッダーに表示するタイトル」と「ページタイトル」を別にするには
もう一つ別の記述が必要です。
解決方法
data-role="page" を記述した <div> に data-title 属性を追加。
そこに、改めて ページタイトル を記述します。
ページタイトル をヘッダーのものと別にできました。
この方法だと、
結局 <title> は作用してないから不要なのでは？とも思えますが
クローラ（検索エンジンのウェブページ収集ロボット）のために
残しておいた方がよいでしょう。
「contents」の中に「header」を入れる方法
「data-role="contents"」の中に「data-role="header"」を記述すると
ページタイトルが勝手に書き換えられないようです。
しかし、この方法では
contents の padding が header にも影響するため
ヘッダー部の周囲に微妙な隙間ができてしまいます。
また、現在の jQuery mobile では
「data-role="contents"」の代わりに「class="ui-content" role="main"」を用います。
つまり、記述方法自体が以前のバージョンと異なるのです。
以上の理由から
「data-role="contents"」の中に「data-role="header"」を記述するのは
控えた方が良いというのが私の個人的な見解です。
【参考サイト】
コメント