僕と私の物置き場

bloggerのRead More機能は、自動で『続きを読む』というテキストが表示されます。この『続きを読む』を好きなボタンに変えたり、テキストを変更する手順を紹介します。

bloggerの『続きを読む』リンクをボタン画像に変更する

『続きを読む』をカスタムするには、使用中のbloggerテンプレートを編集しなくてはいけません。手順は下記の通りです。

まず、管理画面からテンプレート編集画面に進み、『HTMLの編集』をクリック。

『HTMLの編集は上級ユーザーのみにお勧めします』というメッセージの下の、『続行』をクリック。

テンプレートのHTML編集画面が表れるので、『ウィジェットのテンプレートを展開』にチェックを入れる。

コードが展開されたら、ctrl+ｆを押して、「post.jumpText」の記述場所を検索。そうすると、下記のようなコードが見つかるはずです。

---------
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>
---------
※前後のタグは、テンプレートによって異なります。
※「post.jumpText」が見つからない場合は、「post.hasJumpLink」や「&quot;#more&quot」で検索してみて下さい。

bloggerは、<data:post.jumpText/>の部分を自動で『続きを読む>>』として書き出しています。

これは、設定しているランゲージにより異なるので、英語設定の場合は『Read More』が書き出されます。

カスタムするには、<data:post.jumpText/>の部分を書き換えます。

※作業手順は、新インターフェースで説明しています。

『続きを読む』を『記事をチェック』に変更してみる

では、実際にカスタムしてみます。

作業を開始するまえに、テンプレートのバックアップをとっておいて下さい。
⇒テンプレートのバックアップは、テンプレート編集画面の右上『バックアップ/復元』から。

検索して見つけたコードを、下記のように書き換えます。
------
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
↓下記に変更
<a expr:href='data:post.url + &quot;#more&quot;'>記事をチェック</a>
------

これだけで、『続きを読む』リンクが『記事をチェック』に書き換えられます。

『続きを読む』をボタン画像に変更してみる

CSSで『続きを読む』をボタン風に装飾