シェアボタンのオリジナルデザイン化は案外簡単！？こだわり入門編

本ブログに設置しているSNSへのシェアボタンは、独自コードで設定したオリジナルデザインとなっています。

今回は、シェアボタンのオリジナルデザインを行うことによるメリットや、基本的な設置方法について、簡単に紹介したいと思います。

シェアボタンとは何ぞ？

プラグインで設置できるシェアボタンのデザインがどうしても気に入らなかった、にゃあです。

そもそも、SNSへのシェアボタンとは何ぞ？

言葉では聞いたことがある方も多いと思いますが、初心者の方のためにも、そんな根本論について、簡単に説明します。

SNSへのシェアボタン設置の効果は？

ブログ運営をしていくうえで、多くの方が気にするのはpv数ではないでしょうか？

ブログを始めたばかりの段階では、検索エンジンでの表示順位も低く、なかなかpv数の増加が望めません。

この状況を打開するきっかけとして、SNSへの記事シェアがあげられます。

SNSへの記事シェアによる効果としては、シェアされたリンクからの直接的なアクセスはもちろん、検索エンジンでの表示順位の上昇に期待ができます。

これは、検索エンジンに対するSEO対策として、外部からの被リンクの設定が効果的なためです。

実際には、SNSへの記事シェア率はかなり低いため、期待しすぎない方がよいですが、シェアボタンを設置していなければ可能性はゼロです。

まだ設置していない方は、この機会に設置してみてはいかがでしょうか。

簡単に設置する方法は？

SNSへのシェアボタンを設置するには、どんな方法があるのか、簡単に説明します。

まず、ワードプレスで設定したテーマに付属している機能を使用する方法があげられます。

これは、テーマに備わっている機能を使用するため、設置方法は最も簡単です。

ただし、使用するテーマによっては、機能自体が備わっていない場合もあります。

次に、プラグインを導入する方法があげられます。

これは、プラグインをインストールし、有効化してしまえば設置できるため、テーマの付属機能に次いで簡単です。

ただし、テーマや他のプラグインとの相性によっては、記事の読み込み速度が低下する可能性があります。

また、これらの方法では、あらかじめ設定されているSNSの種類や、デザインから選択して使用することになるため、自由度は限定されてしまいます。

オリジナリティを求める人にとっては、デメリットといえるでしょう。

オリジナルデザインのメリットは？

わざわざ手間をかけてまで、オリジナルデザインに挑戦するメリットはなんでしょうか？

もう分かっているかもしれませんが、設置するシェアボタンの種類や個数、デザインを自分の好みに合わせて設定できるということです。

記事の上部や下部に設置するシェアボタンは、すべての記事に表示されることになりますので、いわばブログデザインの一部といえます。

そう考えると、こだわってみたいと感じませんか？

オリジナルシェアボタンの設置方法

では、本題に移りましょう。

テーマに付属の機能や、プラグインを使用せずにシェアボタンを設置する方法について、説明します。

本体コードの記述する

まずは、シェアボタンの本体を記事ページの構成に組み込みます。

使用しているテーマによってファイル名は異なりますが、記事ページについて定義しているHTML文書（例：ライオンメディアであれば、single.php）にコードを記述します。

下記のサンプルコードは最低限の記述にしていますので、どのような内容を書く必要があるのか、という参考にしてください。

◆　HTMLサンプルコード

上記は、6種類（Twitter、Facebook、はてなブックマーク、Google+、LINE、Pocket）のシェアボタンを設置する内容になります。

なお、各SNSの#部分は、簡略化のために省略しておりますので、正式な記述内容は、後述する別記事を参考にしてみてください。

装飾コードの記述

次に、シェアボタンのデザインを定義するため、CSSファイルにコードを記述します。

細かなデザインや、動きを持ったデザインにする程、コードは長くなります。

下記は、参考として本ブログに設置しているシェアボタンの内容になります。

◆　CSSサンプルコード

上記のオリジナルデザインについては、使用許可もいりませんので、気に入った場合は自由にご使用くださいまし。

何かのテーマ使用中における注意点

ワードプレスを利用している場合は、テーマを使用することでブログデザインを簡単かつ統一して設定することができます。

しかし、テーマは全体の構成を考えながら最適となるように作られているため、オリジナルのコードを追記する場合は、注意が必要です。

また、テーマの構成には親テーマと子テーマという考え方があるため、下準備も必要になります。

別記事では、ライオンメディアというテーマに、オリジナルのシェアボタンを設定する方法を紹介していますので、参考にしてみてください。

ろぐぶ

LION MEDIAのシェアボタンデザインはカスタマイズ可能！？こだわり実践編

https://rogubu.com/blog-share-original-lionmedia/

本ブログに使用しているライオンメディアというテーマには、SNSへのシェアボタンを設置する機能がありますが、デザインの編集機能はありません。今回は、テーマの内容をカスタマイズすること...

まとめ

本記事だけを読めば、オリジナルのシェアボタンを設置できそうな気がしませんか？

初心者の私では、なかなか上手くいかず試行錯誤を繰り返しましたが、、、

最後に紹介した別記事を読んでいただければ、私が経験した問題点は解決できるはずですので、何かしらのヒントになれば幸いです。

ではでは。