○「続きを読む」のデザイン~基礎中の基礎メモ~
再び、こんばんは!
忘れないうちに書いときます。
いつも通り手間取ったので忘れないようにメモとして!
新しいことをやるといつも手間取る。要領が悪い!!
自分らしいなあと思う一番の瞬間です 笑。
「続きを読む」のデザイン変更。カスタマイズと呼ぶらしい。
はじめに、おことわりをしておくと僕はCSSについてど素人で理解していません。
コピペでカスタマイズしています。
↑読み返してみるとコピペで何がカスタマイズじゃい‼‼‼って思ったので消去。
簡単なコピペでさえひっかかるポイントについて書きます!!
続きを読むって?
・こんな時便利!!
→上から4番目の記事が読みたいのに、2番目の記事がやたら長くてスクロールするのがしんどい。これ興味ないのに~!!!!って時にめっちゃ便利です。
特に僕みたいなブログのデザイン(記事一覧や自己紹介が右ではなく下にある人)にとってはあればめっちゃ便利。
どうやって表示するか?
実は標準装備されています。気づかなかったけど、、、。
普通に文字をうっていても表示されませんが、ここをクリックすれば出てきます。
できたか不安な時はプレビューで確認できます^^
続きを読むを目立たせる。
こっから本題!!^^
それを目立つようにするのが今回の課題です。
完成イメージはこんな感じ。
では、やってみましょう^^
まずはCSSを入力する場所へご案内~
これを入力する。(慣れている方みたいにカッコよく表示できませんが。)
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の部分で変えられます。
完成!!
こちらのブログから勉強させていただきました。
色も明るくて見やすいなあと思っていつも拝見しています。
めっちゃわかりやすいです。いつもありがとうございます。
ちよさく。