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

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

 

 

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

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

 

 

THE THOR SNSボタン の設定

 

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

 


デザインを決める
外観 → カスタマイズ → パーツスタイル設定[THE] → シェアボタン設定(個別ページ用)

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

 

 

投稿ページの設定
外観 → カスタマイズ → 投稿ページ設定[THE] → シェアボタン設定

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

 

 

固定ページの設定
外観 → カスタマイズ → 固定ページ設定[THE] → シェアボタン設定

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

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

 

 


 

 

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

固定フッターエリアの設定
外観 → カスタマイズ → 共通エリア設定[THE] → 固定フッターエリア設定[スマホ専用]

利用できるSNSの種類

 

  • Facebook
  • Twitter
  • Google+
  • はてぶ
  • Pocket
  • LINE
  • LinkedIn
  • Pinterest

 

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

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

 

 

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

 

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

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

 

 


 

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

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

SNSボタン 01

 


 

パターン2

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

SNSボタン 02

 


 

パターン3

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

THE THOR SNSボタン 03

 


 

パターン4

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

THE THOR SNSボタン04

 


 

パターン5

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

SNSボタン05

 


 

パターン6

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

SNSボタン06

 


 

パターン7

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

SNSボタン07

 


 

パターン8

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

SNSボタン08

 


 

パターン9

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

SNSボタン09

 


 

パターン10

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

SNSボタン10

 


 

パターン11

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

SNSボタン11

 

以上です。

 

 

あとがき

 

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

迷います。

 

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

 

 

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

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

 

順番を変更

THE THOR のシェアボタンの【 順番を変更 】しました。     THE THOR の基本的な設定ではシェアボタンの並び順を変更することができません。 通常のシェアボタンの並びは以下の通り […]

THOR SNS シェアボタン 並び変える
画面右で追尾型

THE THOR の【 SNS シェアボタン 】を追尾型にして表示するようにしました。     シェアされたいという欲望をむき出しにしたカスタマイズを行いました。 画面右側の中央部分にシェアボタン[…]

文章を追加

THE THOR の シェアボタンをカスタマイズ してみました。   見知らぬ人がコップに入ったお水を目の前に置いたらアナタはどうしますか?   死ぬほどノドが乾いていたら飲むかもしれません。でも[…]

シェアボタン SNSボタン THE THOR
自分にシェア

LINEで自分あてにメッセージを送る方法     自分にメッセージ送ってさびしいかよ!なんて思わないで。ブックマーク代わりに使うと意外と便利です。     […]

LINE 自分にメッセージ
>ダミーのタイトルをいれて高さを保つ

ダミーのタイトルをいれて高さを保つ