FC2ブログに「TOPへ戻るボタン」を設置するカスタマイズ方法

ホーム>ブログ>便利ワザ・アイテム・HTML・SEO対策>FC2ブログに「TOPへ戻るボタン」を設置するカスタマイズ方法


FC2ブログに「TOPへ戻るボタン」を設置するカスタマイズ方法


FC2ブログに「TOPへ戻るボタン」を設置。カスタマイズは簡単!


私が実装したFC2ブログカスタマイズ。今回は「TOPへ戻るボタン」について説明します。


前回の記事:FC2ブログのカスタマイズ - 文字をコピーされないようにする2つの方法


今回、「レスポンシブ対応」に伴うブログリニューアルで、TOPへ戻るボタンなるものを初めて設置しました。


なぜかといいますと、レスポンシブ対応のブログをスマホで閲覧する際には、PC画面だと横に表示されるプラグインが下に表示されることになります。すると、1ページあたりの縦の長さがもの凄いことになりかねません。

1番下まで見終わってから上に戻ろうとするのは大変ですよね。このままでは、レスポンシブ対応にしたことが読者さんの利便性を損ねる結果となってしまいます。


そこで、押せば一瞬で画面トップに戻れるボタンはレスポンシブには必須のアイテムだと考えるに至った訳です。


ちなみに、読者さんの「利便性」を考えた場合、TOPへ戻るボタンはどんなものが望ましいのでしょうか?


画面をスクロールせずにスルスルっとトップ画面へ戻ることが目的のボタンですから、邪魔になってもいけないし、画面がある程度スクロールされたらふわっと表示されていつでも戻れるようにしたいものですね。


結論として、設置するボタンの条件を次のように定めました。


  • ①画面がある段階まで下にスクロールされたらふわっと表示される
  • ②スクロールに合わせて追尾する
  • ③レスポンシブに対応している


この3条件を備えるには、さぞかし難しいカスタマイズ技術が必要なのでは?と思いました。しかし、いざ調べてみると、ど素人の私でもすぐ設置できてしまうほどの至って簡単なものでした。


それではさっそく、FC2ブログに「TOPへ戻るボタン」を設置するカスタマイズ方法を見ていきたいと思います。



実装手順


TOPへ戻るボタン」を設置する実装手順は以下の通り。


  • ①ボタンをマークアップ
  • ②ボタンの見た目を整える
  • ③スクロールとクリックに関するスクリプトを記述する


たったこれだけ。簡単に行きましょう。


①ボタンをマークアップする


ボタンを配置するには、フッターの下にこのような記述をします。


<p id="page-top"><a href="#">PAGE TOP</a></p>


②ボタンの見た目を整える


CSSは下記のように記述。「position: fixed;」で位置を固定しています。


#page-top {
    position: fixed;
    bottom: 120px;
    right: 20px;
    font-size: 75%;
}
 
#page-top a {
    display: block;
    background: #33ccff;
    color: #fff;
    width: 70px;
    padding: 25px 0;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
}
 
#page-top a:hover {
    background: #999;
    text-decoration: none;
}


私のブログの場合、フッダー部分にグローバルメニューがあるので、そこに重ならないよう通常よりも少し上にボタンを設置しました。位置についてはそれぞれのブログに合わせて調整してください。


③スクロールとクリックに関するスクリプトを記述する


jQueryで書いていきます。あらかじめjQueryを読み込んでいることが前提条件ですね。



$(function () {
    var topBtn = $('#page-top');
    topBtn.hide();
    //スクロールが500に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 500) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スルスルっとスクロールでトップへもどる
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});


まず、ボタンをマークアップしておいたidの#page-topを指定しておきます。


次に、スクロールの処理です。最初にボタンは隠しておくのでtopBtn.hide(); を先に書いておき、スクロールが500pxに達したらボタンを表示するための記述をします。なお、数字は変更可能なので表示させたい位置に指定出来ます。


最後に、クリックした時の処理をスクロールの処理の下に書いていきます。アニメーションでスルスルっとトップに戻る処理ですね。数字は戻る速さですので、お好みで調整して下さい。


まとめ


いかがでしょうか?手順自体は至って簡単かと思います。この記事に書いたソースをそのままコピペすれば数分で作業完了ですね。


しかし、当ブログは右クリックと文字のコピーが出来ないようにカスタマイズをしたため、初心者の方には大変かも知れません(汗)


この記事で書かれたソースをそのままコピペして使いたいのであれば、Googleクロームの「設定」をクリックして「詳細設定」をさらにクリックして下さい。「プライバシー」という部分にある「コンテンツの設定」をさらにクリックすると「すべてのサイトに対してJavaScriptの実行を許可しない」という項目が表れますので、これをチェックすればコピペ出来るようになります。


» あなたのサイトのURL、そろそろスリムにしませんか?


今日も、「ゆうらり」に来てくれてありがとうございます。

▼がん患者さんやそのご家族のかた
• ブログ村 胃がん はこちら

▼がん患者さん
• 人気ブログランキング はこちら

▼それ以外のかた
• FC2 ブログランキング はこちら




data-matched-content-ui-type="image_card_sidebyside"
がんになったら...がんの治療を始める前に知っておきたい/読んでおきたい本


 抗がん剤投与の副作用や後遺症によって
 失われる可能性のある機能や症状について
 必要な情報が書かれてある本をまとめました。
 
       
使える!おすすめレシピ本


 実際に私が使ってみて良かったレシピ本を
 まとめてみました
                     
おすすめ無料アプリ<がん関連>
おすすめ無料アプリ<糖質関連>
おすすめゲームアプリ<将棋・麻雀>


 私が趣味で使ってる将棋・麻雀の
 おすすめアプリです!

 プロ将棋界の公式戦をリアルタイムな解説と
 関連レポート付きでみることが出来ます。  
 全国の人とオンライン対局が出来る
 将棋倶楽部24のアプリバージョン。  
 実はこの私。麻雀も強いんです!
 現在は「雀仙四段」  
麻雀 昇龍神DX
120円
(2017.09.06時点)
posted with ポチレバ
人気記事一覧(2016.9.1~2017.8.31)


 アクセス数が多かった記事をまとめてみました

 第1位
【癌】になる人、ならない人 | 国立がん研究センター の調査結果で明らかに!がん予防 について最低限知っておくべき3つのこと

 第2位
癌 の 再発 ・ 転移 の時期 | 胃癌 と 骨転移 の見過されがちな関係と危険性について語ります

 第3位
【Jアラートは無意味⁉︎】北朝鮮が弾道ミサイル発射!3段式に進化したようですが | 気にせず七草粥

 第4位
この方法で【インスタントラーメン を10倍美味しく食べるコツ】を学べます

 第5位
胃がん、症状、あるある | 出先 で調子が悪いとき!

 第6位
ステージ4【末期がん】患者の8割が「糖質制限」で改善!? 衝撃の研究結果 | その信憑性は!?

 第7位
胃がん で全摘した【胃の大切さ】を改めて思う | 食後 の 眠気・目まい・ダンピング を治すのも楽じゃない!

 第8位
本当は恐い 胃がん 術後 の タバコ 【喫煙・喫煙率】は? | 今日から 禁煙 します

 第9位
胃がん【術後 の 旅行】について | 宿の決め方や旅先での注意点について最低限知っておくべき5つのポイント

 第10位
胃がん 術後 の【るいそう】は悪化の一途 | 体重減少 はどこまで 許容範囲 なのか...

 第11位
胃がん ブロガー さんの - 予約 投稿 - という形の『遺書』について

 第12位
清算型遺贈と登記

 第13位
【癌患者 の 予後不良】とまわりの対応の変化 | 誰が殺した!?癌 と 孤独死

 第14位
【必読】訂正後の - 障害年金 用 診断書 - を入手 | 緊急レポート

 第15位
時期が来たので『痛い【硬膜外麻酔】の恐怖と 帯状疱疹 | 脊髄注射を思い出させた 夜間低血糖/足の痛み』を語ります

 第16位
胃がん 運命の 検査結果 悲惨な末路…

 第17位
【胃がん】の発覚から 術後1年 までの経緯 - こうして私は克服しました | プロローグ

 第18位
胃がん ちょっとヤバいかも!?加速する絶不調が僕を苦しめる

 第19位
胃がん 体重 減少 - 食べても食べても 痩せる ばかり - ストレス...悪くないですね...フフ...

 第20位
気づいてますか?【胃がん】手術後の『トイレ 事情』と『ダンピング症候群・低血糖』との関連性





本ブログへのリンクは
ご自由にお願いします



Messageを見る


はじめまして!!Мです。

仕事は、法律関係の傍らで
派遣業務や、
不動産のアウトソーシング事業を
かけもちしています。

ブログをリニューアルオープン
しました。
よろしくお願いします!!

仕事一筋で走り続けてきた
人生でしたが、
2011年終わりに38歳の若さで、
ほぼ末期の
胃がん宣告を受けました。

がんが発見された時は、
不治の病の領域にまで
達しており、
何度か

『死』

を覚悟しましたが、
幸いにも手術は成功し、
奇跡的に
踏みとどまる事が出来ました!!

しかし、病状が重かったため、
後遺症や再発の不安等、
悩みは尽きません。

したがって、
いつ人生の終焉が訪れるか
分かりませんが、
善意ある方々の
ご厚意に囲まれ、
幸せな日々を送っています!!

とりあえずは
出来る事から少しずつ。

仕事も、
しばらくの間は部下に任せて
頑張り過ぎないように
働いてます。

【ブログを始めたきっかけ】

国民の2人に1人の割合で
発症しているとされる

がん


現在では、
インターネットの普及や
たくさんの書籍により、
患者自身で
有用な情報収集が可能な時代に
なりました。

しかし、自分が「がん宣告」
を受けた時、
情報はたくさんあっても
何をどうすれば良いか
全く分からず、
大変な苦労や、
あれやこれをしておけば
良かったのに・・・と
とても後悔しました。

なぜなら、がん宣告を受けても、
自覚症状がなかったせいか、
生まれてこのかた
殆ど病気らしい病気を
一つも経験したことのなかった
自分としては、
なかなか自身のこととして
受け入れることが出来ず、
「本当なの?」
と疑心暗鬼に
陥ってしまっていたため、
その時に動こうとしても、

冷静な情報収集が

行えなかった


からです。

今、痛感していることは、

『その時が来てから

では遅い!!』
です!!


そこで、
自分の実体験や実体験を通して
知れ得た有益な情報を
ブログを通じて
発信することにより、
少しでも同じ様な境遇にある方々の
一助となれば、
と思い至りました。

また、今は健康でも
将来の備えとして
有益と思った情報も
載せていきますので、
健康な方も
突然の病に慌てることのないよう
ご参考として頂ければ
と思います。

ただし、自分自身
多趣味で浪費家?
でもあるので、
色々思ったことは
赤裸々に書いていきます!!

アニバーサリー

本日は、私の術後
です୧(๑•̀⌄•́๑)૭

リンク

◆国立がん研究センター
 『がん情報サービス』
それぞれのがんの解説
日常生活の助けとなる情報
がんの原因や予防について

◆がんで困ったときの工夫、治療法
患者と家族の闘病記|ブログ村

◆闘病中の患者や、ご家族の話し
がん症状、治療|ブログランキング

◆さまざまな病気や症状の悩みごと
最新情報|FC2 ブログランキング

Amazon タイムセール情報

My Channel


FC2 ブログランキング

[ジャンルランキング]
ブログ
79位
アクセスランキングを見る>>
[サブジャンルランキング]
社長ブログ
2位
アクセスランキングを見る>>

カレンダー別記事


01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -

検索フォーム

Contakt 

コメント

免責・問題を報告

PAGE TOP