mainボタン
cssはmain.cssを使用しています。
下層用
下層ページ用に作成しているボタンです。
テーマごとに色などを変更するので都度確認してください。
html
1 |
<p class="page-more"><a href="">公式サイトはこちら</a></p> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.page-more { width: 100%; padding-top: 10px; padding-bottom: 10px; text-align: center; } .page-more a { color: #fff; text-decoration: none; display: block; background-color: #1a1a1a; text-align: center; padding: 10px; font-size: 1rem; letter-spacing: 0.03rem; transition: .3s; } .page-more a:hover { color: #fff; text-decoration: none; background-color: #ccc; } |
html
1 |
<p class="page-more2"><a href="">公式サイトはこちら</a></p> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.page-more2 { width: 100%; padding-top: 10px; padding-bottom: 10px; text-align: center; } .page-more2 a { color: #fff; text-decoration: none; display: block; background-color: #1a1a1a; text-align: center; padding: 10px; font-size: 1rem; letter-spacing: 0.03rem; transition: .3s; position: relative; } .page-more2 a:hover { color: #fff; text-decoration: none; background-color: #1a1a1a; } .page-more2 a::after{ content: " "; display: block; position: absolute; width: 100%; height: 3px; bottom: 0; left: 0; background-color: #ccc; transition: .3s; } .page-more2 a:hover::after{ width: 0; left: 50%; } |
html
1 |
<p class="page-area"><a href="">公式サイトはこちら</a></p> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.page-area { width: 100%; padding-top: 10px; padding-bottom: 10px; text-align: center; } .page-area a { color: #000; text-decoration: none; display: block; background-color: #ccc; text-align: center; padding: 10px; font-size: 1rem; letter-spacing: 0.03rem; transition: .3s; } .page-area a:hover { color: #fff; text-decoration: none; background-color: #1a1a1a; } |
トップ用
トップページ用に作成しているボタンです。
下層で使用することを想定していないので汎用性は低いです。
テーマごとに変更しています。
場合によっては作成していないかもしれません。
場合によっては.bt_more2なども作成しています。(このテーマでは作成していません。)
html
1 |
<div class="bt_more"><a href="">See all<i class="fa fa-chevron-right"></i></a></div> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.bt_more { width: 100%; text-align: center; max-width: 200px; position: relative; margin-right: auto; margin-left: auto; } .bt_more a { color: #000; text-decoration: none; display: block; text-align: center; padding: 15px 10px; font-family: 'Fjalla One', sans-serif; position: relative; letter-spacing: 0.03rem; transition:all .5s ease-in-out; background-color: #fff; } .bt_more a i{ padding-left: 0.5rem; } .bt_more a:hover { text-decoration: none; color: #fff; background-color: #000; } |
投稿一覧へ用
トップにタブで切り替わる投稿リストがある場合、投稿一覧へ飛ぶ用にボタンを作っている場合があります。
その場合、このクラスを使用することが多いです。
時と場合によりますが。
テーマによって変更しています。
下層で使用することを想定していないので汎用性は低いです。
html
1 |
<div class="inf-area"><a href=""><i class="fab fa-bootstrap"></i>READ MORE</a></div> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
.inf-area{ width: 100%; max-width: 300px; position: relative; text-align: center; margin-right: auto; margin-left: auto; z-index: 1; } .inf-area a { color: #fff; display: block; text-decoration: none; position: relative; border: 1px #000 solid; transition: .3s ease-in-out; text-align: center; padding: 1rem; font-family: 'Fjalla One', sans-serif; z-index: 1; } .inf-area a i{ padding-right: 0.8rem; } .inf-area a:hover { text-decoration: none; color: #000; } .inf-area::before{ content: " "; display: block; position: absolute; width: 100%; height: 100%; top: 0; right: 0; background-color: #000; transition: .3s; z-index: -1; } .inf-area:hover::before{ width: 0; } |
お問合せ用
フッターなどにお問合せページへのリンクがある場合、こちらのクラスを使用することが多いです。(その時々で違う場合もあります。)
下層で使用することを想定していないので汎用性は低いです。
テーマごとに変更しています。
html
1 |
<div class="inf-contact"><a href=""><i class="fas fa-envelope"></i>お問合せはこちら</a></div> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.inf-contact{ width: 100%; position: relative; margin-bottom: 0.5rem; padding-top: 1rem; max-width: 320px; margin-right: auto; margin-left: auto; } .inf-contact a { color: #ccc; border: 1px #fff solid; text-align: center; display: block; padding: 10px; text-decoration: none; background-color: #fff; font-size: 1.1rem; transition: .3s; font-weight: bold; } .inf-contact a i{ padding-right: 0.8rem; font-size: 1.3rem; } .inf-contact a:hover { color: #fff; background-color: transparent; text-decoration: none; } @media screen and (min-width: 1200px){ .inf-contact a{ font-size: 1.2rem; } .inf-contact a i{ font-size: 1.4rem; } } |