あさくまろん

はてなブログで「ページトップへ」ボタンを設置する簡単な方法

f:id:asakumamasaru:20170712230542p:plain

はてなブログで「ページトップへ」ボタンを設置する簡単な方法っていう話。

メガダンサーのアサクママサルですぜ!!

ブログに「ページトップへ」戻るボタン設置してますか?

ボクは、設置していませんでした!!!!!

ボクが、毎日のように閲覧している「ポジ熊 (id:pojihiguma)」さんが、「目次へ」戻るボタンを設置していました。

ボクも「ページトップへ」戻るボタンを設置してやるぜ!!!

ということで、はてなブログで「ページトップへ」ボタンを設置する簡単な方法という話題で、話を進めていきますね。



はてなブログで「ページトップへ」ボタンを設置する簡単な方法

「あくあのーと (id:AquaNote)」さんのページに飛んで、「JQueryとHTML」のコードをコピーします。

パソコン版では、「デザイン」→「カスタマイズ」→「フッタ」に、コピーしたコードを貼り付けます。

スマホ版は、「デザイン」→「スマートフォン」→「フッタ」に、コピーしたコードを貼り付けますよ!!!



次に、「CSS」のコードをコピーします。

パソコン版では、「デザイン」→「カスタマイズ」→「デザインCSS」に、コピーしたコードを貼り付けますぜ!!!

スマホ版では、「デザイン」→「スマートフォン」→「ヘッダ」に、コピーしたコードを貼り付けマスラオコミッショナー!!!

<style type="text/css">
ここにテキストを入力
</style>

スマホ版は、もちろん「スタイルタグ」で囲ってから、コードを貼り付けますよ!!!



「ページトップへ」ボタンの細かい調整

「トップへ戻る」ボタンのサイズをいじりたいなら、「CSS」の数字を変えてみてください。

やってみたら、感覚的にわかってきますよ!!!

色の変更は、ブログいじりをされてる方が「ほぼ」皆さんご存じ!!のWEB色見本「原色大辞典」先生のページに行けば、好きな色が見つかるかと思います。



まとめ

どうでしたでしょうか?

「トップへ戻る」ボタンがあると、「ユーザービリティ」的にいいですよね。スクロールせずに「パッ」と上まで戻れますから!!!


トップへ戻る