MENU
無料相談はこちらから
無料相談はこちらから

【WordPress】Instagramアイコンの色を変更する方法（グラデーションにも対応）

WordPress

SWELLでサイトを作っていると、
「Instagramアイコンの色を変えたい」と思うことはありませんか？

・サイトのデザインに合わせたい
・公式っぽいグラデーションにしたい
・目立たせてクリック率を上げたい

この記事では、HTMLを変更せずにできる方法を中心に分かりやすく解説していきます。

目次

デフォルトのInstagramアイコンについて

SWELLのSNSアイコンは、このような構造になっています。

  • SVG形式のアイコン
  • 色はCSSのfillで制御

そのため、通常の文字色（color）では変更できない点に注意が必要です。

方法①：単色で色を変更する

サイトの雰囲気に合わせて、好きな色に変更する方法です。

/* Instagramアイコンの背景色とアイコン色を変える */
.wp-social-link-instagram a {
    background-color: #FFF3E0 !important;    /* 背景色 */
    border-radius: 50% !important;
}

/* アイコンの色 */
.wp-social-link-instagram svg {
    fill: #FB8C00 !important;
}

方法②：グラデーション風に見せる

SVG自体にグラデーションをかけるにはHTML編集が必要ですが、「背景をグラデーションにして、アイコンを白抜きにするCSS」だけでもそれっぽく見せることが可能です。

/* 背景をグラデーションにする */
.wp-social-link-instagram a {
  background: linear-gradient(45deg, #833AB4, #E1306C, #F77737, #FCAF45);
  border-radius: 50%;
}

/* アイコンを白くする */
.wp-social-link-instagram svg {
  fill: #fff !important;
}

方法③：ホバー時に色を変える

マウスを乗せたときに変化をつけると、より直感的に分かりやすくなります。

/* 通常時のスタイル */
.wp-social-link-instagram a {
    background-color: #FFF3E0 !important;    /* 背景：薄いオレンジ */
    border-radius: 50% !important;
    transition: 0.3s;
}
.wp-social-link-instagram svg {
    fill: #FB8C00 !important;    /* アイコン：濃いオレンジ */
    transition: 0.3s;
}

/* ホバー時（マウスを乗せた時）の反転スタイル */
.wp-social-link-instagram a:hover {
    background-color: #FB8C00 !important;    /* 背景：濃いオレンジに */
}
.wp-social-link-instagram a:hover svg {
    fill: #FFF3E0 !important;    /* アイコン：薄いオレンジに */
}

よくある注意点

① 「色が変わらない・・・」と思ったら

SVGアイコンは color ではなくfillで色を指定する必要があります。

CSSが負けてしまう場合は、コードの最後に !important をつけると解決します。
（例：fill: #fff !important;）

② どこに貼ればいいの？

WordPress管理画面 ＞ 外観 ＞ カスタマイズ ＞ 追加CSS に貼り付けるだけで反映されます。

③ 小さなアイコンには単色がおすすめ

フッターなどの非常に小さい場所では、グラデーションだと色が潰れて見えにくくなることがあります。場所によって使い分けてみてください。

まとめ

  • 単色なら fill を使う
  • グラデーションは「背景」で表現するのが簡単
  • 最後は「追加CSS」に貼るだけ！

Instagramアイコンは目立つ導線のひとつなので、少し工夫するだけでクリック率アップにもつながります。

ぜひサイトのデザインに合わせて調整してみてください。

■ メモ：公式風カラーコード

Instagramの代表的なカラーはこちら

  • #833AB4（紫）
  • #E1306C（ピンク）
  • #F77737（オレンジ）
  • #FCAF45（黄色）
WordPress

関連記事

目次