ブログの右下あたりに鎮座しているこのアイコン。
慣れるともぉ手放せない!!
愛するボタンの設置方法デスん。
▼・ェ・▼ね。
「シンプル」を心掛けてブログ始めたのね?
ブログのデザインも文章も。
【 当初心掛けていたこと 】
- マウススクロールは少な目に
- サクッと読み終わることができる
- 知りたいことがすぐ見つけられる
- 要点を押さえて解りやすく
だからさ、最初の頃はサクサク絵日記状態でいけたよね。
ところがさ、ブログのデザイン変更してカスタマの記録つけ始めたらさ。
すんごい長くなったよね!!
マウススクロールとかさ、
昨日の記事で試してみたら、20回もクルクルしちゃったよ!?
まぁさ、前のデザインの時と比べると、
1枚あたりの画像表示がデカくなったってのと、
コピペ用のCSSのコードが死ぬほど長いってのがあるよね。
ぇ? 内容は浅いだろって?
お黙り!! ( ・ὢ・ ) オコッ!
てことでね?
「トップへ戻るボタン」を導入することにしたよ!(๑•̀ㅂ•́)و✧
今回の先生は、コチラ⇩
*リンク先消えました*
詳しい仕組みとか理屈とかを知りたい人は、
先生のところで、ためになる記事を読んでね!
コピペするコードは以下。⇩
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(function () { /** ページトップ処理 **/ // スクロールした場合 $(window).scroll(function() { // スクロール位置が200を超えた場合 if ($(this).scrollTop() > 200) { $('#pagetop').fadeIn(); } else { // ページトップへをフェードアウト $('#pagetop').fadeOut(); } }); // ページトップクリック $('#pagetop').click(function() { // ページトップへスクロール $('html, body').animate({ scrollTop: 0 }, 300); return false; }); })(jQuery); </script> <a id="pagetop" href="#top" class="page_top" style="display: none;">ページTOPへ ▲</a>
貼り付ける場所は、
「デザイン」⇨「カスタマイズ」⇨「フッタ」
ボタンの文字を変えたい時は、
一番下のコードの「ページTOPへ ▲」ってところで、
好きな文字に変えられるよ!
上の画像の赤い枠のところね。
もう一つコードを張り付けるよ!
コピペするコードは以下。▼
/* ページトップへ戻るボタン */ #pagetop { position:fixed; bottom:10px; right:10px; padding:10px 20px; color:#fff; font-size:20px; text-decoration:none; background:#000; } /* ページトップへ戻るボタン:ホバー時 */ #pagetop:hover { background:#e74c3c; }
貼り付ける場所は、
「デザイン」▶「カスタマイズ」▶「デザインCSS」
▼・ェ・▼はね、
font-family: "Meiryo",“arial unicode ms”;
っていうのを付け足して、フォントを変更したよ。
あと、ボタン自体の色も変更した!
うぇ~い! ٩(ˊᗜˋ*)و
先生ありがとうございましたー!
ボタンの位置を変更したいとかいう人は、
先生のところで詳しく説明してくれてるから、
教えてもらえばいいよ!
ってところで。
今日の改造は、これでおしまい!
゚*。.ღ ⊹⊱ £ονё & βLёss уoц ⊰⊹ ღ.。*゚
Thank you.
I love you.