Bloggerカスタマイズ参考ブログ「MBA-HACK」さんを参考に「続きを読む」をカスタマイズしてみるっ！

あ、どもども。おれです。

Bloggerカスタマイズで一方的にお世話になっているMBA-HACKさんが
「Bloggerカスタマイズ、まとめたよ」と教えてくれたので
さっそくカスタマイズしてみました。

と、いうわけでして
今回は、MBA-HACKさんがまとめてくれているBloggerカスタマイズ方法の中から
「続きを読む」をカスタマイズしてみることにしました。

▼参考：

レイアウトを考える際に、「続きを読む」は結構厄介でした。ボタンにしても文字にしても中途半端な位置にしか表示できず、記事のボディにうまく表示しようとするも、文字が隠れてしまう形になったり、記事ボディから出して、右、左に表示してみましたが、空き領域がどうしても気になってしまいます。また、記事ボディとその下の中間に表示してみても、意図せざるしてそうなった感が半端ありませんでした。よって、記事ボディの下に幅いっぱいに表示してみました。 ...

上の記事によると、【HTMLを編集】するように書かれておりますが、ぼくの初期テンプレート「Simpleテンプレート」では必要ありませんでした。（HTMLを編集すると、エラーが出て編集できませんでした。）
※2014年現在、Simpleテンプレートは利用しておりません。

ってことで。

【カスタムCSSの編集】だけでできちゃいました。

おぉ！意外と簡単にできちゃった！！

自分のブログに合うように、余白や色など少し修正を加えた以下の内容をカスタムCSSに書き込みました。

/* 続きを読む*/

/* 個別記事全体を枠でかこむ*/.post-outer {

border: 0px solid #DCDCDC;　/*枠線の太さ・種類・色*/

-webkit-box-shadow: 0 1px 0 #C1D6EC;

-moz-box-shadow: 0 1px 0 #C1D6EC;

box-shadow: 0 1px 0 #C1D6EC;

margin: 0px 0px 80px 0px;　/*外側余白*/

padding: 0px 0px 0px 0px;　/*内側余白*/

}　

/* 「続きを読む」への指定*/

.jump-link a {

overflow: hidden;

position:absolute;

margin: 0;

left:0;

right:0;

width:100%;　/*幅の指定*/

padding: 10px 25px 10px;　/* 内側余白上右下*/

border: 1px solid #CCC;

background: #EEE;

text-decoration: none;

text-align: right;　/*文字を右寄せ*/

font-size: 120%;　/*文字サイズ*/

color: #000!important;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

/* マウスポインタが乗ったときの指定*/

.jump-link a:hover {

border: 0px solid #0E363F;　/*外枠線の太さと色*/

background: #0E363F;　/*背景色*/

color: #EEEEEE!important;　/*文字の色*/

}