人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

Chrome DevTools を使ってみよう (25) ページの先頭に戻るスイッチ(スクロールしない表示パーツ)

2017年 09月 09日
エキサイトブログのトップページは、スクロールしない表示パーツが2ヵ所使われています。 DevToolsを使って、これらの機能を調べます。 以下のリンク先をサンプルにしているので、Chrome DevToolsで開きながら読まれると、より判り易いと思います。



 スクロールしない表示パーツ 


トップページを中ほどまでスクロールダウンすると、最上部に横長でユーザーメニューのあるバーと、下部の右側に「↑PAGE TOP」のページの先頭に戻るスイッチが出ます。 ページの上半分を見ているとこれらは表示されず、中ほどから表示される演出は「script」によるもので、これはエキサイトの場合はユーザーアレンジで盛り込めない(有料会員なら別?)機能です。

「script」は別件として、これらの表示要素はスクロールされず、ウインドウの決まった場所に留まり続けます。 その構成は、ブログスキンのHTMLとCSSのアレンジとして利用できるものです。


 メニューバー 

表示された上部のメニューバーをターゲットとして、DevToolsを開いてみます。

Chrome DevTools を使ってみよう (25) ページの先頭に戻るスイッチ(スクロールしない表示パーツ)_a0349576_21264983.png

メニューバーは「.navHeader.is-scroll」という要素です。 Toolsの右ウインドウ(CSS)を見ると「position: fixed;」が、このバーをスクロールさせない配置指定です。「fixed」はウインドウの決まった場所に要素を固定表示させます。 背景画像を固定したり、このページの様に一部のパーツを固定にするデザインは、ほぼこれを利用しています。 最初は少し面白いが、目新しさだけに終わる様に感じて、私は余り使う気になりませんが、成否はセンスの問題と思います。

このページの場合は、本来はユーザーのブログへの入口画面でもあるので、下方向にスクロールした人も直ぐブログに入れる様に計らったデザインと思います。 まあ、途中からバーを出さず、最初から固定でも良いのですけど。


 ページの先頭に戻るスイッチ 

特にこちらは、ブログスキンに導入したい人は多いかも知れません。 こちらもページ途中から表示され(これは煩くなくて良い仕組みと思いますが、その仕組みは「script」で利用出来ません。 しかし、常にウインドウ隅に表示される形であれば、問題なく導入出来ます。 従って、ブログ画面の余白部分に邪魔にならない形で表示させるとか、コンパクトで意味の判るスイッチにするとか、半透過のデザインにするなど、ブログのデザインに合せた工夫の必要があると思います。

DevToolsで、この「↑PAGE TOP」のスイッチを調べてみます。

Chrome DevTools を使ってみよう (25) ページの先頭に戻るスイッチ(スクロールしない表示パーツ)_a0349576_21580803.png

このボタンは「.nav-pagetop」という要素で、やはり「position: fixed;」が指定されていて、「right: 20px; bottom: 20px;」の配置指定です。(上図はChrome画面の縦を狭めていますが、普通に拡げても「右下隅」の配置は変わりません)

このボタンの機能のミソは、Toolsの左ウインドウの「▶」をクリックして「.nav-pagetop」の中身を見ると判ります。

Chrome DevTools を使ってみよう (25) ページの先頭に戻るスイッチ(スクロールしない表示パーツ)_a0349576_22073232.png

中に「<a href="#wrapper">↑PAGE TOP</a>」というリンクが収められていて、「#wrapper」はこのページの全域を包む要素です。 このボタンをクリックすると、ブラウザはリンク先の「#wrapper」に飛びますが、その結果としてページを先頭から表示する事になります。 この様に全体を包む要素をリンク先に指定するのもOKですが、エキサイトヘッダー等の上端の要素をリンク先にしても同様の結果になります。

上図のTools左ウインドウ(HTML)を見ると、先の「メニューバー」も「↑PAGE TOP」スイッチも、このページを構成するHTMLの最後の方に置かれています。 これら「スクロールしない表示パーツ」は、他の要素に割り込んで邪魔になる場所でなければ、HTMLのどこに置いても問題はありません。

この事は、このスイッチを手本にして、自分のブログスキンのHTMLに独自のボタンの要素を書き込む場合の、参考になります。


 スイッチのHTMLとCSS 

このボタンの要素を発生させるHTMLと、それをデザインするCSSをToolsを使ってコピーしました。

HTML
<div class="nav-pagetop">
<a href="#wrapper">↑PAGE TOP</a>
</div>

CSS
.nav-pagetop {
position: fixed;
bottom: 20px;
right: 20px; }

.nav-pagetop a {
font-size: 1.2rem;
background: rgba(0, 0, 0, 0.8);
color: #fff !important;
padding: 10px;
border-radius: 5px;
display: inline-block;
transition: 0.2s; }

.nav-pagetop a:hover {
opacity: 0.6;
text-decoration: none; }

このデザインは、ブログスキンの「HTML全体」の適当な場所にHTMLを貼り付ける事と、「CSS」の最後など(適当な場所で良い)にCSSを貼り付ける事で、そのまま移植できます。

但し、リンク先の「#wrapper」だけは問題になります。 使用スキンでページ全体を包む要素が「#wrapper」なら使えますが、そんな名前の要素が上手い具合にあるとは限りません。 DevToolsで自ブログの構造を調べて、ページ全体を包む様な要素名(ID名やクラス名)を調べ、リンク先の「#wrapper」の部分を、それに書き換える必要があります。

また、ボタンの文字は「↑PAGE TOP」である必要はなく、別の「上へ」でも良く、記号文字「△」でも良いわけです。 これらはアイデア次第で、ページに適したデザインに出来ます。




この記事はカテゴリ「スキン編集」にトラックバックしています。



by Ataron | 2017-09-09 23:12 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。