はてなブログの"続きを読む"のカスタムcss【ブログカスタムVol.1】

f:id:george-gogo:20151209152753j:plain

昨晩、はてなブログはどれくらいカスタムできるのかなー?なんて調べてたら結構いろいろできるじゃないの。ってことで暇を見つけてカスタムしていこう!

※追記

新しくもっと簡単にカスタムをできる記事を更新しましたので、こちらをご参照ください。 

 

"続きを読む"のカスタム

まず最初に、今んとこ僕が使っているブログテンプレートはトップページに記事が丸ごと全部表示されている状態。

これはいやだねー。読みたくない人には邪魔でしかない。

と、いうわけで記事の編集ページの左上に”続きを読む”を挿入するボタンがあったのでポチ。できた!

でも目立たないねー。

よし!目立つようにカスタマイズしてみよー!

 ”続きを読む”のクラス名は.entry-see-more

インターネットサイトがブラウザに表示されるにあたって、まず基本となるのは

html

css

です。

htmlってのは、いわば骨組み、土台、表示させるためのもの。

cssはhtmlを装飾するためのもの。

詳しく知りたければググって下さいね!

 

で、クラス名とはhtmlで「ここの部分はこの名前にしよう。」ってネーミングすることを言います。

例えば、車を最初に作った人が、「ここの”丸い棒状のやつ”を動かすと”丸い輪っか”が動くよ!」じゃ分かりづらいですよね。

だから「ここの”ハンドル”ってのを動かすと”タイヤ”が動くよ!」って名前つけたのよ。

本当適当な例え(伝わったかな…)。

 

その”続きを読む”のクラス名が.entry-see-moreってこと。

 

 

cssを書いてみよう(実際には打つ。)。

まず デザイン →カスタマイズ → デザインcss に行きましょう。

 

f:id:george-gogo:20151209113839p:plain

ここの部分です。

ここに下記のcssをペロッと張れば今の通り!

.entry-content .entry-see-more {

	-moz-box-shadow: 1px -1px 0px -1px #acb3ac;
	-webkit-box-shadow: 1px -1px 0px -1px #acb3ac;
	box-shadow: 1px -1px 0px -1px #acb3ac;
	background-color:transparent;
	-moz-border-radius:29px;
	-webkit-border-radius:29px;
	border-radius:29px;
	border:2px solid #ec7956;
	display:inline-block;
	cursor:pointer;
	color:#ec7956;
	font-family:メイリオ;
	font-size:19px;
	padding:8px 40px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ccc7c4;
	float:right;
}
.entry-content .entry-see-more:hover { 

	background-color:#ec7956;
    color:#fff;

}



 

3分くらいで書いたので、ミスあるかも。でも動いてるからオッケーオッケー。
細かい説明はしませんよー。
色を変えたい人は

(241, 120, 101,1)を変更すれば変わります。

f:id:george-gogo:20151209145309p:plain


さて、次はどこをいじろう。