スマホでページ内リンクが飛ばない不具合の対処法 ~ ウェブリブログで記事をカスタマイズ! ~

ウェブリ酷い

■スマホでページ内リンクが飛ばない不具合の対処



ブログの記事をカスタマイズするにあたって、何かと不具合の多いウェブリブログ。ウェブリブログだけではないでしょうが、運用側の不都合を強引に制限してしまうのはいかがなものでしょうか?

■スマホでページ内リンクが飛ばない原因


インターネットでいろいろと調べては見ましたが、見つかった情報はAndroidの仕様ばかり。Androidではページ内リンクは一度きりに制限されているそうです。

違うんです。ウェブリブログでは一度も飛ばないんです。

スマホ用プレビューのソースを見てみてわかりました。ウェブリブログではAタグのNAME属性は削除された状態で読込まれるのです。リンク先がなくなっているんだから、当然リンクは飛びません。

それではID属性を利用すれば? と思いましたが、ウェブリブログのスマホ版では全てのタグのID属性が削除される仕様のようで、DIVタグに入れたID属性も消えていました。さらに、AタグではCLASS属性も削除されます。

●不具合の現象


<a name="a-name" id="a-id" class="a-class">
<div id="div-id" class="div-class">

↓↓↓

<a>
<div class="div-class">


CLASS属性が削除されるのはAタグで、DIVタグでは削除されませんでした。しかし、おそらくはTABLEタグやLIタグを削除するのと同様なのでしょうが、ウェブリブログはなぜにこんなことをするのか?

ブログのレイアウトの崩れを防止するためなのかもしれませんが、かえって悪くなっています。

■不具合の対処


CSSはスマホでは使えませんし『スマホ版ブログにCSSを適用する方法』で解消できます)、ユーザーの記事がウェブリブログによって改変されてしまっているので、CSSでは対処できません。そこで、AタグにTITLE属性を定義し、スマホ用フリースペースにJavascript(JQuery)を使用します。

●対処法


ブログ本文
<!-- リンク元 -->
<a href="記事のURL#a-dest">

本文

<!-- リンク先 -->
<a id="a-dest" name="a-dest" title="a-dest">


スマホ用フリースペース
// JQueryライブラリの読み込み
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

// ページ内リンクのみを取得
$("a[href*=#]").click(function() {
// リンク先を取得してキーを切り出し
var sz = $(this).attr("href");
var key = sz.slice(sz.indexOf("#")+1);

// リンク先の位置を取得
var y = $("a[title='" + key + "']").offset().top;

// リンク先へ移動
$(window).scrollTop(y);

return false;
});

●解説


【リンク元】
リンク元は普通に記述します。ウェブリブログの仕様で、ページ内リンクでもURLが必要になります。#の後ろにリンク先のTITLE属性の名前を指定します。

【リンク先】
ブログ本文では、AタグのTITLE属性にNAME属性と同じ名前をつけておきます。NAME属性はPC版で必要なので残しておきます(PC版もスクリプトにすれば不要)。ID属性はHTML5への対応です。

【JQueryライブラリの読み込み】
ウェブリブログのスマホ版はHEADタグ内でカスタマイズしたJQueryライブラリを読込んでいますが、そのライブラリでは動作しなかったので、別途読込んでいます。

スマホであれば、ブラウザもHTML5対応と考えてバージョンは2.2.2を使用しています。旧ブラウザの互換性はなくして、動作を少しでも軽くします。

【ページ内リンクのみを取得】
外部リンクは問題ないので、ページ内リンクのみを取得します。ページ内リンクは"#"で指定されています。

HREF属性の中で"#"を含む文字列、ということで、「href*=#」としています。「*=」がワイルドカード指定です。

【リンク先を取得してキーを切り出し】
クリックされたリンクのHREF属性に定義されているURLを取り出し、"#"から後ろの文字列だけを切り出しています。この文字列がリンク先のTITLE属性に定義されている名前です。

【リンク先の位置を取得】
Aタグの中から切り出した名前と同じTITLE属性を持つタグを見つけ、オフセット位置を取得します。

【リンク先へ移動】
見つけたAタグにスクロールします。

【return false】
リンクをクリックした際の標準の動作は不要なので、キャンセルをしておきます。

●動作確認


右下の「ページトップに戻る」をクリックしてください。



■まとめ


・スマホではTABLEタグなどのレイアウトに影響するタグとともに、Aタグのキーとなる属性が削除される
NAME属性、ID属性、CLASS属性はAタグでは削除

・スマホでは全てのタグのID属性は削除される
・スマホでのページ内リンクはJavascriptで対処する

この記事へのコメント

この記事へのトラックバック