• Excel
    【Excel Tips】 同じファイル内の別々のシートを分割表示して同時編集する
    2014年9月6日
  • Excel
    【Excel】現在つかっているバージョンを確認する方法【2016 Win/Mac版両方】
    2017年11月25日
  • Excel
    【Excel】セル同士の参照先を確認できる「トレース機能」がかなり役立つのでみんなで使おう
    2014年12月8日
  • Windows
    【Windows10】Microsoft Edgeの検索エンジンを変更する方法
    2015年7月25日
  • コマンド
    テスト用通信メモ。 特定のポート番号の通信を、コマンドプロンプトから発生させる方法。
    2014年2月15日
  • コマンド
    【Powershell】実行時間や結果を含むコマンド実行履歴をCSVに出力する方法
    2015年9月29日
  • Excel
    【Excel】「20150325」という数字の羅列を日付フォーマットに直す方法
    2015年4月11日
  • インドネシア
    同じインドネシアでも「ジャワ島とバリ島」はほぼ別の国だと思ったほうがいいと感じた話(動画あり)
    2016年3月20日
  • ニュージーランド
    【NZ】長旅するならBBHカードは必需品! グループ加入のバックパッカーズが安く泊まれます
    2017年6月20日
  • Excel
    【Excel】数値の大きい順・小さい順に色を自動的に塗りつぶす「カラースケール機能」
    2017年12月30日
  • フィリピン
    フィリピンではスギによる花粉症の心配なし! 代わりに気を付けるべきことは…
    2016年2月20日
  • フリーソフト
    インストール不要フリーソフト。PCのHW温度や電圧をモニターする『HWMonitor』
    2014年7月21日
  • フリーソフト
    Win/Mac両方の全アプリで使える「現在の日付/時刻を一発入力」する方法
    2016年5月6日
  • Mac
    自分のMacのOSのバージョンがわからないので調べてみた
    2013年4月20日
  • 旅行
    想像以上になかなか本格的なテクノ箱だった! 表参道の新クラブ『Origami』に遊びに行ってみました
    2013年10月13日
  • Excel
    【Excel】データ入力時間を圧倒的短縮!「フラッシュフィル」機能を活用しよう
    2017年10月5日
  • フィリピン
    セブ・IT Parkに滞在するなら「クラウンガーデンホテル」が静かだしセキュリティもしっかりしてるのでオススメ(動画あり)
    2016年2月22日
  • フィリピン
    従業員が親切で値段もぼちぼち安いセブ・アヤラモール付近の「センタースイーツ」に4泊した(動画あり)
    2016年2月26日
  • Mac
    MacのFinderで「ファイル切り取り」で移動する方法 (Yosemite版)
    2016年2月10日
  • フリーソフト
    Internet経由で自宅のWinPC/Macにリモート接続できる「Splashtop Anywhere Access Pack」を購入してみた
    2015年9月30日
  • Windows
    DVD/BDの自動再生方法を変更/無効化する方法。(Windows7版)
    2014年1月6日
  • Windows
    【Windows10】イベントビューアを起動する3つの方法
    2018年4月3日
  • 旅行
    【NZ】もしもの時のために「在留届」を提出! 在留届の出し方をまとめました
    2016年11月30日
  • Excel
    【Excel】作業効率化!知らぬと損する必須ショートカットキー15選
    2015年2月15日
  • コマンド
    【バッチ勉強】サービスの起動・停止状態を取得する方法
    2014年10月20日
  • Excel
    【Excel】セル移動時のヌルヌルを無効化する方法
    2015年2月28日
  • Excel
    【Excel】シート間を一瞬で移動するショートカットキー
    2012年7月19日
  • 旅行
    ANA提携航空会社の航空券からマイルを登録する方法
    2016年4月3日
  • 音楽
    【iTunes】プレイリストの表示形式を変更する方法 並び替えできる表示形式に変更するショートカットキー
    2017年12月13日
  • Mac
    割と面倒くさかった、MacからauのWiFi Spotに接続する方法(2015年9月版)
    2015年9月28日

2012-0909-171408.jpg

FC2のTipstourの時代に、トップに戻るボタンを配置してみました。

トップに戻るボタン自体は元々記事の一番下に配置されているのですが、
目立たないことと、記事の中間からトップに戻るのが(個人的に)わずらわしかったので
設置することとしました。
さて、ただ単に戻るボタンを設置しました、というだけでなく
今回そのトップへ戻るボタンの設置の方法について、簡単にまとめました。

スポンサードリンク

関連記事


このトップに戻るボタンを設置するには、HTMLのタグとスタイルシートを編集する必要があります。
大まかには下記の4つです。

画像ファイルをアップロード
自分のブログ内、もしくはサイト内に画像ファイルをアップロードします。

アップロード方法はそれぞれのブログで違いますが、
fc2の場合は適当な記事を作成して、その記事に画像をアップロード(アルバムに追加)します。

後はその画像のURLを後で記述しますので、どこかに控えておきます
HTMLにトップ部分を指定する記述を追加
次に、ボタンをクリックした際に移動する先をHTML内に下記の項目を追加します。

<div id="all"></div>

上記の記述がされている部分に、ボタン画像をクリックすると移動するような形になります。
記載場所に指定はないですが、今回はトップに戻るためのボタンなので
ブログの一番上に記載しました。
<body>タグの真下あたりでよろしいかと思います。

CSSの記述内に下記の項目を追加します。
次はCSS側の記述の変更です。
記載場所はどこでも良いので、下記の項目を追加します。

.page-back {
position: fixed;
bottom: 25px;
right: 25px;

上記の記述は、今回は位置する対象の画像ファイルをどこに配置するか、という指定ですね。
■HTMLに画像を配置
続いて実際の画像ファイルを配置します。

こちらも記載場所はどこでもよいですが、これも<body>の前あたりでどうでしょうか。
<div class="page-back"><a href="#all">
<img src="[画像URL" /></a></div>

[画像URL]の部分には、先ほどアップロードした画像を指定してください。
上記の指定で、指定した#allのタグが
記述してある部分までリンクを付けた画像ファイルをページ内に配置することとなります。

正しく入力出来れば、画面右下に画像ファイルが設置され、
クリックすればブログのトップまで移動できるようになるはずです。

細かい記載の方法は他にもあるようですが、
とりあえずトップへの移動ボタンを設置したいということであれば
この方法で簡単には設置可能です。

もし、記載ミスやもっといい方法等あれば、是非教えてください。
HTMLやCSSについては、多少はわかっているとはいえ、一番良い記述方法という点については
僕自身まだまだ知らない部分があると思いますので…
僕も勉強しながら、勉強しながら、です。