ここから本文です

この知恵ノートを「知恵コレクション」に追加しました。

追加した知恵ノートはMy知恵袋の「知恵コレクション」ページで確認できます。

知恵コレクション」に登録済みです。

再登録しました。

追加に失敗しました。

ノートに戻り、もう一度やり直してください。

すでに1,000件のノートが登録されています。

新しく追加したい場合は、My知恵袋の「知恵コレクション」ページで登録されているノートを削除してください。

追加できませんでした。

ノートは削除されました。

livedoorブログの『トップに戻る』ボタンの作成方法

ライターさん(最終更新日時:2012/2/6)投稿日:

  • ナイス!:

    20

  • 閲覧数:2823

印刷用のページを表示する

~livedoorブログの『トップに戻る』ボタンの作成方法~

よく他の人のブログを見ていると、
クロールをしてても一緒についてくる

トップに戻ることができるボタンがあると思います 


そのボタンを押すことによってそのページの一番上に戻ることができます。

これの利点は、
記事を読み終えてから上に戻るという無駄な動作がなくなるということと、
見た目が良いことです。


では早速作ってみましょう
別にこのタイプでしかできないということでは ないので参考にしてください

作ると聞いて、すごいことをするのかと思いますが

実際は超簡単です。

そんなわけで設定していきたいと思います
  1. ブログ管理画面を開き、
  2. マイページにある『ブログ設定』をクリック!!
  3. デザイン/ブログパーツ設定の『ブログパーツ』をクリック
  4. 側の追加欄にある『自由なカスタマイズ用』をクリック
  5. 最後にその中にある『フリーエリア』をドラッグして左側にある好きな場所に移動してください
説明文だけ見ると開くだけで一苦労ですが
要するに
 フリーエリアを出せばいいです。

フリーエリアの設定を開くと[ラベル]
[改行設定][タイトル設定]

そして無駄に大きいスペースがあると思います。

そこにこの文をコピペ(コピー、ペースト)してください 

ポイント

  • <div style="position: fixed; bottom: 10px;right: 0px; cursor:pointer;opacity: 1; “ title=“scroll Back to Top”">
  • <a href="#" id="link_to_top" title="トップページへ" alt="トップページへ">
  • <img src="******" /></a> 
  • </div>
 

注意

  •  bottom: 10px;right: 0px;
  • ↑これは何かというとですボタンの位置
  • ちなみに赤が高さ青が横です。
  • (数字は勝手に変えて結構です)
  • この場合青がrightとなっているので右側ということになります。
  • 左にしたい場合はleftに変えてください

******画像のURLを載せてください
(例えば矢印とか) 
  これで完成です
     
     えっ、よくわからない?
 URLは背景にしたい画像の上にマウスを持っていき、
その上で右クリックし、『画像URLをコピー』できます

ヒント

  • 自分で書いた絵を貼りたい場合や、画像URLがわからない場合はまじまじというサイトがオススメです。
  • ここは登録しなくても、メールを送るだけで出来ます詳しくはサイトを見てください m(_ _)m

このノートに関するQ&A

このノートに関するQ&Aは、まだありません。

このノートについて質問する

このノートについてライターの方に質問できます。

※ライターの方から必ず回答をいただけるとは限りません

※別ウィンドウで開きます

この知恵ノートのライター

グレード

グレード知恵ノートのグレード:1-2

mikannkunn01さん

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ┃━━┓ㅤㅤㅤ┃ㅤㅤㅤ┃━━╋...[続きを見る]

その他の知恵ノート(2件)
マウスポインターを乗せると色...
livedoorブログのCSSを使った背...

ピックアップ

【iPhone】修理交換の申込方法...
 ※追記※2015/1/30現在iPhone6及び6+が発売されたのを受け、情...
知っておきたい無線LANルーター...
知っておきたい無線LANルーターの知識と選び方iPod touchやPS...
iTunesカードの基礎知識
はじめにiTunesStoreやAppStoreの決済には通常クレジットカー...
本文はここまでです このページの先頭へ