【Simplicity】「トップへ戻る」を丸いボタンへ！CSSで大きさ・色・形を変更する方法。
WordPressテーマ「Simplicity」で画面右下に表示される「トップへ戻るボタン」のアイコンをCSSで変更しました。「外観→カスタマイズ」からでは設定できない、大きさの変更やアイコンを丸くしたりなどの調整もできます。 トップへ戻るボタンのアイコンをCSSで変更する Simplicityの「トップへ戻るボタン」は、「Font Awesome」というアイコンフォントとCSSで作られています。CSSを変更する場合、style.css内にある、#page-top{}、#page-top a{}を調整します。 ちなみに何も変更していない「Simplicity」の「トップへ戻るボタン」がこちら。 「トップへ戻るボタン」を大きくする まずは「トップへ戻るボタン」の大きさを調整。フォントアイコンの大きさは、style.cssの#page-top a{}でフォントサイズ指定します。 #page-t
[JavaScript] jQuery を使わずにスクロールでトップに戻るボタンを表示する | rakuishi.com
ページを下にスクロールすると右下に「トップに戻る」ボタンが表示され、タップするとページ上部に戻るあれを JavaScript で書いてみました。 jQuery で実装されているのはそこらへんに転がっていますが、jQuery は勉強してないから分からないし、ライブラリ（100KB 程度）を読み込むリクエストが発生するからという理由で JavaScript だけで書いてみました。 ここからは、実装する上で使用したコードを解説していきます。 JavaScript：ページ上部にスクロールする ページ上部にスクロールする JavaScript です。参考ページのコードをそのまま使用させて頂きました。 参考：「ページの先頭に戻る」をスムーズに移動させる Js function scrollToTop() { var x1 = x2 = x3 = 0; var y1 = y2 = y3 = 0; if
![[JavaScript] jQuery を使わずにスクロールでトップに戻るボタンを表示する | rakuishi.com](https://cdn-ak-scissors.b.st-hatena.com/image/square/927c0c4b1e66fd219c5b0b8b2ec5dd63300e8740/height=288;version=1;width=512/https%3A%2F%2Frakuishi.com%2Fassets%2Fimages%2Fog.jpg)
コピペするだけ！トップに戻るボタンの設置方法 - えむしとえむふじんがあらわれた
こんにちは、えむしです。 今回はページトップに戻るボタンを設置する方法をご紹介します。 素人なもので、何か間違いなど有りましたらコメント欄にてご指摘お願いします…。 nohack-nolife.hatenablog.com こちらを参考にさせていただきました。 以下はカスタマイズの記事まとめです。 http://blog.mshimfujin.net/archive/category/web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3blog.mshimfujin.net 完成図 まずはfontawesomeを呼び出します。 フッタのhtml記述エリアにコピー 最後はデザインCSS 追記 完成図 カーソルが重なる前 カーソルが重なった後 ちょっと大きい画像になってますが、こんなボタンが右下に設置されます。 まずはfontawesomeを呼び出します。 まずはfo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
