Building block(仮)

新卒6年目の独り言.(6年目が始まりました.)

○「続きを読む」のデザイン~基礎中の基礎メモ~

再び、こんばんは!

忘れないうちに書いときます。
いつも通り手間取ったので忘れないようにメモとして!
新しいことをやるといつも手間取る。要領が悪い!!
自分らしいなあと思う一番の瞬間です 笑。


「続きを読む」のデザイン変更。カスタマイズと呼ぶらしい。
はじめに、おことわりをしておくと僕はCSSについてど素人で理解していません。

コピペでカスタマイズしています。

↑読み返してみるとコピペで何がカスタマイズじゃい‼‼‼って思ったので消去。

簡単なコピペでさえひっかかるポイントについて書きます!!

 

続きを読むって?

・こんな時便利!!

→上から4番目の記事が読みたいのに、2番目の記事がやたら長くてスクロールするのがしんどい。これ興味ないのに~!!!!って時にめっちゃ便利です。
特に僕みたいなブログのデザイン(記事一覧や自己紹介が右ではなく下にある人)にとってはあればめっちゃ便利。

 

どうやって表示するか?

実は標準装備されています。気づかなかったけど、、、。
普通に文字をうっていても表示されませんが、ここをクリックすれば出てきます。

f:id:noxtuch:20160109002433p:plain

できたか不安な時はプレビューで確認できます^^

 

f:id:noxtuch:20160109002435p:plain

 

続きを読むを目立たせる。

こっから本題!!^^

それを目立つようにするのが今回の課題です。

完成イメージはこんな感じ。

f:id:noxtuch:20160109002902p:plain


では、やってみましょう^^


まずはCSSを入力する場所へご案内~

f:id:noxtuch:20160109002436j:plain

f:id:noxtuch:20160109002439j:plain


これを入力する。(慣れている方みたいにカッコよく表示できませんが。)

a.entry-see-more{
display: inline-block;
width: 200px;
height: 40px;
text-align: center;
text-decoration: none;
font-weight:bold;
outline: none;
position: relative;
background-color: #228b22;
border-radius: 4px;
color: #fff;
line-height: 40px;
-webkit-transition: none;
transition: none;
box-shadow: 0 3px 0 #228b22;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
a.entry-see-more::before,
a.entry-see-more::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
a.entry-see-more,
a.entry-see-more::before,
a.entry-see-more::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
a.entry-see-more:hover {
background-color: #008000;
box-shadow: 0 3px 0 #008000;
}
a.entry-see-more:active {
top: 3px;
box-shadow: none;
}

 


以上です!!
色はこれとこれで変えることができます。

#228b22の部分で変えられます。

完成!!
こちらのブログから勉強させていただきました。
色も明るくて見やすいなあと思っていつも拝見しています。

 

めっちゃわかりやすいです。いつもありがとうございます。

 

 

ちよさく。