FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

同ページ内リンク （ページトップへ戻る）

ページが縦に長い場合、下からまたスクロールして上へ戻るのは少々面倒です。
このようなとき、同じページのトップに移動するリンクがあれば便利です。

同じページのトップに移動するリンクの設定方法を紹介します。

HTMLの<body>に、次のように赤い記述を加えてください。

<body id="top">


【2009/09/03 追記】以前は<body>の直下に<a name="top" id="top"></a>を設定する方法を紹介していましたが、空タグが出来てしまうので上記の方法に修正しました。


次にページトップへ戻るリンクを表示したい所に次のタグを加えてください。

<a href="#top" title="△ページトップへ戻る">△ページトップへ戻る</a>


青い文言は好きな様に変えてください。
これでそのページの上へ戻るリンクが設置できます。


当サイト配布のテンプレートであれば次のような箇所に表示すると良いかも知れません。

lightframeシリーズのフッターの右上に表示する場合


HTMLの次の箇所に赤い記述を挿入してください。

～
<br class="c-both" />

<div class="pagetop_link"><a href="#top" title="△ページトップへ戻る">△ページトップへ戻る</a></div>

<!--▼▼ フッター ▼▼-->
～


そしてスタイルシートの末尾に以下を加えてください。

.pagetop_link {
text-align:right; /* 右寄せ表示 */
font-size:9pt; /* 文字の大きさ */
margin-right:5px; /* 右の余白 */
}


standardシリーズのフッターの上（中央）に表示する場合


HTMLの次の箇所に赤い記述を挿入してください。

～
</table>

<div class="pagetop_link"><a href="#top" title="△ページトップへ戻る">△ページトップへ戻る</a></div>

</td></tr>
<!--▲▲▲▲ メインボディ（コンテンツ部分）▲▲▲▲-->
～


そしてスタイルシートの末尾に以下を加えてください。

.pagetop_link {
text-align:center; /* 中央表示 */
font-size:9pt; /* 文字の大きさ */
}



これはあくまで表示する箇所の例ですので、お好きな箇所に表示してください。

１つの記事が長い方は、記事下部にあるナビゲーションに
[日時] カテゴリ | TB(0) | CM(0) | △TOP
等と表示しても良いかもしれませんね。

関連記事
[ 2009/08/18 01:15 ] カスタマイズ 共通カスタマイズ | TB(0) | CM(9)

≪ Firefox等でCSSが反映されないときは | HOME | 親カテゴリの表示 ≫

[ 5501 ] いいですね
こんにちは、早速セットしました。
便利ですね。いつも便利な機能情報有難うございます(^^;
[ 2009/08/18 17:20 ] [ 編集 ]
[ 5506 ] > カンクネンさん
お役に立てて良かったです。
リンクを赤くしたんですね＾＾；
[ 2009/08/18 21:19 ] [ 編集 ]
[ 5516 ]
いつもお世話になっております。
このブログのTOPにあるメニューのタグを教えて頂きたいのですが、よろしいですか？
[ 2009/08/19 02:22 ] [ 編集 ]
[ 5517 ] > 佐奈＠超可愛い さん
こちらの記事を参考にしてみては？
http://10plate.blog44.fc2.com/blog-entry-176.html
[ 2009/08/19 02:33 ] [ 編集 ]
[ 5519 ] > 佐奈＠超可愛いさん、uiry47さん
> 佐奈＠超可愛いさん
uiry47さんが教えてくれた記事を参考にしてください。

> uiry47さん
ありがとうございます＾＾
[ 2009/08/19 02:50 ] [ 編集 ]
[ 8334 ] ひーぱぱ
カテゴリ | TB(0) | CM(0) | △TOP

△トップを画像にしたいのですが
どのようにすればいいですか？
教えて下さい。
[ 2010/02/11 19:39 ] [ 編集 ]
[ 8335 ]
>>[ 8334 ] ひーぱぱさん
△TOP を画像タグに変更してください。
<img src="画像のURL" alt="" border="0" width="横幅" height="縦幅" />
[ 2010/02/11 20:07 ] [ 編集 ]
[ 8343 ]
tskillさん有難うございました。
感謝です＾＾
[ 2010/02/12 15:34 ] [ 編集 ]
[ 8368 ] > ヒーパパさん、tskillさん
> ヒーパパさん
tskillさんのおかげで解決できたみたいですね。

> tskillさん
いつもありがとうございます＾＾
[ 2010/02/13 22:43 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

≪ Firefox等でCSSが反映されないときは | HOME | 親カテゴリの表示 ≫

ブログ内検索1



サイトマップ

カテゴリ別全記事一覧表示

カテゴリ
お薦め カスタマイズ

【共通】


【lightframe】
【standard】
【スマホ用】

プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
iPhoneアプリも作ってます
ありがとうございます

先生達

RSSフィード
カレンダー
02 | 2023/03 | 04
日 月 火 水 木 金 土
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

02 | 2023/03 | 04
日 月 火 水 木 金 土
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -
サイト外タグ検索
ユーザータグ

メニューバー よくある質問 



△ ページトップへ戻る