【シェアボタン】コピペするだけ!シンプルなSNSシェアボタン

f:id:ribenxiaolu:20210218185030j:image

マウスオーバーで色が変わるシェアボタンを作ってみました。

「シェアボタンはとにかく目立たせよう!」というセオリーには反しますが、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のシェアボタンはこちらの記事を参考にさせていただきました。