ページの一番下に”このページの上へ”というボタンを付けるのにはどうしたらいいのですか?
他のブロガーさんの所で(livedoorの)ページの一番下に”このページの上へ”というクリックするボタンが付いてましたがそれはどのようにトップページの中に入れるのですか?それから”続きを読む”というボタンで文面を隠すのもどのように入れるのでしょうか?
初歩的な質問で申し訳ありませんがよろしくお願いします。
回答(2)
1.

ページの一番下に”このページの上へ”という クリックするボタン
ボタンですか? ボタンにするならあなた自身が画像を作成するか、もしくは汎用のフリー画像を使用する必要があります。
どのようにトップページの中に入れるのですか?
トップページだけに入れる方法ですね?
管理画面に入って、カスタマイズ/管理 > デザインの設定 > カスタマイズ > をクリックすると、CSS と4つ の HTML がでてきます。そのうちの トップページの HTML をカスタマイズします。
上からのぞいていくとこういう個所があります。↓
<IfDateFooter><div class="dateend"></div></IfDateFooter>
</IndexArticlesLoop>
この </IndexArticlesLoop> の下にトップに戻る為の HTML タグを追記します。このようにです。↓
<div align="right" style="font-size:○○px"><a href="#top">ページの上へ</a></div>
<div align="right" style="font-size:○○px">
の部分の align="right" は右に寄せる指示です。中央寄りなら center 、左寄りなら left と書き換えて下さい。
style="font-size:○○px" の ○○ に文字のサイズを書き込みます。この部分だけ、リンク時の色を任意の色に変更したり、位置の微妙な調整などをしたければ、こういう記述になります。↓
<div class="toplink"><a href="#top">ページの上へ</a></div>
そして CSS の中に新たな記述をします。書き込む場所はどこでもかまいません。このようにです。↓
.toplink{
text-align:right;
font-size:○○px;
padding:○px ○px ○px ○px;
}
text-align:right; 、 font-size:○○px;
は、前述の説明を参考にして下さい。
padding:○px ○px ○px ○px;
は、その文字の位置調整 ( 余白 ) をおこないます。左の ○ から、上、右、下、左 の位置を表します。数字を入れて調整して下さい。余白が必要でなければ、0px とします。
次にもうひとつ、リンクに対する指示が必要です。これを↓上記の記述の下に書き込みます。↓
.toplink a{}
.toplink a:link{color:#○○○; text-decoration:none;}
.toplink a:visited{color:#○○○; text-decoration:none;}
.toplink a:active{color:#○○○; text-decoration:none;}
.toplink a:hover{color:#□□□; text-decoration:underline;}
字数制限のため続きはコメント >>#1 へ続く↓
2.

わたしも説明してみます。分かりやすいほうをどうぞ。
○ ページの一番下に”このページのトップへ”というリンクを付ける
管理ページ、投稿、編集のページの横の下のほうに「注目のデザイン」というのがあります。
そこの[デザインを変更する]をクリックすると、「デザインの設定」ページが開きます。( )
一番下の右側に「カスタマイズ」をクリックすれば、スタイルシートやHTMLテンプレートを編集できるページへ行けます。
スタイルシート(CSS) | トップページ | 個別記事ページ | カテ……と並んでいるところの「トップページ」をクリックします。
トップページのHTMLテンプレートが表示されます。
中ごろより下のほうに、
<!-- Loop End --> </div> </div> <!-- Plugin A -->というところがあります。ここを
<!-- Loop End --> </div> <div class="menu"><a href="#top">このページのトップへ</a></div> </div> <!-- Plugin A -->と変えてください。
「このページのトップへ」の文は好みでご自由に。
これが思っているものと違う場合は、回答1.をご参考に。
○ 「続きを読む」によって記事を折り畳む
投稿や編集のページの一番下の「さらに詳しく設定する 」をクリックすると出てくる、「追記 」の入力欄に、折り畳みたい部分を書いてください。
ここ書いた文章は、ブログのトップページや各アーカイブでは表示されず、「続きを読む」をクリックして「個別記事ページ」を開いた時に表示されるようになります。
今までの記事は、「ブログを編集する」で開き、
記事をカットし、「追記」にペーストして、[この内容で投稿する]をクリックすることで変えてください。
コメント(3)
○ の中に、色コードを書き入れて下さい。最後の □ のところで、色を変えることで、マウスを載せた時に色が変化します。
text-decoration:none;
は、下線なし。
text-decoration:underline;
は、下線あり
■ このページの上へ”というリンクを画像にする
<IfDateFooter><div class="dateend"></div></IfDateFooter>
</IndexArticlesLoop>
この </IndexArticlesLoop> の下にトップに戻る為の HTML タグを追記します。このようにです。↓
<div class="toplink"><a href="#top"><img src="トップに行く為の設置画像" border="0" width="画像幅" height="画像高さ" title="ページの上へ"></a></div>
これで HTML 保存。次に CSS へこう記述します↓
.toplink{
text-align:right;
padding:○px ○px ○px ○px;
}
内容の説明は前述を参考に。
これで CSS を保存、CSS の再構築をかけます。
途中で言葉を割愛していますが、HTML に新しく書き込んだら保存。CSS にも新しく書き込んだら保存。そして再構築を忘れないで下さい。最終的には全て再構築をかけます。
■ 続きを読む というボタンで文面を隠すのもどのように入れるのでしょうか?
管理画面に入り、ブログの投稿 > 左サイドバーの、『 ブログを投稿する 』 、もしくは、『 投稿したブログを編集する 』 を押して投稿記事の編集画面に入ります。
その後、ページ下のほう左側にある 『 さらに詳しく設定する 』 を押すとページが下に広がります。そこにある空白欄 『 追記 』 と書かれている部分が、" 続きを読む " の部分です。
通常の投稿記事書き込み欄に文章を書き込んで、この 『 追記 』 のところに書き込めば自動的に " 続きを読む " の言葉がブログ上に表示されます。どんな感じになるか、ご自身で実験してみてください。
ナイスありがとうございました (^^)


