MagOneの使い方： ソーシャルアイコンの設定

Bloggerのプレミアムテンプレート MagOneは、デフォルトでソーシャルアイコン（SNSのアイコン）をヘッダーとフッターに設置するウィジェットを備えています。さらにリンクリストウィジェット（ガジェット）を使用して、サイドバーにソーシャルアイコンを設置することもできます。

[post_ads]

ウィジェット（ガジェット）の設定

Bloggerにログインしてダッシュボードメニューから［レイアウト］ページを選択表示します。

ヘッダーかフッターの「リンク リスト」ガジェットの「編集」をクリックします。

ヘッダー リンクリスト ガジェット

フッター リンクリスト ガジェット

ここでは例として、ヘッダーリンクリストガジェットを使用して、ソーシャルアイコンの設定を行います。

「新しいサイトの名前」の入力欄にFont Awesomeのアイコンコードを入力し、「新しいサイトのURL」にSNSのURLを入れて、［リンクを追加］のボタンを押します。


上の画面では、Twitterのアイコンコード、"twitter-square"を入れて、Twitterのプロフィール（タイムライン）URLを入力したところです。

Font Awesomeのソーシャルアイコンコード

以下は主要なSNSのアイコンコードです。 ここでは例としてスクエアのアイコンコードを表示しています。

Twitter： twitter-square

Facebook: facebook-square

Google+: google-plus-square

YouTube: youtube-square

Instagram: instagram-square

Pinterest: pinterest-square

通常（丸タイプ）のアイコンコードも設定することもできます。

リンクリストのソーシャルアイコン設定例

以下は、ブロギングライフのSNSを設定した例です。

Editをクリックして編集したり、Deleteをクリックして削除できます。各アイテムの上下の矢印で表示の順番を変更することもできます。

設定内容を確認の上、［保存］ボタンを押します。

フッターのリンクリストガジェットの設定方法は、上記と同じです。

ソーシャルアイコン設定後の表示確認

リンクリスト ガジェットの設定後、ブログを表示して表示の確認を行います。

パソコン画面ヘッダー

MagOneのデフォルトのヘッダーレイアウトの場合、ソーシャルアイコンは、ページ右上の検索アイコンのとなりに表示されます。

パソコン画面フッター

ページのフッター右側にソーシャルアイコンが表示されています。

モバイル画面フッター

モバイルでは、ソーシャルアイコンはフッターのみ表示されます。



表示が問題なくされていれば、作業完了です。