vanillaice (Akira)

vanillaice (Akira)

ページ内スクロール あるいは
ページ内オブジェクト移動 というのは
通常はリンクをクリックすると別ページへジャンプすることになりますが
別ページに移動させず 現在開いているページ内で 位置の移動(オブジェクト移動)させることを言います

テンプレートの右下あたりに top へ戻るボタンなどがついている場合がありますよね
クリックするとページの最上部に移動します
コンテンツが長文の場合などに一発で上部まで戻れて大変便利です
このボタンを押した際に スルスル~っと滑らかにスクロールするもの(スムーススクロールと言います)と
パっと瞬時に移動するものとがありますが
前者は スムーススクロールのためのJSコードが記載されている場合にのみ有効です
JS記述が無ければ滑らかな移動はできません
(ちなみに「スムース」というカナ表記の方が英語発音的に近いですが「スムーズ」と表記することもあります)

スムーススクロール用のJSコードはこれです という記事内容ではありません

そちらを期待された方はごめんなさい ^^;
私のテンプレートではスムーススクロール用の記述は既に含まれていますので
それを利用した ページ内スクロールの使い方 というのが本旨です
ハウツーを目的としたブログではありませんので
他製作者様テンプレへの適用のご質問 JSコード内容のご質問についてはお受けできません
すみませんです (*_ _)


動作サンプル



オブジェクト1への移動 (クリック)

オブジェクト2への移動 (クリック)

オブジェクト3への移動 (クリック)



これはオブジェクト1です
見出しへ戻る(クリック)





これはオブジェクト2です
見出しへ戻る(クリック)




これはオブジェクト3です
見出しへ戻る(クリック)



見出し下のリンクから各オブジェクトへ移動
各オブジェクトから見出しの頭出しまで移動
という動作サンプルです



動作の仕組み


ページ内スクロールも リンク を用いて行います
通常のリンクというのはこういったものです ↓

<a href="ページアドレス">表示テキストあるいは画像</a>


緑の「ページアドレス」は http:// あるいは https:// から始まるページアドレス(画像アドレス含む)です
これが一般的な「ページ遷移を行うためのアンカー」です
(アンカーとはリンクさせるための
<a>
というhtmlタグのことです)

ページ内スクロールを行うには ページの遷移先を指定するのではなく
対象オブジェクト(移動目標位置)の ID名 を指定します

<a href="#ID名">表示テキストあるいは画像</a>


ですから 移動目的となるオブジェクトには ID名を与えておく 必要があります
IDやクラスの意味がわからない方はLet's google it (ググッてね) ╭( ・ㅂ・)و ̑̑



実装コードの例


本ページの動作サンプルを例にとります

● 見出しの部分

<div id="sampletop" style="border-left: 6px solid red; padding: .5em">動作サンプル</div>


style属性の部分は見出し横の赤いボーダーの見た目をCSS整形しています
赤ボーダー不要ならば

<div id="sampletop">動作サンプル</div>


これでOKです
style属性はテキストリンクなどの「見た目」を指定していると思ってください
ページ内スクロールのみであれば style以降は不要です

divタグに sampletop というIDを与えています
各オブジェクトから この見出しの頭に戻れるように設定します


● オブジェクト1へ移動させるためのテキストリンク

例)


<a href="#object1" style="color: rgb(135, 206, 250);">オブジェクト1への移動 (クリック)</a>


緑色の部分は 移動対象オブジェクトに与えられているID名 を記載します
a href での指定 = 移動先オブフェクトのID名 ということです
# ← このハッシュ(シャープ)がID名であることを表しています
ページ内リンクではクラス名は使いません(特殊なJqueryプラグインでクラスを移動に使えるようにするものもありますが 通常の仕様ではクラス名はNGです)
クラス名を意味する記号は 名称の前にハッシュではなく ドット(.) を用います
これは通常のCSSと同じルールです


● オブジェクト1 (「見出しへ戻る」のリンクなし)

<div id="object1" style="background-color: rgb(135, 206, 250); text-align: center; color: white; padding: 15px;">これはオブジェクト1です</div>


これが移動対象となったオブジェクト1です
divタグに object1 というID名が与えられています


● 見出しへ戻るためのテキストリンク

<a href="#sampletop" style="color: white; text-decoration: underline;">見出しへ戻る(クリック)</a>


a hrefで移動先の見出しである sampletop を指定します



頭出しの具体的な位置と固定ナビゲーションとの関係


<div>〜</div>
で挟まれた要素の 上辺 を基準とします

テンプレート内のナビゲーションが 固定 になっている場合がありますよね
スクロールしてもナビが上に上がって行かずに 上部に固定されている こういったもの ↓




必ずしもナビゲーションとは限りませんが
なにせ ページ上部に固定されるもの
これがあると ページ内移動の頭出し位置が狂ってしまいます
ナビゲーションの縦幅が50pxであるのならば
50px下に頭を持って来ないと オブジェクトの50px分が隠れてしまいます
画面の上辺と頭の位置が同じ = 上にナビが乗っかる
という物理上の仕組みです

私のテンプレートではナビが固定されている場合のことも考慮してJSを書いていますので
頭出しの位置がズレることは起こりませんが
それは「ページ内」スクロールであった場合のみです
ページ内移動の他にも
ページ遷移+オブジェクト移動 というのがありますよね
一番わかりやすいのは 公式プラグインの「最新コメント」
コメントをクリックすると 該当ページへ遷移し かつ 該当コメントの頭が画面TOP位置になるようオブジェクト移動します
この場合には頭出しがズレます
テンプレート内のコメントに関しては私の方でズレを調整していますが
みなさんが記事内でページ移動用オブジェクトを設定し このズレ現象を回避したい場合には
そのためのJSをさらに組むか あるいは CSSで調整するか…
それが結構難しいと思うんです (´・ω・`)
もう下手にやらん方が良い… と思う(笑)
なので今回は ページ遷移+オブジェクト移動 についてはスルーで ←
ただ こういったことが起こりますよ というのは知っておいてくださいね

ちなみに「FC2検索バー」をご利用の方はどうしたってズレますよ(私の方で対処しているものであってもズレます)
あれも固定要素ですからね (´・ω・`)
なのでいつも「非表示推奨」としつこく言っています(笑)



どこからどこまでをdivで挟むのか


例えばこんな ↓


ここをクリックするとオブジェクトへ移動



これがオブジェクトです
説明文やらなんやら
いろいろ書いてあって
複数行にまたがっています




上記のような場合
これがオブジェクト〜〜〜またがっています
のどこからどこまでを
<div>〜</div>
で囲えば良いか
なんですけども
構文的にはこれが一番良いでしょうね ↓

<div id="名称">これがオブジェクトです
説明文やらなんやら
いろいろ書いてあって
複数行にまたがっています</div>


ただこの移動については 頭が一行あれば事足りますので
こういうやり方もあります(構文的には美しくない)

<div id="名称">これがオブジェクトです</div>
説明文やらなんやら
いろいろ書いてあって
複数行にまたがっています


もっと極端なこと言うと これでも良いです ↓

<div id="名称"></div>
これがオブジェクトです
説明文やらなんやら
いろいろ書いてあって
複数行にまたがっています


ただこれだと1行分下がりますわね (´・ω・`)
それが嫌な場合は divで改行せずに こうやって書く ↓

<div id="名称"></div>これがオブジェクトです
説明文やらなんやら
いろいろ書いてあって
複数行にまたがっています



これなんでか説明すると話しがあっちゃこっちゃと難解になるので今回はサラっと ^^;
「初心者です… ( ̄∀ ̄;)」
というご自覚のある方は 最後の方式を取られると良いと思います
(メンテナンスしやすかろう という意味で)



プラグインとの動作バッティング(衝突)


この「スムーススクロール」を導入することによってよく衝突するのは
展開型(開閉型)プラグイン です
カテゴリ一覧やアーカイブといった 縦に内容が長くなりそうなものを折りたたんでおくタイプ

比較的古い(リリース時期のことです)プラグインは開閉動作にアンカータグの
<a>
を用いて
それを動作トリガー(きっかけ, 合図)にしていることが多いです
ところがアンカータグというのは 他でもトリガーとして使われやすいタグでもあります
今回のスムーススクロールなどがそうです
そして バッティングする展開型プラグインは

<a rel="トリガー名">


こういった形でトリガー部分のコードを組んでいることが多いです
rel属性というのは現在のweb標準であるhtml5に於いて その値は固定化されています
今までのようにコーダーが好き勝手に名称をつけることは許可されていません
上記の事実とアンカータグが他と干渉しやすい点とを考えると
アンカーを利用した展開を行うプラグインは避けた方が賢明だと思います

展開するはずのクリックが 開かずにページ上部へ移動してしまう時
そのテンプレにスムーススクロールが導入されているのであれば
十中八九衝突しています



最後に


良い面ばかり書いてもアレなんで…
専門家の中には「ページ内リンクなど使うべきではない」
という方もいらっしゃるんですよね (´・ω・`)
一応そういう方のご主張を掲載しておきます

英文(原文)
Avoid Within-Page Links/ JAKOB NIELSEN

日本語訳
ページ内リンクの使用は避けよう/ ニールセン博士


2006年筆ということでちょっと情報としては古いのですが
こう考える方もおられますよ という参考です
個人的には「あれば便利ってより 無いと不便だと思うー (´・ω・`)」
って感じでしょうか
そこはもう人それぞれ ヽ(´`)/


==========

ご質問はお気軽にどうぞ
但し先にお願いした件はお守りくださいね
お答えできるのは私のテンプレートをご利用の方のみです
(他製作者様テンプレでの動作保障も責任も負いかねます またソースを開いて見ることも致しません)
よろしくお願いします
関連記事

Comments 9

There are no comments yet.
よっこ  
こんばんは!

いつもAkiraさんのテンプレートを使わせてもらってます!
ページ内移動は特別なことをしないとできないと思っていたのでできると知って嬉しいです。
最初ちょっと失敗しましたが直せたと思いますw
ひとつ聞いてもいいでしょうか?
Akiraさんのテンプレートが出るたびに変えているんですがSEOに問題はありますでしょうか?
過疎ブログなので心配することもないんですけどねw
ちょっと気になったので教えてください!
よろしくお願いします!

2016/09/05 (Mon) 20:11 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2016/09/06 (Tue) 09:06 | EDIT | REPLY |   
Akira  
To よっこさん

ありがとうございます

継続して私のテンプレをお使い頂いている、ということで、
SEOに強く結びつくhead情報はどれもほぼ同じです。
現状でご納得頂けているのであれば、特に問題になることはないかと思います。
ただあんまりコロコロ変えると閲覧される方が戸惑われないかと、それだけ心配 ^^;

2016/09/06 (Tue) 09:40 | EDIT | REPLY |   
Akira  
To Fieldsスライドの件 内緒さん

ご迷惑おかけしております (*_ _)
Fields専用ページに移動をお願いします。
もしかしたら同症状の方がおみえになるかもしれません。

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

お手数おかけします。

2016/09/06 (Tue) 09:42 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2016/09/07 (Wed) 13:55 | EDIT | REPLY |   
Akira  
To Fieldsスライダーの件 内緒さん

うーん。なにかしら不安定なんでしょうかね (´・ω・`)
私の方ではやはり問題は無いようです。
継続するようでしたら、Fieldsページのコメント欄に手順を書いてありますので、
一度お試し頂いた上でお知らせください。
よろしくお願いします。

2016/09/08 (Thu) 11:33 | EDIT | REPLY |   
よっこ  
To Akiraさん

ありがとうございます!
あんまりコロコロ変えると←Akiraさんのテンプレートはわかりやすいし使いやすいので大丈夫だと思いますw
特にスマフォの入力がよく考えられていて好評ですよ〜!
これからもよろしくお願いします!

2016/09/08 (Thu) 20:41 | EDIT | REPLY |   
ミカ  
『All-about-us』のカスタマイズについて

こんばんは。はじめまして。

私は、文章のみのブログを書いております。
All-about-usの雰囲気が好きで、こちらを使わせて頂きたいのですが、
画像のないブログなので、topページの画像スペース部分を消す?ことは出来ないでしょうか?

すみません。せっかくのデザインですのに...消したいなどと...

もし、可能であれば、よろしくお願いします。

2016/09/08 (Thu) 21:27 | EDIT | REPLY |   
Akira  
To ミカさん

ありがとうございます
All-about-usの専用ページに移動をお願いします。
お手数おかけします。

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

2016/09/08 (Thu) 23:33 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
該当テンプレートの専用記事にお願いします。無関係な記事でのコメントはお控えください。
テンプレートカテゴリ