スキゾイドな「ウサキさん」の思考

1人が楽なタイプ。 考え方、思うことは、人それぞれ。 「こんな人もいるんだよ」ってだけの話。

はてなブログ軽量化。SNSシェアボタン、カスタマイズ設定とスター

シェアボタンとは何?変更理由と設定メモ

私は、はてなブログに、元からある「シェアボタン」でよかった。

こだわりは、特にないです(笑)

「デザイン」は見やすくて、ちゃんと使えれば、何でもいいと考えてます。

 

シェアボタンって、どんなボタン?

シェアボタンとは、他のSNSに「記事をシェア」するボタンです

・ブックマーク

・Facebook

・Twitter

・Pocket ←これ知らない(笑)

・LINE

などのことです。ウサキさんは「記事の上下」に設置してます。

 

カスタマイズした理由

ずばり「ブログが重い」ただ、それだけ。

とにかく「軽く」したかったのよ。

 

ウサキさんの設定、メモ

f:id:Schizoid-personality:20190926164058j:plain

↑これになります

 

「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

・スマホを「レスポンシブデザイン」モードへ

・いらない「ソーシャルパーツ」のチェックを外す

f:id:Schizoid-personality:20190926164053j:plain

ちゃんと出来たか、確認する。

こちらからは、以上でございます。

 

~追記~

注意!!このまま、マネしてはいけません!!(失敗するよ)

この設定をしたい人は、以下の参考にしたブログを見てくだい!!

「B!」の下のグルグルは、師匠のお告げで改善されました♪

 

参考にしたブログ

また、お世話になりました。

おしゃれで、めっちゃ素敵なカスタマイズをされる師匠です←(勝手に呼んでます)

個展なんかもやっちゃう、すごい人でした!!

www.secret-base.org

自分に必要な部分だけ、使わせて頂きました♪

 

過去のカスタマイズ

他にやった、カスタマイズ色々

schizoid-personality.hatenablog.com

schizoid-personality.hatenablog.com

schizoid-personality.hatenablog.com

 

シェアボタンのカスタマイズ、色んな人が紹介してる方法でやってみても、なかなか上手くいかなかったんですよ。

なのでカスタマイズは、くれぐれも「自己責任」でお願いしますね!!

 

残すもの「スター」を考える

ウサキさんが残してるのは「ブックマーク」のみ。

2019.10.7(月)から「スター」を実験的に外しています。

 

やっぱり、あった方がいいのでしょうか??

どうなんだろ??

自分が他の人のブログを見た時は「スター」があれば押してます。

なかったら、ないー!!ってなります(笑)

私が読者登録してる人のを見ると、95%くらいスターがありますね…。

 

スターを押したい人は…

スターを押そうとしたのに、ない!!ってなったら…

下の方にある

↓↓ブックマークのコメント欄↓↓

ウサキさんのコメントに「スター」をつけてください♪

そしたら誰が押してくれたか、わかりますので、追いかけます(笑)

(ウサキさんがコメントをしてなかったり、反映されるのが遅い可能性もありますが…)

 

やっぱり「スター」は、あった方がイイ!!って、私が思ったら戻します☆★☆

 

※昨日から、グーグルの広告がスマホでのトップ画像に被さって、消えてくれません…。自動広告は非表示にしたのですが、どうしたらイイのでしょうか??(審査用のコードも削除してます)

 

2019.10.16追記

 SNSシェアボタンの修正と、スターについての記事を投稿しました

schizoid-personality.hatenablog.com


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