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

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

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

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Windows:スリープ復帰時のパスワード入力をやめる (12/07)
  • Windows:ミス激減!チェックボックスでファイルを複数選択する (12/05)
  • Amazon:スマホでPC版サイトを開いたらスマホ版に戻れなくなった (12/02)
  • Windows:アプリの音量が勝手に変更される (11/30)
  • かしこいかわいい新PC「エリーチカ」がやってきた(時々ポンコツ) (11/28)
  • 管理人より
    2000万アクセス突破しました。ありがとうございます。

    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








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




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





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

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

    ブログパーツ