THE THOR ザ・トール SNSボタン (シェアボタン) 一覧

当サイトでは THE THOR というテーマを利用しています。

 

• THE THOR 記事一覧
• THE THOR 公式

 

THE THOR には SNSボタンのデザインパターンが11種類あります。

ひとつひとつ切り替えてプレビューで見るのは面倒なのでデザインパターンまとめました。SNSボタンを選ぶときの参考になれば幸いです。

THE THOR SNSボタン の設定

 

SNSボタン関連の設定は以下の場所で行います。

 

ここではSNSボタン(シェアボタン)のデザインを決定します。
デザインパターンは11種類です。

 

投稿ページでのSNSボタン(シェアボタン)の表示/非表示/場所を設定します。
SNSは8種類用意されています。

 

固定ページでのSNSボタン(シェアボタン)の表示/非表示/場所を設定します。
SNSは8種類用意されています。

投稿ページと固定ページで別々に設定することができます。固定ページは記事ページとは雰囲気を変えたいという事は多くあり、とても親切な設定です。

 

※固定フッターエリアにもシェアボタンの設定がありますが、こちらはデザインの変更ができないようです。SNSの種類は選べるので固定フッターエリアを使用している人はこちらもチェックしてください。

利用できるSNSの種類

 

 

Google+はサービスが終了したので実質7種類。

どのSNSボタンを利用するのか？はたまた全て表示させるのか？難しいところですね。

SNSボタン デザインパターン

 

SNSボタン(シェアボタン)を全部見てみましょう。

※画像はタブレットサイズでのプレビューになります。
※サービスの終了したGoogle+は除きました。

 

パターン1(デフォルト)

ボタンが隙間無く並びます。画面サイズに合わせて2列3列と変化。表記はロゴマークのみ。

 

パターン２

ボタンの間に隙間があるタイプ。こちらも画面サイズに合わせて列が変化します。表記はロゴマークのみ。

 

パターン3

ロゴマークのみを四角でコンパクトに表示。コンパクトなので基本的に1列で表示されます。

 

パターン4

パターン3の立体バージョン。

 

パターン5

ロゴマークのみを少し大きな四角で表示。画面サイズにより2列になります。

 

パターン6

パターン5の立体バージョン。

 

パターン7

ロゴマークと文字を表示。横幅いっぱいになるようにボタン幅が調整されます。

 

パターン8

パターン7の立体バージョン。

 

パターン9

ロゴマークと文字を表示するタイプ。文字の長さによってボタンの幅が変化します。画面サイズにより列数が変わり左寄せで並びます。3列になるとデコボコした見た目がアクセントになります。

 

パターン10

パターン9の立体バージョン。

 

パターン11

ロゴマークと文字をコンパクトに表示。文字数で横幅が変化します。画面サイズにより列数が変わり左寄せで並びます。

 

以上です。

あとがき

 

どのデザインにするか？表示するSNSはどれにするか？

迷います。

 

現在はパターン3をカスタマイズして使用しています。カスタマイズ内容は横幅を少し長くして画面中央揃えにしています。

 

SNS シェアボタンのカスタマイズ/活用法については以下の記事をご覧ください。

パターン1/2/7/8を使用している人はTHE THOR シェアボタン【 順番を変更 】するが必見です。