当サイトでは 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の種類
- Google+
- はてぶ
- LINE
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 シェアボタン【 順番を変更 】するが必見です。
THE THOR のシェアボタンの【 順番を変更 】しました。 THE THOR の基本的な設定ではシェアボタンの並び順を変更することができません。 通常のシェアボタンの並びは以下の通り […]
THE THOR の【 SNS シェアボタン 】を追尾型にして表示するようにしました。 シェアされたいという欲望をむき出しにしたカスタマイズを行いました。 画面右側の中央部分にシェアボタンを常時表示します。 […]
THE THOR の シェアボタンをカスタマイズ してみました。 見知らぬ人がコップに入ったお水を目の前に置いたらアナタはどうしますか？ 死ぬほどノドが乾いていたら飲むかもしれません。でも[…]
LINEで自分あてにメッセージを送る方法 自分にメッセージ送ってさびしいかよ！なんて思わないで。ブックマーク代わりに使うと意外と便利です。 LINE 自分にメッセージを送る 方法は簡単です。[…]