ココまとめ

ゲーム、映画、ドラマを中心に記事にしていきます

ココまとめ

ーおすすめ記事ー

【カスタマイズ】はてなブログで「画面固定シェアボタン」を簡単コピペ設置方法

f:id:coco090:20190804171533j:plain

みなさまこんばんは。

最近自分のブログデザインを本格的にいじっております。
以前より使いにくくなっていたらすみません・・・。

1週間程前ですが、
ブログの変更点の中に「シェアボタン」があったのはお気づきでしょうか?

このシェアボタンはブログ内の記事を見たときのみ、
常に手前に固定された状態で表示されるようになっております。

詳しい仕組みは分からなくても、
外部サイト「Add This」を使うことによって
簡単にカスタマイズしてコピペで設置することが可能です。
今回はこのシェアボタンの設置方法についてご紹介したいと思います。

シェアボタンとは?

f:id:coco090:20190804172750j:plain

PC版

f:id:coco090:20190804172803j:plain

スマホ版

そもそも、トップへ戻るボタンとは何ぞや?
シェアボタンとは、
ボタン一つで「Twitterや、facebook、はてなブックマーク等といった
SNSへシェアすることが出来るボタン」のことです。

このボタンを設置することで、読む側もシェアボタンを探す手間が省け、
結果、自分の記事もシェアされ易くなるのではないでしょうか。

シェアボタンの設置方法

「Add This」のサイトへアクセス

まずは「Add This」のサイトへアクセスしましょう。

⇒サイトへアクセス

f:id:coco090:20190804174412j:plain

英語だと分かり難いので、右上のタブから「日本語」を選択して日本語化しますが、
結局この先英語になるので、どちらでも大丈夫です。

f:id:coco090:20190804174658j:plain

次に「始めましょう、無料です」をクリック。

「Add This」のへサインンイン

f:id:coco090:20190804174813j:plain

Add Thisへサイインインをするため、会員登録しましょう。
内容は適当に入力しておけば大丈夫です。

シェアボタンの作成

f:id:coco090:20190804174938j:plain

左上の「Share Buttons」をクリックしてシェアボタンの作成に取り掛かります。

Select a Tool Type

f:id:coco090:20190804175642j:plain

まずはシェアボタンの種類を選びます。1
今回は一番うえの「Floating」を例にとって紹介します。

続いて「Continue」を押します。2

補足

f:id:coco090:20190804192629j:plain

上のにある、パソコンとスマホのアイコンをクリックすると、
プレビュー表示を切り替える事ができます。 

Sharing Services

f:id:coco090:20190804180100j:plain

下側のチェックボタン「Selected by You」を選ぶと、
下にシェアボタンの種類が表示されますので、
自分のサイトに追加したいシェアボタンを選択し、不要なものは削除しましょう。

Design 

f:id:coco090:20190804191552j:plain

続いて、隣のタブの「Design」を編集します。

1.Mobile Size・・・スマホで見た時のサイズをプルダウンから選択します。

2.Button Color・・・ボタン背景の色を変更します。

3.Icon Color・・・アイコン色を変更します。

4.Style・・・アイコンのスタイルを変更します。アイコン間に隙間を作れます。

5.Label・・・ラベルを記載します。

ご自身の好きなようにカスタイマイズしたら次へ進みます。

Share Counters 

f:id:coco090:20190804191657j:plain

更に隣へ進み、「Share Counters」を編集します。

カウンターを表示したい方はShare Counter TypeIndividualのままで大丈夫です。
表示したくない人はプルダウンからNoneを選択しましょう。

私は非表示に設定してます。

Position

f:id:coco090:20190804192755j:plain

更に右のタブへ進み、「Position」の編集を行います。

DesktopとOn Mobileのプルダウンメニューから好きな位置に動かすことができます。

Responsive Widthはレスポンシブをどの幅の値から切り替かわるか設定できます。

Desktop Vertical OffsetはPCの場合の表示を、
画面最上段からどのくらいの位置で行うか設定できます。

特にこだわりが無ければ、このままで大丈夫です。

Behavior

f:id:coco090:20190804193627j:plain

最後は「Behavior」です。

ここは特に何も考えずに最下端のActivate Toolをクリックしましょう。

HTMLコードの取得

f:id:coco090:20190804200402j:plain

右上の「Get The Code」をクリックします。

f:id:coco090:20190804200539j:plain

少しページを下側へスクロールさせると、コードが記載されたセルが見えてきます。

そこで「+」を押すと、コードがコピーされます。

はてなブログへの貼りつけ

f:id:coco090:20190804200829j:plain

はてなブログの管理画面へ行き、
「設定」⇒「デザイン」⇒「カスタマイズ」⇒「記事」⇒「記事下」の一番最後へ、
先ほどコピーしたコードを貼りつければ完了です。

最後に

これでシェアボタンが完成します。

如何でしたでしょうか?
いろいろ長く記載しましたが、
HTMLやCSSに詳しくない方でも簡単に出来る方法が今回紹介したやり方です。

シェアボタン作りたいけど作り方分からない!難しい!
という方のお役に立てれば幸いです。

追伸
あれ?
「cocoのスマホ画面のシェアボタンと違うぞ!?」
と思った方もいられるかもしれませんが、
私の場合は、スマホの画面で、はてなブックマークのシェアボタンが
うまく動かない時があったので、私は別な形式に変えてます。
もし需要があれば作り方を別途記事に致します。

PC画面のほうは問題無かったので、そのままこれを使っております。

この記事でシェアボタンを導入した方は、
スマホサイトのほうも要確認頂くようお願い致します。