ブログをちょっぴりカスタマイズしてみました。
一難去ってまた一難!
スギが終わればヒノキが参る!
えっ後でイネも来るって?もうやめてよ~!
どうも花粉症に苛まれ続け苦し紛れにアニメの次回予告風にしたところで目が痒いのは治らないタイプのもこたです!症状が軽くなったからって油断しちゃだめですね。どうぞよろしくおねがいします!今日ゴミ出しに行っただけなんだけどな。
何が変わったか分からないようなカスタマイズですが
頑張った気になったのでメモしておきます。
カテゴリ表示つけた
サイドバーのところです。(1)を無くしたい。
リンク貼った
おなじくサイドバーのところです。
なんとなく貼りたいやつ貼りました。
英語表記にした
ちょっと大人になったでしょ?
トップにスクロールして戻ってくれるボタンをつけた
右下にいるでしょ?いるでしょ?かわいいアイツが!これ今日のメインですよ!名前分かんないんですけど「トップにビューンて戻ってくれるボタン」を設置しました!
以前から人様のブログでカチっとやってビューンとトップに戻るのが楽しくて*1ずっと付けたかったのですが、重い腰をあげてようやくつけました。飾り気もへったくれもないボタンですがシンプルイズベストということでひとつ。飾り気出す方法がよく分からなかったです。でもかわいいでしょこいつ?クリックしたくなるでしょこいつ?
方法はこちらを参考にしました。
jQueryでスクロールすると表示する系いろいろ | webOpixel
めんどくさいって人は下のやつ貼り付けるともこたと同じボタンが出ます。
よく分からないコメントもついています。
[設定]→[詳細設定]→[headに要素を追加]に
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
以下デザインのフッタに入れています。どこでもいいのかな?
<p id="page-top"><a href="#wrap">▲</a></p> <style> #page-top { position: fixed; bottom: 10px; right: 10px; font-size: 100%; /*このへんたぶんボタンの文字設定*/ } #page-top a { background: rgba(0, 0, 0, 0.7); /*ボタンの色 0.7は不透明度*/ text-decoration: none; /*boldとかにしたら太字になる*/ color: #fff; /*文字色(この場合▲)*/ width: 50px; /*ボタンの横幅*/ padding: 10px 0; /*ボタンの縦幅?*/ text-align: center; /*文字位置*/ display: block; border-radius: 10px; /*大きくするとボタンの角がけずれる*/ } #page-top a:hover { text-decoration: none; background: #999; /*マウスオンした時の色*/ } </style> <script> $(function() { var topBtn = $('#page-top'); topBtn.hide(); //スクロールが50に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 50) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スクロールしてトップ topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> ;
わかんない事は知ってる人に聞くのが手っ取り早いって
じっちゃも言ってた。
- 作者: 岩田松雄
- 出版社/メーカー: サンマーク出版
- 発売日: 2013/05/29
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (1件) を見る
全体的に参考にさせていただきました。
*1:関西人は擬音語が多いと評判です