プチ・ホームページサービス

カスタマイズTips

HTMLやCSSを編集するオリジナルのプチを作る方法です

ページトップに戻るリンクを設置する

ページトップにスクロールしながら戻るリンクを、ホームページ内に設置します。
設置可能な場所は、ホームページの右下、もしくは日記などの文章欄です。

1.「 座標指定によるオリジナルHTMLの配置 」にプログラムを追加します。

管理者ページに入り、カスタマイズページの「 座標指定によるオリジナルHTMLの配置 」を開いて、編集欄に以下の記述を追加します。

<script src='/assets/application.js' charset='utf-8'></script>
<script>
$(function() {
$('.btn-totop span').on('click', function () {
$('body, html').animate({ scrollTop: 0 }, 500); return false;
}); });
</script>

以上の編集が終わったら、ページ下の「 変更する 」ボタンを押します。

2.ページ最上部に戻るリンクを設置します

〜ホームページの右下に設置する場合〜

カスタマイズページの「 座標指定によるオリジナルHTMLの配置 」を開いて、編集欄に以下の記述を加えて保存します。

<div class='btn-totop'><span>TOPへ</span></div>

〜日記などの文章欄内に設置する場合〜

リンクを設置する記事の編集画面を開いて、文章欄に以下の記述を加えて保存します。

<div class='btn-totop'><span>TOPへ</span></div>

3.スタイルシートを追加します

カスタマイズページの「 CSSの追加 」を開いて、編集欄のいちばん下に以下の記述を加えます。
編集が終わったら、「変更する」ボタンを押して完了です。

.btn-totop { text-align: right; }
.btn-totop span:hover { cursor: pointer; }