Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressのサイドバーにソーシャルメディアのアイコンを追加する方法

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressのサイドバーにソーシャルメディアのアイコンを追加する方法をお探しですか?

あなたのサイトにソーシャルアイコンを追加することは、あなたのソーシャルメディアの存在をオーディエンスに知らせる簡単な方法です。そうすれば、簡単にあなたのソーシャルプロフィールを訪問し、オンラインであなたをフォローすることができます。

この投稿では、WordPressのサイドバーにソーシャルメディアのアイコンを追加する方法を紹介します。

How to Add Social Media Icons in Your WordPress Sidebar

なぜWordPressのサイドバーにソーシャルメディアのアイコンを追加するのか?

WordPressのサイドバーとは、サイトのメインコンテンツ以外のエリアのことです。最新のブログ投稿やソーシャルプロフィールへのリンクなど、読者が興味を持ちそうな追加情報を表示することができます。

WordPressのサイドバーにソーシャルリンクを追加するのは良いアイデアです。その結果、ユーザーはそれらをチェックし、あなたをフォローし、あなたのソーシャルメディアのフォロワーを増やす手助けをすることができます。

さらに、ソーシャルメディアアカウントを表示することで、信頼感を構築し、社会的証明となります。訪問者が、あなたがソーシャルメディアで有効化した存在であることを知れば、あなたのeコマースやビジネスサイトが信頼できるものであることを示すことになります。

多くの人気WordPressブログは、WPBeginnerのようにサイドバーにソーシャルメディアのアイコンを表示している:

WPBeginner's social media icons on the sidebar

注:ソーシャルメディア・アイコンは、WordPress投稿日のソーシャル共有ボタンとは異なります。共有ボタンを追加したい場合は、WordPressでソーシャル共有アイコンを追加する方法についての初心者向けガイドをご覧ください。

ということで、WordPressサイトのサイドバーにソーシャルメディアのフォローアイコンを追加する方法を見ていきましょう。

使用するWordPressテーマやエディターによって、使用する方法は異なります。特定のセクションにスキップしたい場合は、これらのクイックリンクを使用することができます:

方法1:フルサイトエディターでソーシャルアイコンを追加する(ブロックテーマ)

ブロックテーマのユーザーなら、ソーシャルアイコンブロックを使ってWordPressのサイドバーにソーシャルメディアボタンを追加できる。

使用するテーマによって手順が異なることに注意してください。ブロックテーマによっては、初期設定でサイドバーがあり、そこにソーシャルアイコンブロックを追加できるものもあります。また、ヘッダーパターンがサイドバーのように機能するものもあれば、サイドバーがまったくないものもあります。

この例では、初期設定のWordPressブロックテーマを使用し、ソーシャルアイコンブロックを追加できるサイドバーをすべてのページまたは投稿に作成する方法を紹介します。

まず、WordPress管理画面の外観 ” エディターにアクセスします。

Selecting the Full-Site Editor from the WordPress admin panel

次に、「テンプレート」を選択する必要がある。

ページや投稿のテンプレートを編集できるページが表示されます。

Choosing the Templates menu on WordPress Editor

ここで、ページテンプレートを1つ選ぶことができます。サイドバーの位置によって、「ページ」または「個別投稿」のいずれかを選択します。

サイドバーを静的ページと投稿日の両方に表示させたい場合は、後で両方を編集することができます。また、サイドバーをそこに表示する必要がある場合、ホームページテンプレートをカスタマイズすることもできます。

今回は「ページ」を選択する。

Selecting Pages on the WordPress Editor Templates page

その後、左パネルの3点ボタンの隣にある鉛筆ボタンをクリックする。

WordPressエディターが開きます。

Clicking the pencil edit button on Pages inside the WordPress editor

ご覧の通り、初期設定のテーマにはまだページテンプレートにサイドバーがないので、サイドバーを作成する必要があります。

これを行うには、サイドバーを追加したい場所にマウスオーバーし、ブロックの追加「+」ボタンが外観に表示されたらクリックします。そして、「カラム」を見つけて選択します。

Selecting the Columns block on WordPress editor

いくつかのバリエーションから選べるだろう。

この例では、右サイドバーの標準的な外観を模倣するために「66 / 33」オプションを使用します。

Choosing one of the variations of the Columns block in WordPress editor

完了したら、投稿コンテンツブロックをカラムブロックの左にドラッグ&ドロップします。

ページテンプレートは、右カラムが空の状態で、下の画像のようになるはずです。

Moving the Post Content block to the left side of the Columns block

次に、右のカラムをクリックし、ブロックの追加「+」ボタンを選択する。

次に、Social Iconsブロックを検索する。

Searching for the Social Icons block to add to the Columns block

これで、ソーシャルメディア・プラットフォームをブロックに追加し始めることができます。もう一度「+」ボタンをクリックし、ソーシャルメディアのボタンをひとつずつ追加していきます。

検索機能を使って、すべてのソーシャルネットワークオプションを自由に閲覧できます。

Adding a social profile to the Social Icons block

ボタンをすべて追加したら、ソーシャル・プロフィールにカスタム・リンクを追加し始めることができる。

必要なのは、ソーシャルアイコンをクリックし、プロフィールのURLを入力するだけ。

Entering an Instagram account link to the Social Icons block

この段階で、アイコンの見た目をカスタマイズできる。

ボタンの大きさが十分でなかったり小さかったりする場合は、ブロックツールバーの「サイズ」オプションを使用することができます。

Customizing the buttons' sizes using the Social Icons block toolbar

左側の「ブロック設定」では、アイコンの揃え、向き、リンク設定、ラベルをカスタマイズできます。

ユーザーがソーシャルプロフィールにアクセスするためにサイトを離れる必要がないように、リンクを新しいタブで開くようにすることをお勧めします。

Social Icons Block Settings

Block Stylesタブに切り替えると、WordPressサイトのデザインに合わせてアイコンのスタイルや色を変更できます。

お好みに応じて、アイコンの色をすべて異なる色にすることも、下のように同じ色にすることもできます。

Configuring the Social Icons color and styles in the Block Styles tab

同じタブを下にスクロールすると、ブロックのマージンとスペーシングをカスタマイズするためのDimensions設定があります。

これらの設定は、ソーシャル・アイコン・ブロックとサイドバーの他のブロックとの間隔を調整したい場合に役立ちます。

Configuring the Dimensions settings of the Social Icons block

また、ソーシャルアイコンブロックの上にコール・トゥ・アクションのテキストを追加して、ボタンの場所を強調し、ユーザーにフォロワーや購読者になるよう促すのも良いアイデアだ。

これを行うには、先に進み、「+」ボタンを使用して段落ブロックを追加します。ソーシャルアイコンの上にあることを確認してください。

Adding a Paragraph block on top of the Social Icons block

コール・トゥ・アクションの例としては、「フォローする」、「X人以上の読者に参加する」、「最新の更新を入手する」などがあります。

すでにサイドバーに追加していない場合は、おすすめ投稿や 最近のコメントのような要素を追加することもできます。

ページの右上にある「保存」ボタンをクリックします。

Clicking the Save button on the WordPress editor

それで終わりだ!

WordPressのサイトにアクセスすると、サイドバーにソーシャルリンクが表示されているはずです。

Example of what the Social Icons block looks like on the front end

異なるページや投稿にユニークなサイドバーを作成し、そのすべてにソーシャルアイコンブロックを含めたい場合は、WordPressのパターンや再利用可能なブロックをサイドバー用に作成することをお勧めします。

さらに詳しく知りたい方は、WordPressブロックパターンの使い方再利用ブロックの追加方法についての初心者向けガイドをご覧ください。

方法2:WordPressウィジェットでソーシャルメディアアイコンを追加する(クラシックテーマ)

次の方法は、ウィジェット対応のサイドバーエリアがあるクラシックWordPressテーマを使っている人向けだ。

サイドバーにソーシャルメディアボタンを追加するには、WordPressダッシュボードから外観 ” ウィジェットに アクセスするだけです。

次に、ソーシャル・アイコン・ウィジェットを追加したいWordPressウィジェット・エリアに移動する。この例では「サイドバー」を選択しますが、使用しているテーマによって名前が異なる場合があります。

Navigating to the Appearance Widgets menu and selecting Sidebar on WordPress admin panel

ここで、左上の「ウィジェット」の隣にある追加ブロック「+」ボタンをクリックする。

ここで、Social Iconsブロックを探すことができます。

Choosing the Social Icons block in the WordPress Widgets settings

その後、このサイドバー・ウィジェットをクリックするか、編集エリアの任意の場所にドラッグ・アンド・ドロップする必要がある。

一般的に、ソーシャルネットワークのアイコンは、ウィジェットエリアの一番上に追加するのがベストです。そうすることで、訪問者がページにたどり着いた瞬間から注意を引くことができます。

それから、前の方法と同様に、「+」ボタンをクリックして、新しいソーシャルメディアボタンを1つずつウィジェットに追加することができる。

下の例では、ソーシャルアイコンブロックを検索ブロックの下に配置しています。WhatsAppアイコンも追加しています。

Placing the Social Icons widget below the Search widget and adding the WhatsApp icon

この時点で、ソーシャルリンクを追加し始めることができる。

WhatsAppの場合、「wa.me/」と入力し、その横にWhatsApp番号を入力します。の記号は不要ですが、このスクリーンショットのように国番号も入力して下さい。

Adding a WhatsApp number in the Social Icons block

また、右パネルのブロック設定とスタイルオプションにもアクセスできます。

これらのオプションを開くには、右上の「設定」アイコンをクリックします。

Selecting the Settings icon on the Widgets page

さらに、ソーシャルメディアウィジェットの上にパラグラフブロックを追加して、コール・トゥ・アクションのテキストを書くこともできます。

サイドバーで区切りなく見えるように、段落ブロックとソーシャルアイコンブロックをグループ化することをお勧めします。

これを行うには、段落とソーシャルアイコンを一緒に選択するだけです。その後、ブロックツールバーの「変形」アイコンをクリックし、「グループ化」を選択する。

Grouping the Social Icons and Paragraph blocks

更新が完了したら、’更新’ボタンをクリックして、すべてのサイドバーで正式に変更を行います。

最終的な結果はこうなるはずだ:

An example of what the Social Icons widget looks like on the website

方法3:SeedProdでカスタムソーシャルメディアアイコンを追加する(カスタムテーマ)

SeedProdを使用する場合、サイドバーでのソーシャルメディアボタンの見え方をよりコントロールすることができます。例えば、WordPressにアイコンがないソーシャルメディア・プラットフォームを使用している場合、そのためのボタンを自分で作成することができます。

さらに、モバイル端末用にアイコンの間隔を調整することもできます。

SeedProdを初めてお使いになる場合は、まずプラグインをインストールして有効化してください。ソーシャルプロフィール機能を利用するにはProバージョンが必要です。

プラグインのインストール方法の詳細については、WordPressプラグインのインストール方法をご覧ください。

その後、このチュートリアルに従って、SeedProdでテーマを設定することができます。

ソーシャルアイコンをサイドバーに追加するには、SeedProd ” Theme Builderにアクセスする必要があります。そして、「サイドバー」テンプレートにマウスオーバーし、「デザインを編集」をクリックします。

Clicking Edit Design on the Sidebar template inside SeedProd

SeedProdページビルダーに入りました。ソーシャルプロフィールブロックはデフォルト設定でテーマテンプレートに追加されているはずです。

そうでない場合は、左パネルの検索バーで「ソーシャル・プロフィール」と入力してください。その後、ブロックをドラッグ・アンド・ドロップするだけで、あなたに適した場所に移動できます。

Selecting the Social Profiles block on SeedProd

ボタンの上にテキストブロックを追加し、コール・トゥ・アクションのテキストを書くことも忘れずに。

こうすることで、訪問者の注意をサイドバーのソーシャルメディアボタンに向けることができる。

Creating a Follow Us text on top of the Social Profiles block on SeedProd

ソーシャルメディア・プロフィールのアイコンをカスタマイズするには、「ソーシャル・プロフィール」要素をクリックしてください。ここでは、ボタンをカスタマイズするためのさまざまなタブが表示されます。

コンテンツ」タブでは、アイコンを追加したり、アイコンのスタイル、アイコンのサイズ、配置を変更することができます。

Configuring the Content tab of the Social Profiles block in SeedProd

SeedProdには、InstagramやFacebookといった標準的なオプションの他に、Slack、Telegram、Githubなどのボタンも用意されている。

SeedProdに初期設定されていない新しいソーシャルメディアアイコンを追加するには、「+ Add New Share」ボタンをクリックする必要があります。

その後、ドロップダウンメニューから「カスタム」を選択します。

Creating a Custom social media button on SeedProd

ボタンを編集するには、矢印ボタンの横にある歯車設定のマークをクリックします。

そうしたら、『アイコンを選択』を選ぶだけだ。

Clicking the Choose Icon for the custom social media button on SeedProd

アイコンライブラリにリダイレクトされ、Font Awesomeアイコンの提供する数百のブランドアイコンから選ぶことができる。

この例ではAirbnbを使う。しかし、LinkedInやTumblrのようなプラットフォームの選択肢もある。

Choosing the Airbnb icon on SeedProd

アイコンを選択したら、色を調整し、ソーシャルメディアページへのリンクを追加することができます。

ここでは、Airbnbのブランドカラーを先頭に固定表示することにしました。ソーシャルアカウントのリンクを挿入する際は、「https://」も含めるようにしてください。

Configuring the Airbnb icon design on Social Profiles block inside SeedProd

次は「テンプレート」タブだ。

このタブに切り替えると、アイコンのデザインを調整できます。お好みに応じて、Square(正方形)、Circular(円形)、Monochromatic(単色)のいずれかにすることができます。

Editing the Templates setting for the Social Profiles block in SeedProd

最後に、’詳細’タブでは、ソーシャルメディアボタンをカスタマイズするためのより多くの方法を提供します。

スタイルセクションでは、アイコンのスタイル、色、サイズ、スペース、シャドウ効果を変更できます。

The Styles tab in the Social Profiles block settings in SeedProd

Spacingでは、ブロックのマージンとパディングを編集することができます。SeedProdの素晴らしいところは、デスクトップとモバイル端末でマージンとパディングを異なるものにできることです。

marginとpaddingを編集するには、端末アイコンを1つ選び、marginとpaddingをこのように挿入します:

Configuring the Social Profiles block spacing in SeedProd

下にスクロールすると、「端末の表示」と「アニメーション効果」があります。

最初の設定では、デスクトップまたはモバイルでブロックを非表示にすることができます。これは、サイトの別の場所でソーシャルプロフィールブロックを使用し、ソーシャルプロフィールアイコンを重複させたくない場合に必要です。

アニメーション効果では、アイコンがウェブページに読み込まれたときに、ブロックのアニメーションスタイルを選択することができます。メインコンテンツから訪問者の気をそらしたくない場合は、このエフェクトは必要ありません。

SeedProd's Device Visibility and Animation Effect settings for the Social Profiles block

ソーシャル・プロフィールのブロックをお好みに設定したら、右上の「保存」ボタンをクリックしてください。

または、「プレビュー」ボタンをクリックして、まずサイドバーがどのように見えるかを確認してください。

Clicking the Save button on SeedProd

これで完了です!これでSeedProdを使ったソーシャルプロフィールブロックの追加は完了です。

最終的にはこんな感じになるかもしれない:

Example of what the social media icons in the sidebar look like if made with SeedProd

ボーナスのヒントWordPressサイトにソーシャルメディアのプロフィールを埋め込む

サイドバーにソーシャルメディアのアイコンを追加することは、フォロワー数を増やし、社会的証明を表示するための素晴らしい第一歩です。とはいえ、WordPressサイトにソーシャルメディアのフィードを埋め込むこともできます。

これにより、訪問者はあなたのサイトで最新のコンテンツを見たり、直接あなたと関わることができるようになり、ブランドの認知度やエンゲージメントが高まる可能性があります。

WordPressにソーシャルメディアのフィードを埋め込む最も簡単な方法は、Smash Balloonを使うことです。このソーシャルメディアプラグインを使えば、サイトを様々なソーシャルプラットフォームと接続し、フィードを埋め込むことができます。

一番の魅力は?Smash Balloonでは、フィードを簡単にカスタマイズできます。こうすることで、ソーシャルメディアフィードが他のサイトデザインにマッチします。

詳しくはチュートリアルをご覧ください:

このステップバイステップガイドが、WordPressのサイドバーにソーシャルメディアのアイコンを追加する方法を学ぶのにお役に立てば幸いです。WordPressメニューにソーシャルメディアアイコンを追加する方法の投稿や、ビジネスサイトに必須のWordPressプラグインのリストもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

36件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. THANKGOD JONATHAN says

    Can I also use this WordPress Editor with Free themes? As they come with limited customizations for free users.

  3. Moinuddin Waheed says

    I have used social sharing plugin for adding social media link to my blog posts and pages.
    At times it becomes necessity to have one. This leads to increased traffic to our blog posts and lets the user to share with different platforms.
    This is something that every blog or businesses would need to have.
    Seedprod has very easy and smooth way to have social plugins to our blogs and sidebar widgets.
    Thanks wpbeginner for this guide.

  4. Jiří Vaněk says

    This was one of the first things I dealt with on the side panel: the availability of social media. I had links to social networks set up this way for quite a while. However, I found it graphically more appealing to use a floating bar on the other side. So, on the right, I had the classic right menu, and on the left side, which was unnecessarily empty (on the blog), I ended up using a plugin. There, I have floating bars with links to social networks, email, and a popup comment.

  5. Ahmed Omar says

    it looks a long process that needs attention
    Although I have my social media pages, but I did not add any icons on my site before.
    I will give it a try today as it worth the work, and with your detailed step by step explanation, it would be easy

  6. Ralph says

    I always like to read your tutorial guys. Straight to the point and multiple options. Having ability to customize icons is very nice and I will definitely use it to make my site looks better and more professional.

  7. Karen Footloose says

    This worked like a charm. Until–don’t laugh–I realized I had beautiful FOLLOW buttons while I was looking for SHARING buttons. How do I get those just as simple and customizable to go in a widget in the sidebar. I’ve looked, but haven’t found simple ones.

  8. Mathukutty P.V. says

    What is difference between jetpack social media icon and wp social media profile? jetpack have youtube provision wherea wp social media profile do not have youtube.

  9. Patrick Tuthill says

    Added a few social widgets to my current theme and it’s both do not render correctly? I am using the theme “Nisarg” which is a basic free blog theme, adn I have heard these plugins adapt differently to various themes. It’s frustrating when these widgets are for ease of use but they haven’t saved me any time. Any feedback from anyone would help. I do plan to upgrade to Genesis framework, not sure if that matters.

  10. Lora says

    The icons are not appearing in the boxes when I installed this plugin. I just see tiny letters and numbers inside the squares. Help?

  11. Maggie says

    Thank you for the article.
    I am a new blogger and I have been using your website since the beginning.
    I have to admit, if there’s any problem I come across or I need some help, I could find the answer here.
    Good job!

  12. Lindsay says

    Thank you for this advice, but how do you get it to show the Facebook, LInkedIn, Twitter icons??? All I have is grey…….

    Thank you!!

  13. jerralyn says

    Nice post, thank you for sharing this useful tutorial on how to add social media on WordPress side bar. Can I use DigDig plug-in instead of Simple Social Icons plugin?

  14. Shahnawaz says

    Dear Syed Balkhi, Sir I would like to thanks you very much and you are my best and favorite personality in WordPress world. Dear sir I will pray for you that always you will write for us. I am using your this plugin and I am daily visit you site and got updates and I will try these updates on my blog. Thanks

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。