ろっくにっと-RockniT.netコンテンツへスキップハンドメイドとうるさいロックが好きながんサバイバーがWordPressで遊んでます。旅行記BLOG検索:全カテゴリ最新記事5件サイトを2年間放置していました。ついて本サイトで使用しているWordPressをカスタマイズしたりテーマを自作したり、いろいろ試行錯誤した履歴を記録しています。これで飯を食えるくらいのレベルになれたらいいなという夢だけは大きく、ゆるーく更新しています。Twentyfifteenからテーマ作成-上に戻るボタンをつけるTweetネット上のほとんどのページは縦にスクロールしないと全文を読むことができません。最近は「無限スクロール」なんて見せ方もあって、スクロールするたびに下からもりもりとコンテンツが表示され、気が付くとブラウザのスクロールバーの短さがとんでもないことになって自分いまドコ?状態になったりします。そのためページの一番上に戻るボタンを設置してユーザーの負担を軽くします。WordPressに「上に戻る」ボタンを設置する一番簡単な方法はプラグインを利用することですが、どうにも好みのデザインのものがないので、jQueryで実装することにしました。ちなみに、参考までに自分が試したトップに戻るプラグインはこちら。Top日本語化はされていませんが、設定する項目はCSSで使われる言葉とほぼ同じなので問題はないかと思います。大きさや色、表示したい記号や文字を指定できます。Twentyfifteenのままで設置するのであればそのまま使ってもいいんですが、自作デザインに合うようにはカスタマイズできなかったので、プラグインはやめて自前で設置することにしました。Javascriptファイルの設置。あるので、その中に新規ファイルを作成しました。使うと動作しないという問題があります。jQueryのプラグインを複数設置するとコンフリクト(衝突)が発生することがありますが、WordPressにはあらかじめjQueryが組み込まれていて、それと新規設置するJavescriptファイルがコンフリクトしてしまうようです。書いておきながら自分はjQueryに全然詳しくないので、以下のサイトで勉強させていただいて理解することができました。問題が解決したところで、上記のサイトの情報を参考にしてscroll-to-top.jsの中に以下を記述。200);});});通常$と記述することが多い関数はjQueryで記述。50移動するとボタンが現れるようにしました。この作成したファイルをページに読み込ませるには、header.phpで読み込む方法もありますが、自分はfunctions.phpに以下のとおり記述。'scrolltotop');管理画面以外のヘッダ部分でjsファイルを読み込むようにしています。参考にさせていただいたサイトはこちら。(英語)上記で設置したjsファイルを実行するボタンはfooter.phpの最後に以下のように記述。genericon-collapse"></span></a></div>spanに入れているのは、Twentyfifteenに同梱されているwebフォント、genericonの上向き記号です。以下の提供元サイトでCSSとHTMLを簡単に取得できます。Genericons見栄えは以下のように指定します。サイトに実装しているのは色付きですが、本記事用にTwentyfifteenぽくしています。0.3s;}半透明なのでサイドバーなど下のコンテンツが透けて見えます。hoverの影を薄くしてタブが持ち上がるような感じにしています。気付かないくらいの感じがデジタルっぽくないかなと。Cleanerを使用している場合は動作しなくなるので、scroll-to-top.jsを除外ファイルにしてください。post:Twentyfifteenからテーマ作成-カテゴリごとにページ移動プロフィール管理人:rocknitter身体は虚弱、性格は暴虐。曲がった事が大嫌いなヘソ曲がり。ゆえに基本ぼっち人生。このサイトでは日頃気づいたことなどを記録しています。日常生活を送るだけで精いっぱいの体力しかないので基本的にコメント機能はオフにしています。