Bloggerのプレミアムテンプレート MagOneは、デフォルトでソーシャルアイコン(SNSのアイコン)をヘッダーとフッターに設置するウィジェットを備えています。さらにリンクリストウィジェット(ガジェット)を使用して、サイドバーにソーシャルアイコンを設置することもできます。
[post_ads]
Bloggerにログインしてダッシュボードメニューから[レイアウト]ページを選択表示します。
ヘッダーかフッターの「リンク リスト」ガジェットの「編集」をクリックします。
ここでは例として、ヘッダーリンクリストガジェットを使用して、ソーシャルアイコンの設定を行います。
「新しいサイトの名前」の入力欄にFont Awesomeのアイコンコードを入力し、「新しいサイトのURL」にSNSのURLを入れて、[リンクを追加]のボタンを押します。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYuE54WBOb_ird6m3aBa54tSKficEGezRph-q6kHapJsW3Ae9_mGuURz5DHtS-CoVLOSXDfnZgaewlCLU_C2iC1yndT9APSf-HiaZdk4AyVxq6GfEuWGa5RzHg09EA-3JXSlDwSSZT7xo/s400/Setting+up+Social+Icon+on+Link+List+gadget.png)
上の画面では、Twitterのアイコンコード、"twitter-square"を入れて、Twitterのプロフィール(タイムライン)URLを入力したところです。
リンクリスト ガジェットの設定後、ブログを表示して表示の確認を行います。
MagOneのデフォルトのヘッダーレイアウトの場合、ソーシャルアイコンは、ページ右上の検索アイコンのとなりに表示されます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY6k8iJwdV4HXc4tKdjB7rz6eIQKF6qFyeTPX1wEvmRXZVUcvm4okxC4SnLQ1XcDqG2bJF14Be7CBGwidILEgzbK6z0w5XzD6lzP7-mgoZjEuYsBGWz0t2u9REPOVUfjME0zb4HpJS0z4/s400/Social+icons+on+Desktop+page+header.png)
ページのフッター右側にソーシャルアイコンが表示されています。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixylnops1Ak0oTW8eBhKIW33QR8GPo3LXwvuBEWEZ7m6wozR7EGEJcLGcj17VdICicA937ta-1dYFcX5RaNkbHC349nvcniTigBIfA-wwav3MPOM1qLKu5-Su94a-ecVQ9miQKnf-AVjY/s400/Social+icons+on+Desktop+page+footer.png)
モバイルでは、ソーシャルアイコンはフッターのみ表示されます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8kA8sks-Hxjt-6fQaMl-f8EgNZJoadRM_Gf5DgvW1_WPyz9qF_k0rilVGhGxH0z1km5PvqVnkAFEUWvf6x2P7KifY4IaanAPqX2QxLf8QUF0Mn1LBZWpnCPaX1wgn4BIJdhpLfXx4FSM/s400/Social+icons+on+Mobile+page+footer.png)
表示が問題なくされていれば、作業完了です。
[post_ads]
ウィジェット(ガジェット)の設定
ヘッダーかフッターの「リンク リスト」ガジェットの「編集」をクリックします。
![]() |
ヘッダー リンクリスト ガジェット |
![]() |
フッター リンクリスト ガジェット |
ここでは例として、ヘッダーリンクリストガジェットを使用して、ソーシャルアイコンの設定を行います。
「新しいサイトの名前」の入力欄にFont Awesomeのアイコンコードを入力し、「新しいサイトのURL」にSNSのURLを入れて、[リンクを追加]のボタンを押します。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYuE54WBOb_ird6m3aBa54tSKficEGezRph-q6kHapJsW3Ae9_mGuURz5DHtS-CoVLOSXDfnZgaewlCLU_C2iC1yndT9APSf-HiaZdk4AyVxq6GfEuWGa5RzHg09EA-3JXSlDwSSZT7xo/s400/Setting+up+Social+Icon+on+Link+List+gadget.png)
上の画面では、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のデフォルトのヘッダーレイアウトの場合、ソーシャルアイコンは、ページ右上の検索アイコンのとなりに表示されます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY6k8iJwdV4HXc4tKdjB7rz6eIQKF6qFyeTPX1wEvmRXZVUcvm4okxC4SnLQ1XcDqG2bJF14Be7CBGwidILEgzbK6z0w5XzD6lzP7-mgoZjEuYsBGWz0t2u9REPOVUfjME0zb4HpJS0z4/s400/Social+icons+on+Desktop+page+header.png)
パソコン画面フッター
ページのフッター右側にソーシャルアイコンが表示されています。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixylnops1Ak0oTW8eBhKIW33QR8GPo3LXwvuBEWEZ7m6wozR7EGEJcLGcj17VdICicA937ta-1dYFcX5RaNkbHC349nvcniTigBIfA-wwav3MPOM1qLKu5-Su94a-ecVQ9miQKnf-AVjY/s400/Social+icons+on+Desktop+page+footer.png)
モバイル画面フッター
モバイルでは、ソーシャルアイコンはフッターのみ表示されます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8kA8sks-Hxjt-6fQaMl-f8EgNZJoadRM_Gf5DgvW1_WPyz9qF_k0rilVGhGxH0z1km5PvqVnkAFEUWvf6x2P7KifY4IaanAPqX2QxLf8QUF0Mn1LBZWpnCPaX1wgn4BIJdhpLfXx4FSM/s400/Social+icons+on+Mobile+page+footer.png)
表示が問題なくされていれば、作業完了です。
コメント