INTEREST

---

“ 続きを読む ”の表示と設定方法

1. 1.“続きを読む”を表示する為に「追記の編集」に記述する
   • 1-1.「追記の編集」の記述方法と表示サンプル
2. 2.“続きを読む”をクリックして、ページの最上部から表示する方法
   • 2-1.「テンプレートの設定」でHTMLを編集する
3. 3.“続きを読む”の表示を編集する
   • 3-1.“続きを読む”の文字の変更方法
   • 3-2.“続きを読む”を画像に変更する
   • 3-3.このブログの“続きを読む”の設定

---

1.“続きを読む”を表示する為に「追記の編集」に記述する

“続きを読む”の表示の仕方は簡単で、「追記の編集」に何か内容を記述すれば良いだけです。
要は、トップページ（記事の一覧ページ）に表示する部分は「本文の編集」に記述して、“続きを読む”をクリックしたら表示される部分は「追記の編集」に記述します。

1-1.「追記の編集」の記述方法と表示サンプル

「管理画面」の「新しく記事を書く」もしくは「記事の管理」から、
「記事の編集」を開きます。

※過去の記事を編集する場合は「記事の管理」をクリックし、編集したい記事を選んで「記事の編集」を開きます。

「記事の編集」を開くと、「本文の編集」と「追記の編集」が上下に並んでるので、トップページ(記事の一覧ページ)に表示する内容を「本文の編集」に記述し、“続きを読む”をクリックしたら表示する内容を「追記の編集」にそれぞれ記述します。

※「追記の編集」に記述すると、トップページ(記事の一覧ページ)で各記事に“続きを読む”のリンクが自動で表示されるようになります。

↓　右の画像の内容を保存して表示すると下記のようになります。
トップページ(記事の一覧ページ)で表示するとこうなります。→
※“続きを読む”の表示を編集するには下記を参照

そして、個別の記事ページで表示するとこうなります。→
「本文の編集」と「追記の編集」に記述した全文が続けて表示されます

「本文の編集」に何も記述せず「追記の編集」にのみ内容を記述して、トップページ(記事の一覧ページ)で表示してみるとこうなります。→

以上の手順で“続きを読む”のリンクが表示され、このリンクをクリックすると各記事ページに移動し、記事の全文を読む事が出来ます。しかし、通常は続き(追記の内容)から表示するので、ページの最上部から表示したい場合は下記の設定が必要になります。

---

2.“続きを読む”をクリックして、ページの最上部から表示する方法

“続きを読む”をクリックした場合、通常は各記事ページに移動し、追記の内容から表示する仕様になってるので、ページの最上部から表示したい場合は下記の手順を行います。

このブログでは、この方法で各記事ページ最上部から表示するようにしてます。

2-1.「テンプレートの設定」でHTMLを編集する

「管理画面」の「テンプレートの設定」から「テンプレート管理」を開き、現在適用中のテンプレートのHTMLを編集します。

※HTMLの編集と言っても、ほんの数文字削除するだけなので簡単です

まず、このHTMLのソース内から「<a href="<%topentry_link>#more">続きを読む</a>」と記述されてる部分を探します。（キーボードの「Ctrl」＋「F」で探すと簡単です♪）
上記の赤字の部分をコピペで検索して、ヒットしなかった場合は検索する文字列を短くしてみて下さい。
例．「<a href="<%topentry_link>#more">」
※使ってるテンプレートによっては、“続きを読む”の部分が“Read more”等になってる場合があります。

そして、この「<a href="<%topentry_link>#more">続きを読む</a>」の部分から
「#more」だけを削除します。
すると「<a href="<%topentry_link>">続きを読む</a>」となるので、これで編集終了です。
あとは「更新」をクリックして、編集した内容を保存します。

以上の編集が完了したら、トップページ(記事の一覧ページ)で“続きを読む”をクリックして見て下さい。
各記事ページの最上部から表示されるようになってると思います。

---

3.“続きを読む”の表示を編集する

“続きを読む”を好きな文字に変更したり、画像に変更する事も可能です。
例えば、“続きを読む” を “全文を表示する” にしたり、英語の “Read more” にしてみたり、画像でボタンぽくしてみたり等、自由に編集出来ます。

このブログでは、画像を使わず、CSSでボタンっぽく見えるようにしてます。
何かの参考になればと、そのソースを下記の3-3.に記載してます。

3-1.“続きを読む”の文字の変更方法

上記2-1.の手順とほぼ同じ流れになります。
「管理画面」の「テンプレートの設定」から「テンプレート管理」を開き、現在適用中のテンプレートのHTMLを編集します。

HTMLのソース内から「続きを読む」を探します。
※「追記の編集」を記述した場合に表示される文字列（“Read more”となってる場合もあります）
※上記の手順と同じように、キーボードの「Ctrl」＋「F」で探すと簡単です。

すると、「<a href="<%topentry_link>#more">続きを読む</a>」もしくは、上記2.の手順を行っている場合は、「<a href="<%topentry_link>">続きを読む</a>」と記述された部分が見つかると思います。そして、この「続きを読む」の文字を好きな文字に変更すれば文字の変更は完了です。

その他に本文と、“続きを読む”の隙間を調節したい場合等は、<p>タグで囲ってみたり、
または、テンプレートの方で初期からタグとclass属性が設定されてる場合があるので、調整したい場合は、スタイルシート編集（CSS）の内容を修正すると良いです。
以下は、テンプレートで初期から設定されてる場合の記述例
「<p class="○○○"><a href="<%topentry_link>#more">続きを読む</a></p>」

3-2.“続きを読む”を画像に変更する

画像に変更する場合は、上記手順の「続きを読む」の文字を削除し、画像のタグを入れます。

例．「<a href="<%topentry_link>"><img src="画像のURL" alt="画像のタイトル" /></a>」
※もちろん、この時に使う画像は事前に「ファイルのアップロード」を行っておきます。

※imgタグに「width="横幅(px)"」「height="縦幅(px)"」等の属性を設定する事も出来ますが、アップロードした画像をそのままのサイズで使用する場合は、この記述は必要無いです。

文字の場合、画像の場合ともに共通で、リンク部分にマウスを乗せた時にタイトルや説明を表示したい場合は、<a>タグに「title="○○○"」を記述する。
以下は、titleを付ける場合の記述例
「<a href="<%topentry_link>" title="「<%topentry_title>」の全文表示">続きを読む</a>」
※<%topentry_title>はFC2ブログの変数で、記事タイトルが表示されます。

3-3.このブログの“続きを読む”の設定

このブログではCSSを使って、“続きを読む”をボタンっぽく表示してます。
その記述内容は以下の通りです。

<!--more_link-->
<div class="entry-more-link">
<a href="<%topentry_link>" title="「<%topentry_title>」の全文表示">
続きを読む <i class="fa fa-sign-in"></i></a>
</div>
<!--/more_link-->

※アイコン(<i>タグ)の部分は「Font Awesome 」を利用してます。
「Font Awesome」のページは英語なので使い方が分からない場合は、下記のブログが参考になります。
「これは便利！アイコン型WebフォントのCDN「Font Awesome」 / Webpark 」様

div.entry-more-link { height:35px; text-align:center; margin-top:5px;}

div.entry-more-link a{
display:block;
color:#fff;
font-size:16px;
text-decoration: none;
padding : 5px;
width:105px;
border-radius:8px;
border : 1px solid #333;
background: rgb(238,238,238);
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(153,153,153,1) 2%, rgba(85,85,85,1) 45%, rgba(51,51,51,1) 50%, rgba(85,85,85,1) 98%, rgba(119,119,119,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(2%,rgba(153,153,153,1)), color-stop(45%,rgba(85,85,85,1)), color-stop(50%,rgba(51,51,51,1)), color-stop(98%,rgba(85,85,85,1)), color-stop(100%,rgba(119,119,119,1)));
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(153,153,153,1) 2%,rgba(85,85,85,1) 45%,rgba(51,51,51,1) 50%,rgba(85,85,85,1) 98%,rgba(119,119,119,1) 100%);
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(153,153,153,1) 2%,rgba(85,85,85,1) 45%,rgba(51,51,51,1) 50%,rgba(85,85,85,1) 98%,rgba(119,119,119,1) 100%);
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(153,153,153,1) 2%,rgba(85,85,85,1) 45%,rgba(51,51,51,1) 50%,rgba(85,85,85,1) 98%,rgba(119,119,119,1) 100%);
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(153,153,153,1) 2%,rgba(85,85,85,1) 45%,rgba(51,51,51,1) 50%,rgba(85,85,85,1) 98%,rgba(119,119,119,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#777777',GradientType=0 );
box-shadow: 2px 2px 2px #777;
-webkit-transition: 0.3s;
transition: 0.3s;
}

div.entry-more-link a:hover{
color:#000;
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(208,208,208,1) 2%, rgba(153,153,153,1) 45%, rgba(119,119,119,1) 50%, rgba(153,153,153,1) 98%, rgba(187,187,187,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(2%,rgba(208,208,208,1)), color-stop(45%,rgba(153,153,153,1)), color-stop(50%,rgba(119,119,119,1)), color-stop(98%,rgba(153,153,153,1)), color-stop(100%,rgba(187,187,187,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(208,208,208,1) 2%,rgba(153,153,153,1) 45%,rgba(119,119,119,1) 50%,rgba(153,153,153,1) 98%,rgba(187,187,187,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(208,208,208,1) 2%,rgba(153,153,153,1) 45%,rgba(119,119,119,1) 50%,rgba(153,153,153,1) 98%,rgba(187,187,187,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(208,208,208,1) 2%,rgba(153,153,153,1) 45%,rgba(119,119,119,1) 50%,rgba(153,153,153,1) 98%,rgba(187,187,187,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(208,208,208,1) 2%,rgba(153,153,153,1) 45%,rgba(119,119,119,1) 50%,rgba(153,153,153,1) 98%,rgba(187,187,187,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bbbbbb',GradientType=0 );
box-shadow: 0px 0px 0px 0px #777;
transform: translate(2px,2px);
}

※改行すると、ものすごく縦長になるので改行せずにそのまま載せました。
※CSSのグラデーションは「Ultimate CSS Gradient Generator 」を利用しました。

※2014年9月25日にボタンの配色を黒っぽく変更したので、上記のソースも現在の黒バージョンに変更。