研Q3.トップページに戻るボタンの作り方 - ネットビジネス研Q室(新館)

このエントリーをはてなブックマークに追加

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
このエントリーをはてなブックマークに追加

研Q3.トップページに戻るボタンの作り方

トップページに戻るボタンは超簡単なアクセスアップカスタマイズです。


ブログのナビゲーションが使いやすいと、確実にアクセス数(PV:ページビュー)が増えます。


検索エンジンから初めて来ていただいて、
「このブログ、おもしろいかも!?」と思ったお客様はほかの記事も読みたくなります。

読みたいと思ったときに、いかに簡単にほかのページに移動できるかが、運命の分かれ道です。

ごく一般的には、ブログのトップページに飛んでみるのではないでしょうか。


このブログの右上には、
こんなボタンがつけてあります。



右上につけてあるボタンは、ページをスクロールしても、いつも同じ場所に表示されています。

どのウェブサイトでもページのいちばん上まで行けばトップページに行くためのリンクがあるので、
トップに行きたいなと思ったら右側のスクロールバーの上のほうに目が行くはず。

ということで右の上につけてあります。

トップページに戻るボタンの設置方法

ブログのHTMLにこんなタグを組み込んであります。

<div style="position: fixed; top: 20px; right: 0px;z-index: 1500;"><a href="トップページのURL" title="このブログのトップページへ" alt="このブログのトップページへ"><img src="画像のURL" border="0" /><img/a><img/div>

top: 20px は、画面の上端からの距離。

right: 0px は、右端からの距離です。

rightleftに変えると、画面の左端になります。


ボタン画像の作り方は、ボタン素材 自動生成サイト - ButtonMakerアフラットで作成して、
Paint Shop Plusで透明に加工しました。

ボタン上端の矢印になっている部分の背景は透明にしてあります。

当ブログで使っているボタン画像でよろしければ、自由にダウンロードして使っていただいてけっこうです。
クレジット表示などは不要です。

アメーバブログのようにテンプレートのHTMLを編集できないブログでは、(アメブロならば)フリースペースにタグを組み込む。
それもできなければ、本文中にタグを組み込んでもOKです。
ブログに表示される場所にタグを組み込んでおけば、タグコードは表示されずにボタンだけが表示されます。

クリエイティブ・コモンズ 表示 - 継承 2.1

初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
グーグルリーダーに登録 Subscribe with livedoor Reader My Yahoo!に追加 
ツイッター でも、更新案内を流しています。                          
RSSリーダーとは?⇒ RSSってなんなの?
  リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。
▲ネットビジネス研Q室のトップページに戻る▲  ●ネットビジネス研Q室の記事一覧●
記事末尾110posted by +M Inamura (水村亜里)
関連記事
このエントリーをはてなブックマークに追加
コメント
非公開コメント

ブログでつながり隊のバナー(横長)

トラックバック

http://aminamura.blog.fc2.com/tb.php/3-2e93b0bc

QLOOKアクセス解析
Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。