シェアボタン1

＊アイコンの設定が必要です。設定はこちら

SAMPLE

B!

0

コードを表示

HTML

<div class="nomad_share1">
  <a href="http://twitter.com/intent/tweet?text=■TwitterURL■" class="icon_1"><i class="fab fa-twitter"></i></a>
  <a href="https://www.facebook.com/sharer.php?u=■facebookURL■" class="icon_2"><i class="fab fa-facebook"></i></a>
  <a href="https://b.hatena.ne.jp/add?mode=confirm&url=■はてなブログURL■" class="icon_3">B!</a>
  <a href="https://social-plugins.line.me/lineit/share?url=■ラインURL■" class="icon_4"><i class="fas fa-comment"></i></a>
  <a href="http://getpocket.com/edit?url=■PocketURL■" class="icon_5"><i class="fab fa-get-pocket"></i></a>
</div>

CSS

.nomad_share1 {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}
.nomad_share1 a {
  width: 20%;
  padding: 5px;
  transition: .2s;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-family: sans-serif;
}
.nomad_share1 .icon_1 {
  background: #1DA1F2;
}
.nomad_share1 .icon_2 {
  background: #1877F2;
}
.nomad_share1 .icon_3 {
  background: #00A4DE;
}
.nomad_share1 .icon_4 {
  background: #00B900;
}
.nomad_share1 .icon_5 {
  background: #EF4056;
}
.nomad_share1 a:hover {
  opacity: .9;
}

シェアボタン2

＊アイコンの設定が必要です。設定はこちら

SAMPLE

B!

0

コードを表示

HTML

<div class="nomad_share2">
  <a href="http://twitter.com/intent/tweet?text=■TwitterURL■" class="icon_1"><i class="fab fa-twitter"></i></a>
  <a href="https://www.facebook.com/sharer.php?u=■facebookURL■" class="icon_2"><i class="fab fa-facebook"></i></a>
  <a href="ttps://b.hatena.ne.jp/add?mode=confirm&url=■はてなブログURL■" class="icon_3">B!</a>
  <a href="https://social-plugins.line.me/lineit/share?url=■ラインURL■" class="icon_4"><i class="fas fa-comment"></i></a>
  <a href="http://getpocket.com/edit?url=■PocketURL■" class="icon_5"><i class="fab fa-get-pocket"></i></a>
</div>

CSS

.nomad_share2 {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}
.nomad_share2 a {
  width: 20%;
  margin: 0 1%;
  border-radius: 5px;
  padding: 5px;
  transition: .2s;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-family: sans-serif;
}
.nomad_share2 .icon_1 {
  background: #1DA1F2;
}
.nomad_share2 .icon_2 {
  background: #1877F2;
}
.nomad_share2 .icon_3 {
  background: #00A4DE;
}
.nomad_share2 .icon_4 {
  background: #00B900;
}
.nomad_share2 .icon_5 {
  background: #EF4056;
}
.nomad_share2 a:hover {
  opacity: .9;
}

シェアボタン3

＊アイコンの設定が必要です。設定はこちら

SAMPLE

B!

0

コードを表示

HTML

<div class="nomad_share3">
  <a href="http://twitter.com/intent/tweet?text=■TwitterURL■" class="icon_1"><i class="fab fa-twitter"></i></a>
  <a href="https://www.facebook.com/sharer.php?u=■facebookURL■" class="icon_2"><i class="fab fa-facebook"></i></a>
  <a href="ttps://b.hatena.ne.jp/add?mode=confirm&url=■はてなブログURL■" class="icon_3">B!</a>
  <a href="https://social-plugins.line.me/lineit/share?url=■ラインURL■" class="icon_4"><i class="fas fa-comment"></i></a>
  <a href="http://getpocket.com/edit?url=■PocketURL■" class="icon_5"><i class="fab fa-get-pocket"></i></a>
</div>

CSS

.nomad_share3 {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}
.nomad_share3 a {
  width: 20%;
  margin: 0 1%;
  border-radius: 5px;
  padding: 5px;
  transition: .2s;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-family: sans-serif;
}
.nomad_share3 .icon_1 {
  background: #1DA1F2;
  border-bottom: 5px solid #0A79BC;
}
.nomad_share3 .icon_2 {
  background: #1877F2;
  border-bottom: 5px solid #1559B2;
}
.nomad_share3 .icon_3 {
  background: #00A4DE;
  border-bottom: 5px solid #0F789D;
}
.nomad_share3 .icon_4 {
  background: #00B900;
  border-bottom: 5px solid #0E8B0E;
}
.nomad_share3 .icon_5 {
  background: #EF4056;
  border-bottom: 5px solid #B11F31;
}
.nomad_share3 a:hover {
  opacity: .9;
}
.nomad_share3 a:active {
  border-bottom: 0;
  margin-top: 5px;
}

シェアボタン4

＊アイコンの設定が必要です。設定はこちら

SAMPLE

B!

0

コードを表示

HTML

<div class="nomad_share4">
  <a href="http://twitter.com/intent/tweet?text=■TwitterURL■" class="icon_1"><i class="fab fa-twitter"></i></a>
  <a href="https://www.facebook.com/sharer.php?u=■facebookURL■" class="icon_2"><i class="fab fa-facebook"></i></a>
  <a href="ttps://b.hatena.ne.jp/add?mode=confirm&url=■はてなブログURL■" class="icon_3">B!</a>
  <a href="https://social-plugins.line.me/lineit/share?url=■ラインURL■" class="icon_4"><i class="fas fa-comment"></i></a>
  <a href="http://getpocket.com/edit?url=■PocketURL■" class="icon_5"><i class="fab fa-get-pocket"></i></a>
</div>

CSS

.nomad_share4 {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}
.nomad_share4 a {
  border-radius: 5px;
  margin: 5px;
  padding: .7em;
  line-height: 1em;
  transition: .2s;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-family: sans-serif;
}
.nomad_share4 .icon_1 {
  background: #1DA1F2;
}
.nomad_share4 .icon_2 {
  background: #1877F2;
}
.nomad_share4 .icon_3 {
  background: #00A4DE;
}
.nomad_share4 .icon_4 {
  background: #00B900;
}
.nomad_share4 .icon_5 {
  background: #EF4056;
}
.nomad_share4 a:hover {
  opacity: .9;
}