WordPress個別サポート

Twenty Fifteenの「ソーシャルリンクメニュー」は関連するSNSやフィードなどのリンク先に応じてアイコンを自動で表示してくれる便利なメニューです。表示イメージは次のようになります。

Twenty Fifteenのソーシャルリンクメニュー

Twenty Fifteenのソーシャルリンクメニュー

使い方を説明します。

まずは、「外観」-「メニュー」メニューでSNSのリンク先をまとめたメニューを作成します。具体的にはメニューに追加したい自分のSNSページのURLと「Twitter」のようなラベルを入力して「メニューに追加」ボタンをクリック(1)し、「テーマの位置」で「ソーシャルリンクメニュー」(2)をチェックします。「メニューを保存」(3)をクリックすれば完了です。

SNSサイトへのリンクメニューを作成

SNSサイトへのリンクメニューを作成

サイトを表示すると、各SNSへのリンクアイコンが表示されます。

ソーシャルリンクが表示される

ソーシャルリンクが表示される

「外観」-「メニュー」で追加したリンクに応じてTwitterやFacebookなどのアイコンが自動で表示されます。その仕組みはTwenty Fifteenのstyle.cssの780行目あたりからCSSで記述されています。

たとえば、804行目あたりに次のように記述されています。

.social-navigation a[href*="facebook.com"]:before {
    content: "\f203";
}

なんとなくピンとくるかと思いますが、「外観」-「メニュー」で追加したリンク先のURL(aタグのhref属性になる)に「facebook.com」があればFacebookアイコン(content: "\f203")を表示するという仕組みです。

その他のSNSサイトも同じです。主なリンク先を抜粋しておきます。

.social-navigation a[href$="/feed/"]:before {
    content: "\f413";
}

.social-navigation a[href*="dropbox.com"]:before {
    content: "\f225";
}

.social-navigation a[href*="facebook.com"]:before {
    content: "\f203";
}

.social-navigation a[href*="flickr.com"]:before {
    content: "\f211";
}

.social-navigation a[href*="plus.google.com"]:before {
    content: "\f206";
}

.social-navigation a[href*="instagram.com"]:before {
    content: "\f215";
}

.social-navigation a[href*="pinterest.com"]:before {
    content: "\f210";
}

.social-navigation a[href*="twitter.com"]:before {
    content: "\f202";
}

.social-navigation a[href*="wordpress.com"]:before,
.social-navigation a[href*="wordpress.org"]:before {
    content: "\f205";
}

.social-navigation a[href*="youtube.com"]:before {
    content: "\f213";
}

.social-navigation a[href*="mailto:"]:before {
    content: "\f410";
}
スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

アイコンの色を変更する方法

各リンクのアイコンの色をカスタマイズするには、style.cssを直接変更しても良いのですが、上記のCSSと同じセレクタを使って「color」を指定したCSSを子テーマなどに入力する方法があります。

カスタマイズするCSSの例を紹介します。

.social-navigation a[href$="/feed/"]:before {
    color: orange;
}

.social-navigation a[href*="facebook.com"]:before {
    color: navy;
}

.social-navigation a[href*="twitter.com"]:before {
    color: blue;
}

表示結果は次のようになります。

ソーシャルリンクメニューのアイコンの色を変更

ソーシャルリンクメニューのアイコンの色を変更

他のSNSアイコンも同じです。参考にしてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート