/WordPressでSNSアイコンサイズをカスタマイズする方法(テーマ:Xeory)2018.09.03WordPressでSNSアイコンサイズをカスタマイズする方法(テーマ:Xeory)Tweetブログでよくある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」です。こんなサイズ採用するわけがないです。ヘッダーに設置しているキャラクターのコアラがフェイスブックのfから覗いてて怖いです。コアラチラッチラッこうして比べてみると、初期設定のSNSアイコンのサイズって結構小さいですね。全部見比べた後最初のサイズを見るととても小さく感じます。視力検査してるみたいです。ブログ的には、初期設定より少し大きくしてもよいかなぁと思いますが、ここら辺は個人差なので、自分のブログに合ったサイズを探して変更していきましょう。2.WordPressの設定画面に移動SNSアイコンのサイズを変更するには、cssを変更する必要があります。テーマの編集」をクリックします。「テーマの編集」に移動したら、右の項目から「スタイルシート」を選択しましょう。この部分のcssを変更していきます。3.SNSアイコンのサイズカスタマイズさっそくSNSアイコンのサイズをカスタマイズしていきましょう。「スタイルシート」を開いてSNSアイコンのサイズを設定している箇所を検索して、cssを変更していきます。いちいち検索して変更するのが面倒くさい、という方は、コピペでSNSアイコンサイズをカスタマイズしてしまいましょう。4.コピペでカスタマイズを参考にしてください。li」で検索すると、下図の赤枠で囲ってある部分が表示されるはずです。この部分の「font-size」の部分を変更することで、アイコンのサイズをカスタマイズすることが可能です。今回変更するcssは、初期段階では下記のようになっています。21px」の「○○px」の数値を変更すればサイズ変更可能です。「30px」にする場合は下記のように変更します。30px;}自分のブログに設定するSNSアイコンサイズに変更したら、下にある「ファイルを更新」をクリックしましょう。記載したcssに間違いがなければ、右上のSNSアイコンのサイズが変更されているはずです。4.コピペでカスタマイズいちいち元のcssを変更して保存するのが面倒くさい、という人は追加cssにコピペすれば、SNSアイコンのサイズを変更することが可能です。コピペする場合は「追記css」という場所にします。この「追記css」にコピペすれば、初期設定のcssも残ったままになりますので何かと便利かもしれません。カスタマイズ」を選択しましょう。下図の画面が出たら「追記css」をクリックしましょう。下図の赤枠部分にコピペすればOKです。追加cssをまだ利用したことが無い場合は、この部分は空欄になっているはずです。上部のコメント「/*ここに~詳しくは~クリックしてください。*/」の下にコピペしましょう。このコメントのように「/*」と「*/」に囲まれている部分はコメントアウトといって、cssを記載しても無効になります。「/*」と「*/」に囲まれている中にはcssはコピペしないでください。この「コメントアウト」ですが、名前の通りコメントを入れることが可能です。下図赤枠部分のように「/*」と「*/」で残したいコメントだけを囲めばOKです。これで今回追記したcssの内容や場所が一目で分かるようになりましたね。cssをどんどん追記していくと、昔のやつとか普通に忘れますし、どこの何を設定したか分からなくなります。「コメントアウト」を利用して、いつみてもcssの内容や場所が分かるようにしておきましょう。cssを追記していきましょう。「追記css」の部分にコピペするだけです。自分のブログに合わせてSNSアイコンサイズをカスタマイズしたい場合は、コピペした後に「○○px」の部分を変更してください。右側に自分のサイトが表示されていますが、コピペしたcssをを変更すると、右側のデザインがリアルタイムで変更されます。納得のいくSNSアイコンサイズになるまで、1pxずつ変更することも可能ですので、微調整してみてください。納得のいくサイズになったら、上の「保存して公開」をクリックすればOKです。コピペするcssは下記の通りです。もとの初期設定のcssを消すわけではないので、変更する部分のcssだけ記載すればOKです。そのため「font-size」のみの記載になります。30px;}追記cssに間違いがなければ、右上のSNSアイコン色がカスタマイズされているはずです。30px;」の場合はおそらく下図のようなイメージになっているはずです。5.まとめ以上で「WordPressでSNSアイコンサイズをカスタマイズする方法(テーマ:Xeory)」の説明は完了です。SNSアイコンは小さなアイコンですが、サイズを変更すると結構ブログのイメージも変わってきます。地味な変更ですが自分のブログに合ったサイズが初期設定のサイズとは限りませんからね。ご自身のブログに合わせてカスタマイズしてみてください。【その他】WordPressでトップに戻るボタンをカスタマイズする方法(テーマ:Xeory)WordPressでリストの表示位置を変更する方法WordPressでリストの背景に色を付ける方法WordPressで引用デザインをカスタマイズする方法(テーマ:Xeory)WordPressで行間と改行幅をカスタマイズする方法(テーマ:Xeory)WordPressでSNSアイコンの色をカスタマイズする方法(テーマ:Xeory)WordPressでSNSアイコンサイズをカスタマイズする方法(テーマ:Xeory)WordPressで表をカスタマイズする方法(テーマ:Xeory)上記の記事を参考にしてください。XeorySNSでもご購読できます。*メールアドレス(公開はされません。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。reserved.モバイルバージョンに。