このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

jQuery Mobile:ページタイトルが勝手に書き変えられてしまう

このエントリーをはてなブックマークに追加
操作画面


こんにちは、さち です。

先日、スクフェス用の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"」を記述するのは
控えた方が良いというのが私の個人的な見解です。



【参考サイト】

   → jQuery Mobileで基本的なページを定義するには? - Build Insider



このエントリーをはてなブックマークに追加




ブログ移転に伴い、コメント受付は終了しました。



記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

2008-2019 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

ブログパーツ