僕と私の物置き場

Blogger Blog for me and me

ad

bloggerの『続きを読む』をカスタマイズ。ボタン画像にする・テキストを変更する・CSSで装飾する。

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

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

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

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

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

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

コードが展開されたら、ctrl+fを押して、「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>
------

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

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

もうお分かりだと思いますが、『続きを読む』をボタン画像に変更するには、『記事をチェック』に置き換えた部分を画像のURLに変更するだけです。

------
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
↓下記に変更
<a expr:href='data:post.url + &quot;#more&quot;'><img src='http://画像URL//ファイル名.jpg' /></a>
------

一応、テスト用に仮画像を載せておきます。


テストの際は、一度ダウンロードしてからご自分のblogger(Picasa)にアップロードしてお使い下さい。

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

CSSを利用して『続きを読む』リンクをボタン風に見せかけてみます。

この方法は、使用中のテンプレートによりタグが異なるので、CSSやテンプレート編集の自信がない人にはおすすめしません。

まず、上記と同様の方法でコードを探します。

そして、<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>を挟んでいる<div>のCSSクラスを見つけます。

下記の例では、『続きを読む』リンクが入っているDIVのCSSクラスはjump-linkです。

---------
<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>
---------

あとは、DIV.jump-linkに対してCSSを指定します。

----------
/* 『続きを読む』を右揃え+余白を調整 */

div.jump-link {
text-align: right;
padding: 10px 0;
}

/* リンクをボタン風に表示。 */
div.jump-link a {
color: white;
padding: 5px 10px;
line-height: 1.2em;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #F7780E;
font-weight: bold;
text-decoration: none;
}
----------
※CSSは、テンプレートのHTML編集画面から追加できます。


上記のCSSを使うと、上で紹介した仮のボタン画像とほぼ同じ見た目になります。
必要に応じてカスタマイズして下さい。


1 コメント:

迷い子 さんのコメント...

こんにちは。bloggerを使用しているものです。続きを読むの字の大きさを変える場合、div class='jump-link'の後に { font-size:200%; } を付け足したのですが、上手くいきませんでした。どのように修正すればいいのかご教授してくださるとありがたいです。よろしくお願いします。

コメントを投稿

僕と私のモノ置き場