久しぶりにBloggerブログのちょっとしたカスタマイズを行なったのでメモります。今回は「続きはこちら>>」のカスタマイズです。画像を用意して「続きはこちら>>」をボタン画像にしようとも思ったのですが、CSSを利用したボタン風にすることにしました。使用中のテンプレートを編集するので、復元できるように「バックアップ/復元」でテンプレートのコピーを保存しておきましょう。そもそも論ですが、CSSやテンプレート編集に自信がない人は止めた方が身のためかもしれません。自己責任で行ないましょう。
- まずは「バックアップ/復元」を行なっておきましょう
マイブログの管理画面の「テンプレート」画面で「バックアップ/復元」を行ないます。「バックアップ/復元」は画面右上の「Bloggerのオプション」ボタンの隣にあります。「バックアップ/復元」ボタンをクリックすると上図のような画面が表示されます。「テンプレートをすべてダウンロード」ボタンをクリックして任意の場所にバックアップを保存して置きましょう。
- 「HTMLの編集」ボタンをクリック
バックアップが終わったら、「テンプレート」画面に戻ってオレンジ色の「カスタマイズ」ボタンの隣にある「HTMLの編集」ボタンをクリックします。
- HTMLコードの中から「post.jumpText」を検索
コードが展開されたらコードの中から「post.jumpText」を検索します。bloggerは、<data:post.jumpText/>の部分を自動で『続きはこちら>>』として書き出しているということです。下記のようなコード群が見つかったら、<div class='jump-link'>の行を確認します。「続きを読む」リンクが入っているDIVのCSSクラスはjump-linkだということが分かります。
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
</b:if>
- BloggerテンプレートデザイナーでCSSを追加
「テンプレート」の画面に戻ってオレンジ色の「カスタマイズ」ボタンをクリックします。「Bloggerテンプレートデザイナー」画面に遷移したら、メニューの中から「上級者向け」→「CSSを追加」をクリックします。｢カスタムCSSを追加｣フィールドが表示されたら「ここにCSSを追加して既存のスタイルを上書きします…」と表示されているテキストフォーム内に下記のCSSコードを入力します。入力確認の後にOKであれば「ブログに適応」のオレンジボタンをクリックすれば終了です。
/* 「続きはこちら」を右揃え+余白を調整 */
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: #009900;
font-weight: bold;
text-decoration: none;
}
- ブログページを表示して確認
「続きはこちら>>」のテキスト文字がボタン風にアレンジされましたね。完成です！
0 件のコメント:
コメントを投稿