記事下にシェア用のSNSボタンを作る
記事下のSNSボタンをデフォルトからはやくデザイン整えたかったのをようやく調整しました。
今回の実装内容
ボタンの種類は
の４つ。
ホバーエフェクトは
- 少し大きくなる
- 色が少し濃くなる
- 上に少しあがる
- ボタン下に文字がでる
の４つ。
覚書シリーズ。
コードと結果
まずはいつもどおりサンプル。
See the Pen by MarumiMusic (@marumimusic) on CodePen.
※SCSSタブをクリック後、View CompiledクリックでSCSSからCSSに変換されます。
事前準備その1〜アイコン表示編
FontAwesomeで表示しているので、読み込みがまだならhead内にfontawesomeのcdnを埋め込みます。
<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
埋め込み場所
1.はてなブログ→設定から詳細設定をクリック。
2.下の方へスクロールし、
要素にメタデータを追加の欄にペースト。
事前準備その2〜GoogleFonts編
これは読み込むと結構重たくなるので、導入はどちらでも。 見本通りになるように設定する場合は以下。
@import url('https://fonts.googleapis.com/css2?family=Courgette&family=Noto+Sans+JP:wght@600&display=swap');
をデザインcssにコピペするか、 もしくは上記で説明した
要素にメタデータを追加の欄に<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Courgette&family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
をコピペ。
ほかのフォントが使いたければ、GoogleFontsにて探してみてください。
Google Fonts使わない場合はなくてOK。
コードの説明
コードの説明。
html
html部分ははてなブログのデザインから、記事下にコピペしてください。
参考サイト www.notitle-weblog.com
<!--シェアボタンの上にあるテキスト--> <span class="sns-share-text">SNS Share!</span> <!-- ここからシェアボタン --> <div class="sns-btns"> <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加" class="hatena-bookmark-button sns-btn btn-hatena" target="_blank"><span class="hatena_bkm">B!</span></a> <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="sns-btn btn-facebook" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank"><i class="fab fa-facebook-square"></i></a> <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="sns-btn btn-twitter" target="_blank"><i class="fab fa-twitter-square"></i></i></a> <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="sns-btn btn-pocket" target="_blank"><i class="fab fa-get-pocket"></i></a> </div> <!-- シェアボタンここまで -->
{}ははてなブログで使える変数。
公式によると「高度なカスタマイズ」と書かれているところで使用可能とのこと。
CSSの解説
CSSデザインの説明。
1.ボタンの箱を作る
まずは<div>ブロックでSNSボタン表示用の箱を作り、中の要素を横並びにするためにdisplay:flex;を指定。
.sns-btns { margin: 1em auto; /*上下に余白を取っておく*/ display: flex; /*横並び設定*/ justify-content: space-evenly; /*各ボタンの配置を均等に*/ max-width: 420px; /*横幅のマックス値を決めておく*/ }
2.丸を作る＆ホバー設定
箱の中身の設定。
丸を作り、アイコンの色を白くし、ホバーエフェクトをつけていきます。
/*丸を作る*/ .sns-btn { position: relative; display: inline-block; /*丸のサイズ感*/ width: 50px; height: 50px; line-height: 50px; /*heightと揃えて真ん中揃えにする*/ font-size: 1.3rem; color: white; text-align: center; border-radius: 50%; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); opacity: 0.8; transition: all 0.3s; /*アニメーションの速度は自由に*/ } /*ボタンホバー時の設定*/ .sns-btn:hover { opacity: 1; transform: translate(0, -30%) scale(1.2); /*ちょっと上に、ちょっと大きく*/ } /*ホバー時にボタン下に文字表示*/ .sns-btn:hover::before { text-align: center; position: absolute; display: inline-block; font-size: 0.6rem; bottom: -2.3rem; /*ボタンとの被り回避*/ right: 50%; transform: translate(50%, 0); /*right50%だけだとずれるので調整*/ width: 130px; /*表示文字の文字数（横幅）に合わせて調整*/ color:#888; /*好きな文字色*/ }
ここでやってるのは、大きく分けて、
- 各ボタンを作る
- 中のアイコンを白くする
- ボタンホバーでのボタンの挙動設定
- ボタンホバーで出てくる文字の設定
の4つ。
3. 各ボタンの色（背景色）、ホバー文字を設定
最後にボタンの色と、ホバーの時に表示する文字を設定。
はてブ用
はてなブログだけはFontAwesomeにアイコンがないので、はてなブログで用意されているフォントアイコンを使用するか、cssでデザインするかのどちらかになる。
以下は作るver。
/*はてブ用背景*/ .btn-hatena {background-color: #00a4de;} /*はてブアイコン*/ .hatena_bkm { padding: .1em; display: inline-block; font-family: "Tahoma"; /*フォント指定はあってもなくても*/ letter-spacing: 0.05em; text-align: center; color: #00a4de; /*背景の色と同じ*/ font-size: .8em; font-weight: bold; /*文字後ろの白い四角を作る*/ background-color: white; width: 1.2em; height: 1em; line-height: 1.2em; border-radius: 2px; } /*ホバーででてくる文字*/ .btn-hatena:hover::before { content: "はてなブックマーク"; }
アイコンを作るように<span>でB!をくくってます。
もしはてなブログのフォントアイコン使うなら<span class="hatena_bkm">B!</span>を<i class="blogicon-bookmark lg"></i>にそっくり入れ替えてください。
ほかのアイコンたち
.btn-facebook { background-color: #1778f2; } .btn-facebook:hover::before { content: "Facebookでシェア"; } .btn-twitter { background-color: #1ba1f3; } .btn-twitter:hover::before { content: "Twitterでシェア"; } .btn-pocket { background-color: #ef4155; } .btn-pocket:hover::before { content: "Pocketに保存"; }
上から、
の設定。
4. ボタン上のSNS Share!のデザイン
ちょっとおしゃんなフォントを使うと目立つ…？ 普通のフォントでも全然良いです。（GoogleFonts重いので）
擬似要素で＼／を作ってます。
.sns-share-text { font-family: 'Courgette', cursive; /*フォント指定ご自由に*/ margin-top: 2em; /*記事広告との被り回避*/ /*擬似要素とテキストを横並びにする*/ display: flex; align-items: center; justify-content: center; /*文字の位置・太さ・サイズ*/ text-align: center; font-weight: bold; font-size: 1.6rem; } /*擬似要素で＼／を作る*/ .sns-share-text::before, .sns-share-text::after { content: ""; display: inline-block; background-color: #bfeaf5; /*線の色*/ width: 1em; /*線の長さ*/ height: 3px; /*線の太さ*/ margin: 0.5em; /*文字と線の間隔*/ border-radius: 1.5px; /*ちょこっと丸くする*/ } /*角度*/ .sns-share-text::before { transform: rotate(45deg); } .sns-share-text::after { transform: rotate(-45deg); } }
まとめ
いろいろ書きましたが基本は<a>タグ部分で丸いボタンを作り、その上にFontAwesomeのアイコンを乗っけてるだけです。
位置調整のためにごちゃごちゃ書いてますが。
ホバーエフェクト設定してさらにややこしくなってしまいましたが、全部取っ払えばもっとシンプルになると思います。
LINEで送るボタンとかもつけたい…。
追記：2021/9/23 13:37
はてブのボタンを押した時に完全に別窓表示ではなく、小窓表示にしたかったのでクラス名を追加しました。
修正後htmlタグ
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加" class="hatena-bookmark-button sns-btn btn-hatena" target="_blank"><span class="hatena_bkm">B!</span></a>
クラス名hatena-bookmark-buttonがないと正しい挙動にならない。
