Top ads

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-- 続きを読むの記事区切りを、なんとなく画像にしてみたくなったので、試してみました。 ...



 
ではでは。
 
 
Bloggerカスタマイズ参考ブログ「MBA-HACK」さんを参考に「続きを読む」をカスタマイズしてみるっ! Bloggerカスタマイズ参考ブログ「MBA-HACK」さんを参考に「続きを読む」をカスタマイズしてみるっ! Reviewed by Jean Kamikaze on 2/05/2013 Rating: 5

0 件のコメント:

Powered by Blogger.