WordPress【twenty seventeen】標準ソーシャルリンクメニューアイコンの形を丸型から四角っぽく変更しアイコンサイズと間隔を変更する方法

WordPress【twenty seventeen】標準に用意されているソーシャルリンクメニューだが、デフォルト設定ではアイコンの形が丸型になっている。そして何か良く分からないが、「Twitter」の鳥のマークが小さくないですか？

あと全体的にアイコン間隔が広すぎるため、もう少し間隔を詰めてアイコンをなるべく多く表示したいような気もします。

ソーシャルリンクメニューに関しては他のプラグインを利用したり、自作している方等もいるのですが、個人的な考えとしては、「標準で利用できる機能はなるべく標準機能を利用すべし」と思っている。

「WordPress【twenty seventeen】標準に用意されているソーシャルリンクメニューに「はてブ（はてなブックマーク）」アイコンを実装する方法」

この記事を参考にして頂ければ、不足しているアイコンも標準実装可能となりますので、カスタマイズ可能となります。

スポンサーリンク

ソーシャルリンクメニューアイコンのカスタマイズ

svgファイルにアイコンが入っている為、丸型にするとか四角にするとか、サイズ変更に関してもスタイルシートを変更するだけで可能である。こういう所が標準機能を利用するメリットでもある。自作等でやると色々いじらないといけないところをスタイルシートだけの変更で可能だ。勿論、子テーマのスタイルシートに追記してやれば良いだけです。

アイコンの形とアイコン間隔を変更する方法

下のコードを子テーマのスタイルシートへ追記して下さい。まずアイコンの形ですが下の赤字にしてある「border-radius：」の値が重要です。デフォルトだと「40px」と設定されています。この値何かと言いますと「width: 40px;」に対して角を40PXの半径で円を描くことを意味しています。筆者の場合「8px」に設定してみました。あとアイコン間隔は「margin」の2つ目の値を変更してください。デフォルトは「1em」となっています。好みに応じて変更してください。個人的には「0.1em」か「0.2em」が良いよう気がします。

/* ソーシャルメディアアイコンを四角にする */
.social-navigation a {background-color: #767676;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 color: #fff;
 display: inline-block;
 height: 40px;
 margin: 0 0.2em 0.5em 0;
 text-align: center;
 width: 40px;
}

アイコンのマークの大きさ変更方法

下のコードを子テーマのスタイルシートへ追記して下さい。アイコンの大きさは下のコードの赤字部分「height」「width」に影響されます。デフォルト値は両方共に「16px」となっています。多くしたければ大きい値に変更しましょう。

場合によっては「top」の値も変更しないとバランス悪くなるケースもありますので注意して下さい。

/* ソーシャルメディアアイコンを大きくする */
.social-navigation .icon {
 height: 20px;
 top: 12px;
 width: 20px;
 vertical-align: top;
}

以上で今回のテーマである「標準に用意されているソーシャルリンクメニューのアイコンの形を丸型から四角っぽく変更とアイコンサイズと間隔を変更する方法」の説明を終わらせて頂きます。

【A8.netに登録しよう！】
◇ 広告主数・アフィリエイトサービス数日本最大級☆
◇ 登録はもちろん無料、審査なしのアフィリエイトサービス☆
◇ 使いやすいサイトNO.1
⇒アフィリエイトならA8.net

スポンサーリンク