ふくやりでは、家から出ないでできる副業のやり方をまとめて紹介します。まとめページの先頭へ戻るボタン画面がスクロール操作が必要なぐらいに長いWebページを読んでいるとき、画面右下あたりに矢印マークが現れていることがありませんか?そして、その矢印マークを押してみると、スルスルとページトップまで自動的にスクロールして戻って行く動きを経験したことがありませんか?FC2ブログの初期設定のテンプレート(basic_white)でも付いています。色が薄いのでわかりにくいのですが、↓これです。この機能を「スムーズスクロール」って言います。FC2ブログで使っているテンプレートに無ければに追加してみましょう。テンプレートを編集するFC2ブログにログインしたら管理画面より「テンプレート」を押します。テンプレートを複製テンプレートを編集するときには、必ず「複製」を行い、元テンプレートの状態を保持したうえで編集するようにしましょう。編集したいテンプレートの「複製」を押します。複製元テンプレートと区別がつくようにテンプレート名を変更しておくと良いでしょう。名称を変更したら「更新」を押します。複製し名前を変更したテンプレートを編集していきます。「編集」を押しましょう。動的なページを作る今回追加する機能ですが、ブログを読んでいる人がある程度のスクロールを行うことでボタンが現れます。スクロールを行わなければ、ボタンは現れません。このように読む人の操作で動きが変わるようなページを「動的なページ」と言います。このような動きが欲しいときは、JavaScriptというプログラムを使うことが多いです。今回追加する機能もJavaScriptを使いますが、JavaScriptですべてを作ろうとするとたいへんです。世の中には、「もっと簡単に扱えるようにしよう」と便利な機能の塊を提供してくれる人達がいます。使うことで、少ないコード量で簡単に機能を追加することができるようになります。自体を読み込んでおきます。これは1行追加するだけです。テンプレート管理画面の下に「HTML編集」という箇所があるので、ここを編集します。テンプレートによっては既に書かれていることがありますので、キーボードの「Ctrlキー」と「Fキー」を同時に押すと、検索窓が左下に表示されます。検索窓で「jquery」で検索してみてください。作業は、次のコードをコピペするだけです。上にコピペしてください。バージョンがあります。読み込まれているバージョンが違っても気にしなくても大丈夫です。逆に複数のバージョンが読み込まれるとうまく動かないので、既に読み込まれていれば、新たに追加する必要はありません。2スムーズスクロールの動きを追加する次に、スムーズスクロールの動作を追加します。動作としては次の動きです。ページトップ位置からある程度の位置(基準位置)までの範囲では矢印マークは表示されない基準位置よりも下側へスクロールしたら、矢印マークを表示する(フェードイン)矢印マークはブラウザの固定位置に表示される基準位置よりも上側へ戻れば矢印マークを消す(フェードアウト)矢印マークが表示されているときに、矢印マークを押せばページトップまでスルスルと自動的に戻る次のコードをコピペするだけで大丈夫です。上にコピペしてください。読み込んだ場所よりも下に追加してください。好きな位置に調整してみてください。こちらも好きな間隔に調整してみてください。<a>タグを使ってリンクのように見せかけます。飛び先はダミーとして「#」にします。上にコピペしてください。今回は「▲」を使っていますが「↑」でも良いですし、矢印画像を使うことも可能です。3ページトップ位置へ戻るボタンのデザインデザインを変更するには「スタイルシート(CSS)」を編集して行きます。テンプレート管理画面の下に「スタイルシート編集」という箇所があります。次のコードをCSSの最下部にコピペしてください。50px;}右下の固定位置に矢印マークを表示します。表示位置の座標や、背景色、文字色は好きな値に調整してみてください。これでページトップへ戻るボタンが追加できているはずです。スクロールしてみると、矢印マークが現れました。使われていたりします。この場合は新たに追加する場所に迷うかもしれませんが、ぜひチャレンジしてみて下さい。今回は、FC2ブログの記事内にインフォカートのバナー広告を横並びに貼る方法について紹介します。アフィリエイト収入について紹介します。