他サイト様 更新情報

2014年02月12日

シーサーブログ改造 「ページトップへ」ボタン設置 #255

※2014/5/19 知人のスマホで
拡大表示して見せて頂いた所、
"ページトップへ"画像が大きくなり
過ぎる現象を確認。画像サイズを縮小。

−−−−−−−−−−−−−−−−
このブログは、トップページに5件分の
(2/16一時3件に変更)
記事を表示するように設定しているのだけど、

以前に投稿した記事を確認していたら、
ページの一番上まで戻ろうとすると、
スクロールするのが大変な事に気づいた。

いくつかのサイトで、ページの一番上まで
移動できるボタンを見た事があったのを
思い出した。

調べてみたら、「JQuery」という
JavaScriptライブラリを使う事で
実装できる事が分かり
先ほど設置してみた。

トップページで、下にスクロールすると
右下に「ページTOPへ」という画像が

表示されるはずだけど、皆さんにも
見えているだろうか。

ほぼ参考にさせて頂いたHPの説明通りだけど、
シーサーブログ用でなかったという事で、
実際に設置した手順を書いておこうと思う。

参考HP:
http://wp-and.me/jquery-scroll/

手順1.「ページTOPへ」ボタン用の画像を作成した。

    ロゴ画像があったので、ペイントソフトで、
    文字を入れて、jpg形式で保存した。
    (画像サイズは80×80)

手順2.シーサーブログ管理画面の
    「ファイルマネージャー」で、手順1で
    作成した画像をアップロードした。

   ※アップロードした画像の横にある
   「HTML」ボタンで表示されるHTMLの中の
    <img src="http://xx/xx.xxx">の
    http://xxx.xxxの部分を、後ほど、
    手順5の「画像パス」に入れる。

140212_pagetop1.jpg

手順3.シーサーブログ管理画面の
    「デザイン」-「HTML」にある
    HTML名をクリックして表示される
    HTML内の</head>の直前に以下を貼り付けて保存。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 600);
return false;
});
});
});
</script>

※注 上記”script”前後の「<」「>」は全角です。
   コピペする際は半角に直してご利用ください。

140212_pagetop2.jpg

140212_pagetop3.jpg

手順4.シーサーブログ管理画面の
    「デザイン」-「デザイン設定」で
    ページ中段くらいに表示される
    テンプレートのタイトルをクリックし
    表示されたCSSの一番下に以下を記載して保存。

/*
Back to top button
*/

#back-top {
position: fixed;
bottom: 1%;
right: 3%;}

#back-top span {
width: 80px;
height: 80px;
display: block;}

140212_pagetop4.jpg

140212_pagetop5.jpg

手順5.シーサーブログ管理画面の
    「デザイン」-「HTML」で表示される
    HTML名をクリックして表示された
    HTMLの</body>の直前に以下を貼り付けて保存。

<p id="back-top">
<a href="#top"><span><img src="画像パス" width="画像ワイズ" height="画像ヘイト" alt="ページトップへ戻る" /></span></a>
</p>

※注 上記「<」は全角です。
  コピペする際は半角に直してご利用ください。

140212_pagetop6.jpg

画像パスは、手順2に書いた画像のURL。

今回作成した画像が80×80だったので、
画像ワイズ80、画像ヘイト80とした。

以上で設置が完了した。

これでトップページを見て頂いている方の
利便性が少しは上がったのではないかと思う。

他のサイトみたいに、もう少し格好良い
画像にすればよかったかな。。。(-_-;)

もし参考にして頂けたら幸いです。

広告


Feedlyに追加
follow us in feedly

広告
ゲオEショップ買取センター ゲーム・DVD・CD

■ライブまでの課題
1.オリジナル曲の作成

  アコースティックギター中心の曲 1曲確定(→候補1曲有り)
  ピアノ中心の曲 3曲確定
  ロックギター中心の曲 1曲確定→オープニング
  打ち込みの曲 0曲 (→候補3曲有り)
  BGM用の曲 0曲(→候補1曲有り)

  ・英語詞
  ・ブルース

2.ライブ会場の確保

  着席形式、静かな音楽、飲食可。

  ・ライブ会場候補
    1.EggMan Tokyo East(要デモテープ提出)
    2.Space With 飯田橋
    3.PAPPY'S 錦糸町

3.衣装、キャラクター検討

4.集客、宣伝

5.ライブ中トーク検討
  ・笑い声の効果音

6.オリジナルCD作成
  プロのエンジニアに依頼検討中

7.ダイエット 目標69kg

■今後のスケジュール(予定)
 1.曲作成 10/21〜2/28
 2.準備・練習 2/28〜3/29
 3.ライブ 3/30

■作曲
 なし

■ダイエット
 なし

■企画動画
 なし

■投稿
 なし

■ボイストレーニング
 2/11
 水飲み 1000ml
 息吐きパターン1×1
 息吐きパターン2×1
 息吸いパターン1×1
 息吸いパターン2×1

■ブログランキング
2/11 にほんブログ村 ※PV順

 音楽 171位(25223サイト中)
  大人の音楽活動 1位(296サイト中)!!!
  ライブコンサート 6位(862サイト中)

 ライフスタイルブログ 532位(41849サイト中)
  ありのままの自分 6位(340サイト中)

■記事トーナメント
 なし

■名刺
 2/11 配布枚数 0枚(Rev1残 80枚)

最後まで読んで頂き、ありがとうございました。
今後ともよろしくお願い致します。

↓このバナーをクリックして頂くと
 INポイントというのが付き、
 そのポイントのランキングも
 発表されるとのことです。
 クリックして頂けると助かります。

にほんブログ村 音楽ブログ 大人の音楽活動へ
にほんブログ村

広告
Sony Music Shop






posted by カル at 21:11 | Comment(0) | TrackBack(0) | ブログ自体 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック

ページトップへ戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。