Awesomeを使って超簡単コードコピペブログカスタマイズシェアするTwitterGoogle+Pocketこんにちは管理人のredoです。「はてなブログ」でHTML,CSSコードを使って”ページトップへ戻るボタン”を追加する方法をご紹介します。Yahoo!のTOPページにも最近はトップに戻るボタンが画面右下に自動設定されています。「SEO対策」としても有効です。「無料版はてなブログ」でも設定可能ですので、興味のある方は設定してみましょう。私のブログにもつい最近トップに戻るボタンを追加(画面右下)したのですが、文章を読み返したり、グローバルメニューで他のページを見たい時など便利ですね。今回、ご紹介するコードも詳しい内容が分からなくても、所定箇所にコード貼り付ければトップボタンの設定が可能です。はてなブログではデフォルトのデザイン設定によりCSSが効かない不具合もあるので、困っている方も多いようです。CSSが効かない場合の対策方法もあわせて紹介します。「はてなブログ」でCSSが効かない場合の対処法まとめトップへ戻るボタンとは?トップへ戻るボタンとは画面右下に配置されている上矢印などの”アイコンボタン”のことです。このボタンを設置することで、操作がしやすくなり、直帰率の減少などにも繋がります。公式ブログでは”TOPボタン”が配置されていることが多いです。src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>「jquery」をHead内に記入します。Awesomeのフォントアイコンを読み込めるように「href」を用いて指定のURLを読み込めるように記載します。});</script>上記コードを貼り付けましょう。Awesomeで探して設定しましょう。こちらは”ボタンアイコン”の形をFontAwesomeから読み込んで設定しています。Awesome」を紹介しています。#3f98ef;}上記コードをデザインCSSへ貼り付けましょう。ここでは、ボタンの配置場所や色を設定しています。ズラズラと書きましたが、分からない方はコードを指定の箇所にそのままコピペすればOKです。事前に元のコードは必ず保存しておきましょう。「はてなブログ」では元のデザイン設定とCSSがぶつかって、デザイン設定の優先度が高い為に「CSSが効かない」不具合が生じることがあります。TOPボタンの色を変えたい方は”color”の部分を自由にアレンジしてくださいTOPボタンの配置箇所を変えたい場合はbottom,rightのpx値を変更しましょう※rgba()の部分を書き換えることで、色変更が可能です。「はてなブログ」でCSSが効かない場合の対処法CSSがうまく機能しない場合の対処方法の一例を紹介します。デザイン設定の裏側のコードを書き換えるのは少し難易度があがるので、まずはデザイン設定は書き換えない前提での設定方法になります。「設定」→「カスタマイズ」→「フッター」のHTML記述欄に下記コードを貼り付けます。scrollTop:0},'slow');});徐々にアレンジして使いこなせるようになれば、自分だけのオリジナルなトップボタンも設定可能です。この様にjQuery,CSS,HTMLなどが自在に使えればWebデザインの幅が広がります。コードを書くときは特に「//」の部分の改行には気をつけましょう。改行位置によってプログラミングが効かなくなる場合があります。こちらは多くのWebデザイン事例があるので、辞典感覚で使えるので、オススメです。HTMLとCSSの入門書といえばこちらです。プログラミングへの抵抗感を減らすには良いです。ブログカスタマイズを紹介しています。Awesomeを使って超簡単コードコピペ広告を非表示にする関連記事2020-01-05収益面から「はてなブログ」と「WordPress」のメリット、デメリットを考える今日は「アフィリエイト」を考えている方や実際に行っている方...2020-01-02【ブログカスタマイズ】Youtube動画を劇的に軽くする方法を紹介!こんにちは管理人のredoです。今日はYoutube動画をブログに埋め...2019-12-18【ブログカスタマイズ】「はてなブログ」でサイドバーをお洒落にカスタマイズする方法を紹介こんにちはブログデザインを模索中の管理人のredoです。CSSとF...2019-12-03【ブログカスタマイズ】記事の”更新日”をHTML,CSSで自動実装する方法紹介!こんにちは管理人のredoです。普段は設計者としてアウトプットしていますが、趣味のアウトプットも始めました。型にはまらず幅広いジャンルや興味のあること(音楽,スポーツ,節約術,プログラミング)を中心に有益な情報発信をしていきます。(1)ブログランキングはてなブログをはじめよう!redo5151さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。