サイトアイコン やっとこブログ

WordPressでSNSアイコンサイズをカスタマイズする方法（テーマ：Xeory）

やっとこブログ

ブログでよくあるSNSアイコンですが、ちょっとサイズ変更したいなぁと思ったことありませんか？今回はWordPressの無料テーマ「Xeory」で、右上のSNSアイコンのサイズをカスタマイズする方法をご紹介します。

コアラ
あんまりデカくするとずれるぞ

1.アイコン色の変化イメージ

SNSアイコンは小さなアイコンですが、サイズを変えるとブログのイメージも結構変わってきますね。どれだけ変わるかイメージ画像で見てみましょう。

1-1.初期設定のSNSアイコン（サイズ：21px）

下図は初期設定のままのアイコンです。サイズは「21px」で設定されています。小さくまとまっていてブログにあっています。お洒落なサイズですね。

1-2.変更後のSNSアイコン（サイズ：25px）

少しSNSアイコンのサイズを上げてみました。こちらのサイズで「25px」で設定しています。

1-3.変更後のSNSアイコン（サイズ：30px）

SNSアイコンのサイズ「30px」です。このくらいなら全然いけますね。

1-4.変更後のSNSアイコン（サイズ：35px）

SNSアイコンのサイズ「35px」です。少し大きくなってきました。

1-5.変更後のSNSアイコン（サイズ：40px）

SNSアイコンのサイズ「40px」です。結構大きいですね。これ以上はデザイン的に無理があるような気がします。

1-6.変更後のSNSアイコン（サイズ：100px）

おまけでSNSアイコンのサイズ「100px」です。こんなサイズ採用するわけがないです。ヘッダーに設置しているキャラクターのコアラがフェイスブックのｆから覗いてて怖いです。

 

コアラ
チラッチラッ

 

こうして比べてみると、初期設定のSNSアイコンのサイズって結構小さいですね。全部見比べた後最初のサイズを見るととても小さく感じます。視力検査してるみたいです。

やっとこブログ的には、初期設定より少し大きくしてもよいかなぁと思いますが、ここら辺は個人差なので、自分のブログに合ったサイズを探して変更していきましょう。

2.WordPressの設定画面に移動

SNSアイコンのサイズを変更するには、cssを変更する必要があります。まずはWordPressの設定画面の左のメニューから、「外観　→　テーマの編集」をクリックします。

「テーマの編集」に移動したら、右の項目から「スタイルシート」を選択しましょう。

この部分のcssを変更していきます。

3.SNSアイコンのサイズカスタマイズ

さっそくSNSアイコンのサイズをカスタマイズしていきましょう。「スタイルシート」を開いてSNSアイコンのサイズを設定している箇所を検索して、cssを変更していきます。

いちいち検索して変更するのが面倒くさい、という方は、コピペでSNSアイコンサイズをカスタマイズしてしまいましょう。4.コピペでカスタマイズを参考にしてください。

3-1.変更場所の検索

キーボードの「ctrlキー」を押しながら「Fキー」を押して、検索バーを表示させてから、「#header #header-sns li」で検索すると、下図の赤枠で囲ってある部分が表示されるはずです。

この部分の「font-size」の部分を変更することで、アイコンのサイズをカスタマイズすることが可能です。

3-2.cssの変更

今回変更するcssは、初期段階では下記のようになっています。

#header #header-sns li {
 display: inline-block;
 margin-left: 30px;
 font-size: 21px;
}

この部分の「font-size: 21px」の「○○px」の数値を変更すればサイズ変更可能です。例えば「30px」にする場合は下記のように変更します。

#header #header-sns li {
 display: inline-block;
 margin-left: 30px;
 font-size: 30px;
}

自分のブログに設定するSNSアイコンサイズに変更したら、下にある「ファイルを更新」をクリックしましょう。

記載したcssに間違いがなければ、右上のSNSアイコンのサイズが変更されているはずです。

4.コピペでカスタマイズ

いちいち元のcssを変更して保存するのが面倒くさい、という人は追加cssにコピペすれば、SNSアイコンのサイズを変更することが可能です。

コピペする場合は「追記css」という場所にします。この「追記css」にコピペすれば、初期設定のcssも残ったままになりますので何かと便利かもしれません。

4-1.コピペする場所

まずはWordPressトップページから「外観　→　カスタマイズ」を選択しましょう。

下図の画面が出たら「追記css」をクリックしましょう。

下図の赤枠部分にコピペすればOKです。

追加cssをまだ利用したことが無い場合は、この部分は空欄になっているはずです。上部のコメント「/*ここに～詳しくは～クリックしてください。*/」の下にコピペしましょう。

このコメントのように「/*」と「*/」に囲まれている部分はコメントアウトといって、cssを記載しても無効になります。「/*」と「*/」に囲まれている中にはcssはコピペしないでください。

この「コメントアウト」ですが、名前の通りコメントを入れることが可能です。例えば下図赤枠部分のように「/*」と「*/」で残したいコメントだけを囲めばOKです。

 

 

これで今回追記したcssの内容や場所が一目で分かるようになりましたね。cssをどんどん追記していくと、昔のやつとか普通に忘れますし、どこの何を設定したか分からなくなります。

「コメントアウト」を利用して、いつみてもcssの内容や場所が分かるようにしておきましょう。

 

4-2.cssの追記

早速cssを追記していきましょう。「追記css」の部分にコピペするだけです。自分のブログに合わせてSNSアイコンサイズをカスタマイズしたい場合は、コピペした後に「○○px」の部分を変更してください。

右側に自分のサイトが表示されていますが、コピペしたcssをを変更すると、右側のデザインがリアルタイムで変更されます。

納得のいくSNSアイコンサイズになるまで、1pxずつ変更することも可能ですので、微調整してみてください。納得のいくサイズになったら、上の「保存して公開」をクリックすればOKです。

コピペするcssは下記の通りです。もとの初期設定のcssを消すわけではないので、変更する部分のcssだけ記載すればOKです。そのため「font-size」のみの記載になります。

↓↓コピペ用css↓↓


#header #header-sns li {
 font-size: 30px;
}

追記cssに間違いがなければ、右上のSNSアイコン色がカスタマイズされているはずです。「font-size: 30px;」の場合はおそらく下図のようなイメージになっているはずです。

 

5.まとめ

以上で「WordPressでSNSアイコンサイズをカスタマイズする方法（テーマ：Xeory）」の説明は完了です。

SNSアイコンは小さなアイコンですが、サイズを変更すると結構ブログのイメージも変わってきます。地味な変更ですが自分のブログに合ったサイズが初期設定のサイズとは限りませんからね。

ご自身のブログに合わせてカスタマイズしてみてください。

 

その他のWordPressカスタマイズは、

【hタグ】 【ヘッダー・メニュー】 【サイドバー】 【プラグイン】 【URL変更】 【その他】

上記の記事を参考にしてください。

モバイルバージョンを終了