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

hatenacustom

スポンサードリンク



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

※追記

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

【保存版】簡単コピペの"続きを読む"ボタンデザイン集【はてなブログカスタムVol.11】

2016.01.28

“続きを読む”のカスタム

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

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

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

でも目立たないねー。

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

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

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

html

css

です。

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

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

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

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

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

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

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

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

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

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

ここの部分です。

ここに下記の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)を変更すれば変わります。

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

コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

東京生まれ東京育ち。フレンチのコックからIT業界に飛び込み、アプリ制作会社を友人と経営してたけど、結婚して会社を抜けて北海道に移住。現在は北海道でサラリーマンをやりながら、野望に向かって切磋琢磨。