テーマオプション ヘッダーとフッターのSNSアイコン

このセクションでは、ヘッダーとフッターにSNSアイコンを表示する方法について解説しています。

ヘッダーにSNSアイコンを表示するには、テーマオプション → Header（ヘッダー）→ Select a Header Layout（ヘッダーレイアウトの選択）の上から2番目から5番目のいずれかを選びます。これらのヘッダーレイアウトを選択すると、「Header Content 1または2」がレイアウトの下に表示されるので、表示するコンテンツにドロップダウンからSocial Links（SNSリンク）を選択すれば表示できます。

なお、1,6,7番目のレイアウトでは表示されません。

フッターにSNSアイコンを表示するのはとても簡単です。
テーマオプション → Footer Social Icons（フッターのSNSアイコン）→ Display Social Icons In The Footer（フッターにSNSアイコンを表示）をオンにするだけです。

このセクションでは、アイコンに関する様々な設定をします。

画像はヘッダーのものを使用していますが、フッターやカスタムアイコンも設定内容は同様です。

このオプションは、表示させるSNSアイコンのフォントサイズを設定します。

このオプションは、マウスホバーした時に何のアイコンなのかを説明するツールチップを、どこに表示させるかを設定します。

なお、カスタムアイコンについては、タイトルで設定したものが表示されます。

このオプションは、アイコンカラータイプをカスタムまたはブランドから選択します。

ブランドカラーは、facebookなら#305097、Twitterなら#00acedといった企業が定義しているカラーコードになります。

カスタムカラーを選択すると、以下のオプションが追加で表示され、アイコンとボックスカラーを自由に変更することができます。
2-4.Social Icon Color / アイコンカラー
2-6.Social Icon Box Color / ボックスカラー

このオプションは、カラータイプでカスタムを選択した場合に表示されるオプションで、アイコンカラーを設定します。

このオプションを有効にすると、SNSアイコンをボックスで表示することができます。

また、このオプションを有効にすると、以下のオプションが追加で表示されます。
2-6.Social Icon Box Color / ボックスカラー
2-7.Social Icon Boxed Radius / ボックスの角の丸み
2-8.Social Icon Boxed Padding / パディング

このオプションは、カラータイプでカスタムカラーを選択し、ボックス表示を有効にしている場合に表示されるオプションで、ボックスカラーを設定します。

このオプションは、ボックス表示を有効にしている場合に表示されるオプションで、ボックスの角の丸みを設定します。

画像は、テーマオプションで設定しているものとデベロッパーツールでそれぞれ変更した比較です。
左からFacebookが16px、RSSが24px、Twitterが32px、それ以降はテーマオプションから設定している8pxとなります。

このオプションは、ボックス表示を有効にしている場合に表示されるオプションで、ボックスのパディングを設定します。パディングは内側の余白のことなので、大きくするとアイコンが小さく、ボックスが大きくなります。

画像は、緑部分がパディングで30pxにしたものです。