WordPress

コピペでOK!ついつい押したくなるWordPress用オリジナルソーシャルボタン

★累計PV数:1,106views アクセス頂いてありがとうございます! (*ᴗˬᴗ)⁾⁾ 
 
 
いつも「みなラボ」にアクセスいただいてありがとうございます!(´∀`*)ノシ
▼「みなラボ」は「ブログランキング」と「ブログ村」の2つのランキングに参加しています!クリックで応援していただけると、もの凄く励みになります!↓(∩´∀`)∩ ※右クリック(または、長押し)「新しいタブで開く」が非常に便利です♪
 

 
ブログランキング・にほんブログ村へ

※↑それぞれクリックで「みなラボ」へ1票応援&「みなラボ」のランキング状況をご確認いただけます! 


こんにちは!や~べ~です。

まだまだ暑い日が続きますね~^^

今年は、台風の進路も変わっていて、色んな場所で雨を降らせたりしているので、用心が必要ですねっ!

 
さて今回は、コピペでOK!ついつい押したくなるWordPress用オリジナルソーシャルボタン、ということで記事を書いていきたいと思います。

 
コピペでこんな感じ↓のソーシャルボタンが設置できます。

ソーシャルボタン設置の様子

 
コードはほとんど「ままはっく」のまなしばさんのものを使っていますが、横並びに変更したり、少し手を加えています。

 
それでは、内容に入っていきます。

※Twenty Fourteenテーマでの実施内容になります。

 

コピペでOK!ついつい押したくなるWordPress用オリジナルソーシャルボタン

まずは、SNSのシェアカウントを取得する「SNS Count Cache」というプラグインを有効化しましょう!

シェア数のカウントにキャッシュを利用できるため、結果的にサイトの表示速度が速くなると言われています。

 
「SNS Count Cache」の詳細はコチラ↓の製作者まるぼんさんの記事をご覧ください。

[試] 表示速度改善のその先へ!進化するWordPressプラグイン SNS Count Cache
https://marubon.info/intro-update-wordpress-plugin-sns-count-cache-3-5403/

sikousakugo1

 
プラグインの追加方法が分からない場合はコチラを参考にして下さい。

「WordPressプラグインのインストール方法」をあえてまとめる
https://share-lab.net/wp-plugin-install1

 

HTMLコード

プラグインを有効化したら、コードを書いていきましょう!

っとその前に、

 

編集の前に!

テーマの編集をする前には、必ずバックアップをとっておきましょう!

簡単なバックアップの取り方は↓の記事を参考にして下さい。

簡単!BackWPupでWordPressをバックアップする方法
https://share-lab.net/backwpup1

 
併せて、簡易的なサイトの復旧方法↓も参考にしてみて下さい。

WordPressバックアップを使ってサイトを復旧する方法
https://share-lab.net/wp-restoration1

(特に、function.phpを編集する時は注意して下さい。編集を失敗すると、画面が真っ白になってブラウザからアクセス出来なくなります。その時は、FTPソフトで復旧します。↑の記事に復旧方法を解説しています。)

 
では、内容の続きです。

content.phpに下のコードをコピペしてください。(Twenty Fourteenの場合)

※他のテーマでは、single.phpなどの記事を出力するPHPファイルにコピペして下さい。

 
みなラボの場合は、<div class="entry-content">のすぐ下あたりと、</div><!-- .entry-content -->のすぐ上あたりの2か所にコピペしています。

これで記事の上下にオリジナルソーシャルボタンが表示されます。

コード↓
 

<!-- SNSボタン ここから -->

<?php if (is_single()) :?>

<?php
  $url_encode=urlencode(get_permalink());
  $title_encode=urlencode(get_the_title());
?>
<div id="share2">
<ul class="clearfix">
<li class="twitter">
<div class="balloon">
<a href="https://twitter.com/search?q=<?php the_permalink(); ?>%2F" target="_blank"><?php if(function_exists('scc_get_share_twitter')) echo scc_get_share_twitter(); ?></a>
</div>
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=「自分のツイッター@アカウント」&tw_p=tweetbutton"><span>Tweet</span></a>
</li>
<li class="facebook">
<div class="balloon"><?php if(function_exists('scc_get_share_facebook')) echo scc_get_share_facebook(); ?></div>
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><span>Facebook</span></a></li>
<li class="hatebu">
<div class="balloon"><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" target="_blank"><?php if(function_exists('scc_get_share_hatebu')) echo scc_get_share_hatebu(); ?></a></div>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;" ><span>はてブ</span></a></li>
<li class="googlePlus">
<div class="balloon"><?php if(function_exists('scc_get_share_gplus')) echo scc_get_share_gplus(); ?></div>
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;"><span>Google+</span></a></li>
<li class="pocket">
<div class="balloon"><?php if(function_exists('scc_get_share_pocket')) echo scc_get_share_pocket(); ?></div>
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" target="_blank"><span>Pocket</span></a></li>
<li class="feedly">
<div class="balloon feedly_count"><?php if(function_exists('scc_get_follow_feedly')) echo scc_get_follow_feedly(); ?></div>
<a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F「自分のサイト」%2Ffeed%2F" target="blank"><span><span>Feedly</span></a></li>
</ul>
</div>
<?php endif; ?>

<!-- SNSボタン ここまで -->

 
トップページ等に表示される不具合があったので、IF文を追加して、記事ページの時だけ表示させるように修正しています。

 
15行目の「自分のツイッター@アカウント」というところは、自分のTwitterアカウントを入れてください。(@を含まないように入れる)

ツイート内容に含みます。いらない場合は消してください。

31行目のFeedlyの部分にも「自分のサイト」のURLを入れてください。%2までの部分です。

例:みなラボの場合は、コード内の「自分のサイト」の部分を削除して、share-lab.netを入れる。

CSSコード

続いて、CSSの編集です。

style.cssに下のコードをコピペして下さい。

style.cssの下の方に、「Media Queries」とありますので、その直前あたりに記入して下さい。

Media Queriesの設定の無いテーマの場合は、文末で問題ないです。

 

/* ついてくるシェアボタン横 position:fixed をコメントアウトでついてこなくなる*/
#share2 {
    color: #000;
    background:#fff; /*ボックス全体の背景色*/
    width:99%; /*ボックス全体の横幅90px*/
    padding:5px;
    margin-left:0px; /*横の位置調整-115px*/
    text-align:center;
/*    position:fixed;*/
    bottom:20px; /*下の位置調整*/
    list-style-type:none;
    border-radius: 5px;
}
#share2 ul {
    list-style: none;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 0px;/*もとは10px*/
}
#share2 ul li {
/*    float: left; */
display: inline-block;/*横並びにする為に追加*/
/*    width: 80%;*/
width: 15%;
/*    margin-bottom: 15%;*/
    margin-bottom: 3%;
}
#share2 ul li > a {
    overflow: hidden;
    position: relative;
    display: block;
    width: 95%;
    margin: 0 auto;
    padding: 0.9em 0.5em; /*ボタンの余白で大きさを調整*/
    color: #fff;
    font-size: 60%;
    text-align: center;
    text-shadow: none;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#share2 ul li > a:hover {
    top: 2px;
}
#share2 ul li > a:active {
    top: 3px;
    box-shadow: none;
}
#share2 ul li > a i {
    margin-right: 0.25em;
    color: rgba(0,0,0,0.3);
    font-size: 1.5em;
    vertical-align: middle;
}
/* ブランドカラー */
#share2 ul li.twitter > a {
    background: #55acee;
    box-shadow: 0 3px 0 #468EC5;
}
#share2 ul li.facebook > a {
    background: #315096;
    box-shadow: 0 3px 0 #1F3669;
}
#share2 ul li.hatebu > a {
    background: #008fde;
    box-shadow: 0 3px 0 #0270AC;
}
#share2 ul li.googlePlus > a {
    background: #dd4b39;
    box-shadow: 0 3px 0 #B94031;
}
#share2 ul li.pocket > a {
    background: #ee4056;
    box-shadow: 0 3px 0 #C53648;
}
#share2 ul li.feedly > a {
    background: #6cc655;
    box-shadow: 0 3px 0 #5CA449;
}
/* ブランドカラーマウスオーバー */
#share2 ul li.twitter > a:hover {
    box-shadow: 0 1px 0 #468EC5;
}
#share2 ul li.facebook > a:hover {
    box-shadow: 0 1px 0 #315096;
}
#share2 ul li.hatebu > a:hover {
    box-shadow: 0 1px 0 #008fde;
}
#share2 ul li.googlePlus > a:hover {
    box-shadow: 0 1px 0 #dd4b39;
}
#share2 ul li.pocket > a:hover {
    box-shadow: 0 1px 0 #ee4056;
}
#share2 ul li.feedly > a:hover {
    box-shadow: 0 1px 0 #6cc655;
}
/* ブランドカラーアクティブ */
#share2 ul li.twitter > a:active {
    background: #468EC5;
}
#share2 ul li.facebook > a:active {
    background: #1F3669;
}
#share2 ul li.hatebu > a:active {
    background: #0270AC;
}
#share2 ul li.googlePlus > a:active {
    background: #B94031;
}
#share2 ul li.pocket > a:active {
    background: #C53648;
}
#share2 ul li.feedly > a:active {
    background: #5CA449;
}
#share2 ul li.line {
    display: none;
}
#share2 ul li.line > a {
    background: #00c300;
}
/* シェア数吹き出し */
#share2 ul li .balloon {
    position: relative;
    margin: 0 auto 0.5em;
    padding: 0.2em 0.25em; /*吹き出しの余白*/
    width: 95%;
    color: #aaa;
    text-align: center;
    border: 1px solid #ddd;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
#share2 ul li .balloon:before,
#share2 ul li .balloon:after {
    content: "";
    position: absolute;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    margin-left: -7px;
    border: 7px solid transparent;
}
#share2 ul li .balloon:before {
    bottom: -14px;
    border-top-color: #ddd;
}
#share2 ul li .balloon:after {
    bottom: -12px;
    border-top-color: #fff;
}
#share2 ul li .balloon a {
    display: block;
}

 
横幅など適宜調整して使って下さい!

 
参考にさせていただいたサイト

 
コピペでOK!スクロールしてもついてくるオリジナルソーシャルボタンをブログに設置する方法
http://mama-hack.com/scroll-snsbox

mamahac-sns1

 
CSSで横並びレイアウトを実現簡単にするinline-blockとは?
https://www.sejuku.net/blog/52822

 
【CSS】ul,olのリストを横並びにするときにfloatじゃなくてdisplay:inline-blockを使う方法
http://delaymania.com/201404/web/list-inline-block/

sannk-delay1

 

まとめ

コピペでOK!ついつい押したくなるWordPress用オリジナルソーシャルボタン、ということで記事を書かせていただきましたが、いかがでしたでしょうか?

HTMLやCSSが分からなくても、コピペならばやれると思います。

コピペをベースに自分好みにアレンジしてくことが、WordPressやHTML、CSSを理解することに繋がると思います。

簡単にオリジナルのソーシャルボタンを追加できると思いますので、せひ試してみてみくださいねっ!

 
じゃあ、今回はここまでっ!!

ではではっ!(´∀`*)ノシ

 

おすすめのレンタルサーバー

 
『XSERVER』

みなラボもこの『XSERVER』を使っています!^^
プランによっては最安月額900円(税別)で、200GBのサーバー容量を確保できます!

継続更新は、クレジット引き落としで自動更新出来て楽チン!

サーバーデータは、7世代に遡ってバックアップしてくれているので、もしもの時にも安心!

サーバーをコントロールするの為のインタフェースとなる「サ-バーパネル」の操作性も抜群!

サーバーデータの復元も、過去7日以内ならば、「サ-バーパネル」から簡単に操作可能!

もちろん、サーバーとしての基本となる処理速度、安定性も申し分ないと思います♪

 


 

ランキング

 
↓ランキング参加してます!よろしければ、クリックで応援して下さいっ!

にほんブログ村

 
↓こちらもお願いしますっ!

人気ブログランキングへ
 

『WordPressブログの作り方』※初心者必見!(>∀<)ノ☆
 
①どんなブログにするのか考える。
 
 ⇒さあ始めよう!なせば成る「0から始めるwordpressサイトづくり」
 
②レンタルサーバーを借りる。
 
③ドメインを取得する。
 
④ネームサーバーDNS設定をする。
 
 ⇒ムームードメインで取得した独自ドメインをエックスサーバーで使う設定方法
 
⑤WordPressをインストールする。
 
 ⇒エックスサーバーへワードプレスを簡単にインストールする方法
 
⑥テーマをインストールする。
 
 ⇒僕が「AFFINGER5」を激推しする「3つの理由」
 
 ⇒【かんたん解説】AFFINGER5(アフィンガー5)テーマを購入する方法&手順
 
 ⇒「AFFINGER5」をWordPressへインストールする手順
 
⑦アイコン、ヘッダーなどを作る。
 
 ⇒フリーソフトのみでアイコン作成する方法まとめ
 
 ⇒WPサイト用オリジナルヘッダーデザイン作ってみた
 
⑧お好みにサイトデザインする。
 
⑨サーチコンソール、アナリティクスへ登録する。
 
⑩アドセンスや各アフィリエイトへ登録する。
 
⑪記事を書く。
 
⑫試行錯誤しながら、ブログ運営を続けていけば、徐々に収益を上げることができると思います!(>∀<)ノ☆
 
 
こちらの記事もオススメ!(>∀<)ノ☆
 
【エントリー忘れで損してるかも!?】楽天市場お買い物マラソン&楽天市場スーパーセールのお得なポイントアップキャンペーン、クーポン、SPUなど、おすすめエントリー11選一覧まとめ
 
僕が「AFFINGER5」を激推しする「3つの理由」~WordPressブログ収益化への近道のために~
 
たぶん新型コロナウイルスに感染したであろう僕が完治するまでの症状を記録した闘病日記
 
Androidスマホで楽天モバイルの申し込みができない時の解決方法
 
【誰でもずっと1回線目は1GBまで無料!】急げ!楽天モバイルが最大25,000ポイント還元キャンペーン実施中!【祝300万回線達成】
 
『2021年更新版』Windows10も可! Movie Maker「ムービーメーカー」をダウンロードする方法
 
嫁の遺伝子検査結果をコソッと紹介(笑)GeneLife(ジーンライフ)の肥満遺伝子検査DIET(ダイエット)を試してみた結果。。。
 
【2021年版】メルカリ匿名配送「らくらくメルカリ便」「ゆうゆうメルカリ便」の使い方、送料・サイズ・重量一覧&出品手数料について
 
 

こちらの記事もよく読まれています。↓(※広告含む)

 

 

最後までお読みいただいて、ありがとうございます。

もしこの記事を気に入っていただけたなら、SNSで共有していただけると、とても嬉しいです!どうぞ、よろしくお願いいたします!m(_ _)m

▼「LINEいいね」ボタンを押して、この記事をタイムラインでシェアして頂けると、非常に喜びます!(∩´∀`)∩
 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで『みなラボ』をフォローしよう!

▼「Feedly」、「RSS」、「Push7」での購読はこちらから設定して頂けます!
 
follow us in feedly
 
 
▼「みなラボ公式LINE」の友だち追加はこちらからお願いいたします!
新規記事更新時に「お知らせ」させて頂きます!
 

-WordPress
-, ,

© 2021 みなラボ