ひきこもり生活 ブログ 日記 ド底辺な日常('ω')

こんにちは、日々平凡なひきもりの日常生活をブログに載せていきます。

はてなブログ で良かったカスタマイズ 矢印でトップに戻る/記事内スムースクロール

IT技術 や インターネット環境の事柄は、全然まったく分からない…。いつも、見てるばかりや 検索とかばかりです。専門用語なんて、難しくて全く分かりません。

はてなブログに 参加してみて、参考になったウェブページ、良かったなぁと思った事柄載せてみます。
「へぇ~すごい」そういう事もできるのかぁ…。と 何を 見ても 驚く事ばかりです…。
実際に、同じように真似して、必要な部分を 貼り付けて 簡単に表示できました。

「矢印ボタン」設置で「ページのトップへ戻る/上に戻る」動作。スムーススクロールで動作。

ページを 読み進んでいくと、ぼわぁ~っと 「矢印ボタン」が 現れて、ボタンを押すと ススス~っと ページのトップに戻ってく ギミックです。

f:id:cyicyi-japan:20191031142343j:plainf:id:cyicyi-japan:20191031142346j:plain

  • 色の変更 や 透明度の変更 や スクロール速度 とか…色々と 変更できます。


すごく分かり易い方の記事を参考にして設置しました('ω')。

サイト記事内の「ステップ1 ⇒ ステップ2 ⇒ ステップ3」と 丁寧に 解説在りますので とても分かり易いです。
サイト記事内の「補足説明」の辺りを、じっくりと何度も読み返すと、色変更や透明度、スクロール速度とか 色々と解説してくれています。好みの数字に変えて 好みな感じに変更できます。

f:id:cyicyi-japan:20191031182237j:plainf:id:cyicyi-japan:20191031182244j:plainf:id:cyicyi-japan:20191031182240j:plain
ステップ1 ~ ステップ3 作業の流れ。

「ステップ1作業」での 2つの 要素部分は、筆者は 書き換えました。

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

目次 インデックス ページ内移動 スムーススクロール

目次 インデックス の項目を クリックをした時に、「見出し」へ移動するときに、瞬時に移動しますよね?これを、 ススス~っと スクロールして 移動してくれる 作成です。
どこまで 移動したのとか ものすごく わかりやすいので 真似してみました。
目次に「目次」の、題名が付きます。「background: 〇〇〇;」で、背景の色変更も 可能です。
サイト記事内の 「4.はてなの目次機能のカスタマイズを行う」内の「目次のカスタマイズ方法」に、作業手順が丁寧に解説してくれています。

参考にした サイトの方のWEBページになります。

f:id:cyicyi-japan:20191031191920j:plainf:id:cyicyi-japan:20191031191923j:plain

筆者しか、アクセスが全く無いのですが、自分で自分のページを見てても、こういう 動きは 面白いですね。
どうして そうなるのかは、きもじぃ には理解不能です。HTML とか CSS とか不思議です('ω')