$hide=page-404-mobile

$type=carousel$columns=4$cat=hide$show=home

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




パソコン画面フッター


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



モバイル画面フッター


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



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



コメント

関連記事とスポンサーリンク

名前

AdSense,4,Blogger SEO,10,Blogger 活用法,18,Bloggerの基本機能と使い方,9,Bloggerの基本設定,7,MagOne,3,SNS,4,お勧め記事,14,お知らせ,1,
ltr
item
Blogger101@ブロギングライフ : MagOneの使い方: ソーシャルアイコンの設定
MagOneの使い方: ソーシャルアイコンの設定
https://3.bp.blogspot.com/-cMYiltzBQNA/WoZr32MfD0I/AAAAAAAACC0/2SkYkirX4_Axsa7U46Hsicsmduj5JsNmQCK4BGAYYCw/s400/Header%2BLink%2BList%2BGadget.png
https://3.bp.blogspot.com/-cMYiltzBQNA/WoZr32MfD0I/AAAAAAAACC0/2SkYkirX4_Axsa7U46Hsicsmduj5JsNmQCK4BGAYYCw/s72-c/Header%2BLink%2BList%2BGadget.png
Blogger101@ブロギングライフ
https://blogger101.blogging-life.com/2018/02/magone-social-icon-setting.html
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/2018/02/magone-social-icon-setting.html
true
6719002676499593843
UTF-8
Loaded All Posts Not found any posts 全てを見る さらに読む Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事 ラベル アーカイブ SEARCH ALL POSTS お探しのページが見つかりませんでした。 Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock コードを全てコピー コードを全ての選択 全てのコードをクリップボードにコピーしました Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy