マウスオーバーで色が変わるシェアボタンを作ってみました。
「シェアボタンはとにかく目立たせよう！」というセオリーには反しますが、innocentなどのシンプルなテーマによく合います。
目次
コピペの前の準備
ダッシュボード＞ デザイン＞ ＞ 記事と進み、ソーシャルパーツのチェックを全て外してください。
※コピペ開始前に必ず現在のコードのバックアップを取っておいてください。
コードやテーマの組み合わせで、思わぬ不具合が起きる可能性があります。
コピペ用コード
See the Pen bGwMbKP by Xiaolu (@Ribenxiaolu) on CodePen.
先ほどと同じくダッシュボード＞ デザイン＞ ＞ 記事と進み、コードをコピペしていきましょう。
HTMLコードは記事にコピペします。
記事下または記事上、お好きなところでお使いください。
CSSコードは｛｝デザインCSSにコピペしてください。
CSSが上手く反映されない場合
ブログテーマの影響でCSSが反映されない場合があります。
その場合は、HTMLをコピペしたのと同じところ(記事下なら記事下)に以下のようにCSSのコードをコピペしてください。
(HTMLコード)
<style type="text/css">
(ここにCSSコードをコピペする)
</style>
スマートフォンの設定
レスポンシブデザインを設定していない場合は、スマホ用の設定が必要になります。
デザイン＞ ＞ 記事と進み、記事下または記事上にHTMLコードをコピペしてください。
次に、HTMLをコピペしたのと同じところ(記事下なら記事下)に以下のようにCSSのコードをコピペしてください。
(HTMLコード)
<style type="text/css">
(ここにCSSコードをコピペする)
</style>
WeChat(微信)用コード
See the Pen ZEpxNMp by Xiaolu (@Ribenxiaolu) on CodePen.
当ブログでは、Facebookの代わりにWeChat用のシェアリンクを置いています。
御入用の方がいらっしゃればお使いください。
「ここにブログのURLを記入してください」の部分をご自身のブログURLに書き換えてください。
当ブログの場合はhttps://www.ribenxiaolu.meです。
パソコンの場合はQRコードの読み込み、スマホやタブレットの場合はURLのコピーになります。
さらにカスタマイズしてみる
フォントや色を変えると、雰囲気がガラッと変わります。
ブログに合わせてカスタマイズしてお使いください。
HTMLのカスタマイズ
<b>Shara me!</b>
文言を変えることができます。
<b></b>を消すと太字設定を解除できます。
<i class="blogicon-bookmark lg"></i>
テキスト横のアイコンを変えることができます。
CSSのカスタマイズ
padding-right: 5px;
各リンクボタンの右側の隙間を調整することができます。
color: #000;
文字の色を変えることができます。
font-family: arial;
フォントを変えることができます。
text-decoration: none;
リンクテキストの下線を消しています。
この記述を消すと下線が復活します。
font-size: 10px;
文字の大きさを変えることができます。
初期設定では変更していません。変えたい場合は追記してください。
.share-btn-hatebu:hover{
color: #EF4155;
:hoverと書いてあるところがマウスオーバー時のカスタマイズです。
マウスオーバー時のリンクテキストの色を変えることができます。
参考にした記事
HTMLコードはこちらの記事を参考にさせていただきました。
WeChatのシェアボタンはこちらの記事を参考にさせていただきました。
