当ブログの投稿ページで「【上へ戻る】ボタンを設置してみました。長い記事だと下にスクロールしていくと今度は戻るのが大変。」で当ブログに設置した「上へ戻る」ボタンのCSSコード・要素タグは下記のものです。
【上へ戻る】ボタンのコード
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top">
<img src="ボタン画像のURL" height="画像の高さ" width="画像の幅" /></a>
インターネット上で公開されているコードなのですが、その当時はまるでCSSについて知識が欠けており理解できずにコピー＆ペーストでサイト様からお借りしてブログに設置しておりました。
ボタンに変化を付けたものが殆どだったのですが、いろいろなサイト様を参考にしてシンプルイズベストで右下に固定のものを選択、自分の作成したボタンを取り入れてコードを編集して作成しました。
今回はそのCSSコード・要素タグについてどのような意味を持つのか、どのような役割があるのかタグ要素を調べてみました。
上記コードから
【rel="nofollow"】
これはWebサイトにリンクを張ってもSEO的な効果を無効にできるものです。例えばボタン画像が他のWebサイト上にある場合などに有効となります。
【display:scroll;】
レイアウトに用いるプロパティでスクロールを指定。
【position:fixed;】
ウインド枠で絶対位置への配置となります。スクロールしても位置が固定された状態になります。
【bottom:10px;right:5px;】
ボタン画像の表示される位置を指定します。ボトムから10px；右端から5pxの位置を指示しています。
【 href="#"】
リンク要素になり通常のURLの指定ではなく、そのページの一番上に"＃"のラベルがあってそこに戻ることを意味しています。要するにTOPに戻るのです。
【title="Back to Top"】
ボタン画像にカーソルを当てると表示されるボタンのタイトル文字です。「Back to Top」を「上へ戻る」「TOPへ戻る」にすればその文字を表示できます。
【img src="ボタン画像のURL"】
ボタン画像の格納されている場所URLを指定します。
【height="画像の高さ" width="画像の幅"】
現在は画像の大きさを高さ40px、幅40pxに指定しています。
要素と要素の間は半角スペースです。
このコードは「上へ戻る」ボタンに限らず、画像やアイコンをウィンドウズの中で固定して表示させたいときに活用できます。サイト（ホームページやブログ）にアクセントを付けたいときに応用できますし見た目の印象もよくなると思います。
0 件のコメント:
コメントを投稿