2018.04.02今回はSeesaaブログに記事の先頭に戻るボタンを設置する方法を紹介します。これは別にシーサーブログに限らずFC2や別の無料ブログ(HTMLが編集できる無料ブログ)ならどの無料ブログでも同じ要領で設置する事ができます。今回作ってみたのはこのブログでも右下に表示されるこんな感じのボタンです。戻るボタンの文言とかサイズは自由に変更できます。Amazonや楽天のアフィリエイトは「もしもアフィリエイト経由」がおすすめの理由Amazonや楽天のアフィリエイトは認知度も高いので初心者におすすめのアフィリエイトです。先にこの「トップに戻るボタン」の機能を紹介しておきます。ページを下にスクロールするとボタンが右下に出現(右下以外でも可)ボタンをクリックするとページの先頭に戻るという感じのボタンです。これを設置する方法をできるだけシンプルに説明してみます。戻るボタンのデザインをCSS(スタイルシート)で作成するまず最初に戻るボタンのデザインをCSSで作成します、とはいっても既に作っておいたのでこのままのデザインで設置してみてあとからCSS(スタイルシートの編集)でサイズやボタンの色、文字の色等を変更する事をおすすめします。設置するまではよく分からない部分も多いとは思いますが、実際に一度設置してみると理解は深まるはず、多分。Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」をクリックして、「スタイルシート編集」のタブを選択します。スタイルシートの一番下に次のコードを追加。}縦に長いのでコピペする時はスクロールして最後までコピーして下さい。トップに戻るボタンには「scroll-top」というid名を付けてあります。各部分の横に解説を付けているので変更したい場所があれば設置した後で手直しして下さい。途中で「display:none」というのを付けていますが、これはボタンを非表示にする(見えなくする)記述。初期状態で見えなくしておいて、ページをスクロールしたら表示するというコードを後ほど書くので、この部分は非表示でOKです。上記コードを追加したらその下にこのコードを追加(これもスタイルシート)。}これはボタンに表示させるテキスト部分ですね。ここで重要なポイントが1つ。「line-height」という部分で文字の高さを調整しています。この高さは「ボタンの高さ(height)」と同じにしておく必要があります(ボタン内の文字を中央にするため)。以上でボタンのデザインは完了です。ボタンを設置して機能させる作成したボタンを機能させるにはHTMLにボタンの記述を加える必要があります。Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」と進み、「HTML編集」のタブをクリック。HTMLの書かれた画面になりますが、HTMLは最初の方で「head」~「/head」セクションがあって、続いて「body」~「/body」セクションがあります。「head」の終わりの部分「/head」の記述を探します。初期状態なら「/head」の直前に以下のコードを追加。>50){$("#scroll-top").fadeIn("slow");}else{$("#scroll-top").fadeOut("slow");}});$("#scroll-top").on("click",function(){$("html,body").animate({scrollTop:0},"slow");});});</script>こんな感じになります。追加できたら一度保存しておきます。HTMLにボタンを追加する同じくHTMLにさらにボタンを追加していきます。ボタンを設置する記述はこの「body」の中ならどこでもいいのですが、今回は分かりやすいようにHTMLの一番下の「/body」の直前に次の記述をします。先程と同じHTMLの編集画面でHTMLの一番下(最後)の方に「/body」という部分がありますので「/body」の直前に以下のコードを追加。id="scroll-top"><p>▲ページの先頭へ</p></div>こんな感じになります。ここまで記述したら「保存」を忘れずに。機能するか確かめておく事。画面を下にスクロールするとページの先頭に戻るボタンが出現するはずです。ボタンが出てこない場合は「Ctrl」と「F5」を同時に押してリロードして確認。最後に記述した内容を簡単に説明しておくと、ページをスクロール(トップから50px下に移動)をすると非表示していたボタンが出現トップから50px以内に戻ってきた時はボタンは非表示。ボタンをクリックするとページの先頭へ移動こんな感じです。ちなみに表示と非表示は「fadeIn」と「fadeOut」という記述部分です。詳しく知りたい場合は「jQuery」を勉強すれば1週間くらいでできるようになると思います。ある程度HTMLとCSSの知識は必要ですが。それからSeesaaブログの場合はTOPに戻るボタンはPCページだけです。スマホページのHTMLは編集できません。無料ブログのスマホページは広告も多く、自由度も低いのでブログで収益化をするのであればWordPressなどへの移行を検討してみて下さい。以上シーサーブログや無料ブログ(HTMLの編集ができる無料ブログ)に「トップに戻るボタン」を設置する方法でした。⇒アフィリエイトの始め方と稼ぐ方法のまとめページに戻るスポンサーリンクスポンサーリンクSeesaaブログアフィリエイトとカスタマイズシェアするTwitter0Facebook0はてブ2Pocket2LINEコピーサイトのアクセスアップや稼ぐためにおすすめの無料レポート個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。返信ありがとうございます。チェックしてみたのですが「戻るボタン」のコードが見当たりません。一度外されているかもしれませんが、チェックできませんのでまずはコードを追加してから再度コメント下さい。スタイルシート(CSS)とHTMLでそれぞれ追加するコードがありますので、間違わないように追加し、またコメント下さい。返信ありがとうございます。自分のブログのURLです。AMあずき様コメントありがとうございます。ブラウザに以前のデータ(キャッシュ)が残っているかもしれませんので、「Ctrl」と「F5」を一緒に押してリロードしてから確認もしくは別のブラウザで確認するのが確実かなと思います。それでも表示されないなら一度追加したコードを外して保存し、再度追加して保存。これで上手くいく場合はがあります。AMいつも本当にお世話になってます。何度やっても、プレビューだと表示されますが自分のブログをみたら、表示されません。毎度ありがとうございます!私のはフッターの固定メニューをつかってます。様のサイトはWordPressですか?それともSeesaaブログの方でしょうか?SeesaaブログだとスマホのHTMLが編集できないと思うので「トップに戻るボタン」は難しいかと思いますが、一応ブログのURLを教えてもらえると助かります。利用されているのがWordPressであれば固定メニューもしくはトップボタンの削除もできます。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト上に表示された文字を入力してください。【図解】Amazonプライム会員の友達紹介のやり方と手順。友達紹介キャンペーンは無料の会員登録でも報酬発生!Googleアドセンスの始め方。【初心者向け】WordPress(ワードプレス)でのブログの始め方と使い方まとめ!【初心者向け】CocoonでWordPressを始めるなら最低限やっておきたい設定13項目WordPressテーマ「Cocoon」を使うなら最低限入れておきたいプラグイン12選+1【図解】Cocoonのダウンロードとインストールの手順。Wing(コノハウイング)へ移転する方法と注意点まとめ【保存版】エックスサーバーのWordPress簡単移行機能の使い方と注意点まとめ【保存版】ロリポップの簡単引っ越し機能の使い方と注意点まとめ。設定方法は思っていたより簡単ですね~楽天アフィリエイトの紹介料は楽天ポイント。報酬を現金振り込みでもらう方法は2通り。博2020.02.04現在、楽天カード会員ですがゴールドカード会員に切り替えたい。【図解】楽天カードから楽天ゴールドカードに切り替えをする流れと注意点。返信ありがとうございます。シンプリシティだったんですね。質問1.試す記事は実際に投稿済みのものが良いです。下書きのものだと試せないと思います。早々にご連絡を頂きまして、ありがとうございました。スラッグの変更を試してみたのですが、うまくいきませんでした。コメントありがとうございます。サイトもサボっておりまして、すっかり情報も古くなってきてます、すみません。検索トップタイトルとURLをコピーしました。