シェアボタンとは何?変更理由と設定メモ
私は、はてなブログに、元からある「シェアボタン」でよかった。
こだわりは、特にないです(笑)
「デザイン」は見やすくて、ちゃんと使えれば、何でもいいと考えてます。
シェアボタンって、どんなボタン?
シェアボタンとは、他のSNSに「記事をシェア」するボタンです
・ブックマーク
・Pocket ←これ知らない(笑)
・LINE
などのことです。ウサキさんは「記事の上下」に設置してます。
カスタマイズした理由
ずばり「ブログが重い」ただ、それだけ。
とにかく「軽く」したかったのよ。
ウサキさんの設定、メモ
↑これになります
「B!」の下が、ずっとグルグルしてるけど、何故かは知らない。
放置してます(笑)
設定の仕方、その1
管理画面 → 設定 → 詳細設定 → 検索エンジン最適化 → headに要素を追加 → コピペする
コピペするやつ
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
設定の仕方、その2
ダッシュボード → デザイン → カスタマイズ → 記事 → 記事上・記事下(表示させたい場所) → コピペする
コピペするやつ
<style type=text/css>/*シェアボタン*/
.share-flat .share-flat-inner .twitter-search{ background: #1DA1F2; width: 76%; height: auto; font-size: 12px; padding:4px; line-height: 0px;}.share-flat .share-flat-inner .twitter-search .share-text{ font-size: 12px;}.share-flat{ margin-bottom: 10px; text-align: center;}.share-flat-inner a { position: relative; padding:2px 0px; display: inline-block; width: 15%; height: 40px; line-height: 20px; border-radius: 4px; font-size: 16px; text-align: center; color: #ffffff; text-decoration: none;}.share-flat .small-text{ font-size: 10px;}.share-flat .hatena-bookmark-button{ background: #00A4DE;}.share-flat .twitter-button{ background: #1DA1F2;}.share-flat .facebook-button{ background: #405BA7;}.share-flat .pocket-button{ background: #EE4256;}.share-flat .line-button{ background: #00C300;}.share-flat a:active{ opacity: 0.6;}
</style>
<!--シェアボタン-->
<div class="share-flat"><span style="font-size: 8px">この記事をシェアする</span><div class="share-flat-inner">
<!--はてブ-->
<a href="https://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="https://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button"><i class="blogicon-facebook lg"></i><br><span class="small-text">Facebook</span></a>
<!--Twitter-->
<a href="https://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
<!--Pocket-->
<a href="https://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
<!--LINE-->
<a href="https://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button" target="_blank"><i class="fa fa-comment"></i><br><span class="small-text">LINE</span></a>
</div></div>
設定の仕方、その3
・スマホを「レスポンシブデザイン」モードへ
・いらない「ソーシャルパーツ」のチェックを外す
ちゃんと出来たか、確認する。
こちらからは、以上でございます。
~追記~
注意!!このまま、マネしてはいけません!!(失敗するよ)
この設定をしたい人は、以下の参考にしたブログを見てくだい!!
「B!」の下のグルグルは、師匠のお告げで改善されました♪
参考にしたブログ
また、お世話になりました。
おしゃれで、めっちゃ素敵なカスタマイズをされる師匠です←(勝手に呼んでます)
個展なんかもやっちゃう、すごい人でした!!
自分に必要な部分だけ、使わせて頂きました♪
過去のカスタマイズ
他にやった、カスタマイズ色々
schizoid-personality.hatenablog.com
schizoid-personality.hatenablog.com
schizoid-personality.hatenablog.com
シェアボタンのカスタマイズ、色んな人が紹介してる方法でやってみても、なかなか上手くいかなかったんですよ。
なのでカスタマイズは、くれぐれも「自己責任」でお願いしますね!!
残すもの「スター」を考える
ウサキさんが残してるのは「ブックマーク」のみ。
2019.10.7(月)から「スター」を実験的に外しています。
やっぱり、あった方がいいのでしょうか??
どうなんだろ??
自分が他の人のブログを見た時は「スター」があれば押してます。
なかったら、ないー!!ってなります(笑)
私が読者登録してる人のを見ると、95%くらいスターがありますね…。
スターを押したい人は…
スターを押そうとしたのに、ない!!ってなったら…
下の方にある
↓↓ブックマークのコメント欄↓↓
ウサキさんのコメントに「スター」をつけてください♪
そしたら誰が押してくれたか、わかりますので、追いかけます(笑)
(ウサキさんがコメントをしてなかったり、反映されるのが遅い可能性もありますが…)
やっぱり「スター」は、あった方がイイ!!って、私が思ったら戻します☆★☆
※昨日から、グーグルの広告がスマホでのトップ画像に被さって、消えてくれません…。自動広告は非表示にしたのですが、どうしたらイイのでしょうか??(審査用のコードも削除してます)
2019.10.16追記
SNSシェアボタンの修正と、スターについての記事を投稿しました