vanillaice (Akira)

vanillaice (Akira)

みなさまには大変ご迷惑をおかけしております (*_ _)

● コンテンツをピン留めするJSとTwitterのウィジェットJSが衝突する件

を修正致しました。

Vanilla-Sky

サイドメニューにTwitterタイムライン等の埋め込みがある際に、英語圏で言うところの phantom scrolling 状態になっておりました。
ファントムスクロール。日本語ではなんて言うんですかね (´・ω・`)

公式は上書き済みです。
既にカスタマイズを行った方におかれましては、
申し訳ございません。今回は再DLでお願いしますー ( ̄∀ ̄;)
html, CSS, JS 全てに大幅な修正が入っています(特にJS)
いつもなら「ここにこれを追加してね。」「ここを変更してね。」とお伝えするところですが、
ご自身のカスタマイズを再現される方が楽ではないかと思います。
ごめんね (´・ω・`)

追記では Vanilla-Skyテンプレートの特徴としてお伝えしておくべき重要点がありますので、
ご利用中の方・ご利用検討中の方はぜひご一読ください。


ページ内スクロールとコンテンツピン留めの関係

コンテンツのピン留め
これは正式な名称がわかりませんので、ここでは便宜上こう呼ぶことにします。
他には「スクロールアンカー」「スティッキー」「スクロール固定メニュー」などの呼び方もあるかと思います。
私個人的には「スクロールアンカー」ですが、
「アンカー(碇)」という呼び方がこの記事では a(アンカー)タグによるページ遷移と混同しますので今回は「ピン留め」で。

一言で言うと
コンテンツピン留め と ページ内スクロール(whithin page link)及びページ遷移+オブジェクト移動(jump page link+whithin page link) との相性が非常に悪い
というのがお伝えすべき点です。

ピン留めの作用は スクロール範囲の制限 です。
Vanilla-Skyのカラム構成は以下の通り



赤がメインコンテンツ。右の青がサイドメニューです。
このコンテンツ(カラム)同士の 縦幅 がぴったり同じであることはまずありません。
ということは、マウススクロールを行うと短い方のコンテンツが先に画面上部に到達し、上に流れて画面からは居なくなります。
それを避けるために用いるのが「ピン留め」です。
いずれか一方にまだスクロール範囲が残っているのならば、短い方のコンテンツはその場でストップ。
これがピン留め。
つまりは スクロール制御 です。

一方「ページ内スクロール」ですが、
「#移動」 と言えば伝わるでしょうか。
通常の aタグ というのは「あるページから別のページに遷移」させるために用いますが、ページ内移動(ページ内スクロール)というのは、
同一ページ内の各オブジェクトに与えられているid名を目印に移動を行います(named anchor)。
それが ページ内オブジェクト移動
さらにページ遷移を行った直後に指定されたオブジェクトの位置までの頭出しを行う場合もあります。
それが ページ遷移+オブジェクト移動
以降はこの動作を総称して「アンカー」と称します。

アンカー後者の ページ遷移+オブジェクト移動に該当するのは

read more ボタンによる トップページから個別記事への遷移
= 個別記事に移動後、追記文頭までの頭出し。

プラグイン「最新コメント」クリックによる 現在地ページから該当コメント記事への移動
= 該当記事に遷移後、該当コメントまでの頭出し


などです。
上記の「ピン留め」の目的と「ページ内移動」のそれが 合致しない ことがご理解頂けますでしょうか。
移動をしたい アンカー(aタグ) と、制御したい ピン留め。
目的同士が共存できません(笑)

どうなるかというと、アンカーが移動させようとしているのにピン留めがそれを阻止しますので、
意図した位置までの頭出しができない
ということですね (´・ω・`)
ページTOP/ BOTTOM ボタンはどうかというと、ピン留め範囲の適用外ですので問題なく移動できます。
問題になるのはピン留め対象の「メインコンテンツ」と「サイドメニュー」です。




ここまでの説明を踏まえまして、ここからみなさんに選択をして頂きたいんです。
めんどっちいもの作っちゃってすみませんホント(笑)

① read more や コメントの頭出しに重きを置きたい方
コメント数が多い方なんかは該当するかもしれません。
そんなみなさんはスパっとピン留めの方を削除してください。
Ctrl+F(Windows)/ Command+F(Mac) キー検索

<script src="//blog-imgs-102.fc2.com/v/a/n/vanillaice000/flexstickmin.js"></script>


上記を 削除
続きましてその直下にある

<script>内容</script>


こちらも削除。
上下並び合わせて2行の削除です。


② ピン留めは必要だと思われる方
read moreでの移動を追記の頭ではなく本文の頭に変更してください。
コメントについてはあきらめる ←

<a href="<%topentry_link>#postscript">READ MORE</a>


緑の部分を 削除


③ 多少妥協しても両方必要
メイン・サイド共にピン留めする設定になっていますので、メインの方を解除してください。
メイン側のピン留めを諦めれば、サイドはピン留め・アンカーは正しい位置 という形になります。

$('#aside-container,#main-fit-wrapper')


緑の部分を 削除
記号の位置にご注意ください。
, は削除内容に含まれます。' は含まれません。


ピン留めを導入しなければこういった面倒にはならないのですが。
みなさんがご自分で導入するのはとても大変だと思います。
しかし機能を削除するのは簡単。
Deleteキーを押せばオッケー。
ということで導入しておきます。
そして基本的に公式プラグイン以外(共有・外部)に配慮した製作は行っておりませんし、これからも行いません。
Twitterウィジェットについては多くの方がご利用ですので対処致しました。
ご理解頂ければ幸いでございます。
関連記事

Comments 2

There are no comments yet.
よーきー  
テンプレについての質問

テンプレート【Basement】を使わせて頂いております。
技術的な質問なのですが個別ページの「関連記事」の上に画像を挿入したいと考えています。
テンプレートのどの部分に組み込めば良いでしょうか?
宜しくお願い致します。

2017/03/05 (Sun) 07:35 | EDIT | REPLY |   
Akira  
To よーきーさん

ありがとうございます ( ゚Д゚)ノ

こちらはご質問内容とは無関係な記事ですので、Basementテンプレートの専用記事へ移動をお願いします。
お返事もそちらでさせて頂きます。
よろしくお願いします。

http://vanillaice000.blog.fc2.com/blog-entry-443.html

2017/03/05 (Sun) 17:20 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い