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

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

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

▼参考：
MBA-HACK: blogger

 

 

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

 

▼参考：
MBA-HACK: 「続きを読む」を記事の下に表示する方法

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


上の記事によると、【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;　/*文字の色*/

}

MBA-HACKさん、ありがとうございました(ヽ'ω`)

 

追記

「続きを読む」という文言を「▶▶▶続きを読む」に変更しました。

 

ブログ管理画面から、

 

→【レイアウト】

→【ブログの投稿】を編集

と進みまして、

 

【投稿ページのリンクテキスト】ボックス内のテキストを編集しましょう。

【read more】とか【もっと読む】とか【(人∀・)ﾀﾉﾑ!読んでくれ!】とか【秘密の内容を知りた方はこちら】とか、なんでもお好きな文字でどぞどぞ。

 

ちなみに「続きを読む」を画像にしてボタンのようにする方法もありますよん。

▼参考：
bloggerの『続きを読む』をカスタマイズ。ボタン画像にする・テキストを変更する・CSSで装飾する。 | 僕と私のモノ置き場

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

[blogger]read-more！続きを読むを画像表示に変更する方法。 - Sunabox

--Read More-- 続きを読むの記事区切りを、なんとなく画像にしてみたくなったので、試してみました。 ...

 

ではでは。