THE THOR ザ・トール 【 SNS シェアボタン 】を追尾型にする

THE THOR の【 SNS シェアボタン 】を追尾型にして表示するようにしました。

 

シェアされたいという欲望をむき出しにしたカスタマイズを行いました。

画面右側の中央部分にシェアボタンを常時表示します。

 

シェアしたいと思った瞬間にボタンが無ければシェアされません。これで取りこぼしは解消。少しはシェアされるようになるはず？？？

 

シェアボタンを右側中央に配置する仕組み

 

THE THOR に標準で装備されているシェアボタンを右側中央に移動します。

この記事のカスタマイズでは記事下に設定されているシェアボタンを移動する内容になっているので、THE THOR の設定であらかじめ記事下にシェアボタンを設置しておきましょう。

 

シェアボタンの設定には「表示場所の設定」と「ボタンのデザイン」、2つの設定があります。

 

 

シェアボタン 表示場所の設定

投稿ページと固定ページに設定可能。固定ページに設定しても表示されないページがあるのは謎仕様。

 

 

シェアボタン デザインの設定

シェアボタンのデザインは11パターン。
この記事のカスタマイズでは選択したデザインがほぼそのまま画面右側中央に移動します。デザインによっては見にくくなるので注意してください。

 

 

参考までに当サイトの現在の設定を載せておきます。

• 投稿/固定ページともに表示設定
• 上部/下部ともに表示設定
• シェアボタンのデザインはパターン3を使用

 

シェアボタンに「ありがとう」を追加するカスタマイズはこちら

 

THE THOR 【 SNS シェアボタン 】を追尾型にするcss

 

※カスタマイズは自己責任でお願いします。

以下のコードを追加cssにコピペ。※手打ちする場合は半角スペースに注意

 

/*SNS画面右側中央に移動*/
.social-bottom{
	position:fixed;
	right:0px;
	top:50%;
	-webkit-transform: translate(0px, -50%);
	transform: translate(0, -50%);
	z-index:99;
}
.social-bottom .socialList{
    display: flex;
    flex-direction: column;
}
.social-bottom .socialList__item{
	opacity:.75;
	width:26px;
}
.social-bottom .socialList__link{
    border-bottom-right-radius:0px;
    border-top-right-radius:0px;
	box-shadow:1px 1px 4px 0px #666666;
}

 

具合の悪い部分は各サイトにあわせ調整してください。

cssはざっくりと以下のようになっています。

 

 

以上で完成です。

※カスタマイズは自己責任でお願いします。

 

あとがき

 

移動したシェアボタンが多少文字にかぶっても大丈夫なようにボタンを透過しています。「くっきり表示したい」「かぶりたくない」「もっと薄くしたい」などの場合は数値を変更して見てください。

 

当サイトでは記事下のシェアボタンを移動していますが、記事上のボタンを移動して記事下のボタンは通常表示するときは.social-bottomを.social-topに変更してください。

 

実際にシェア数を見ていてPocketが良く活用されていることを知りました。

後で読むからとりあえず保存するというのがとても便利です。後から読もうと思ったら記事がみつからない何てことが多々ありますからね。オススメです。