「Xeory」はシンプルで見やすく、WordPressでも人気のある無料テーマですが、もう少し自分のブログに合わせて色やデザインを追加したい・・と思いませんか?今回はWordPressの無料テーマ「Xeory」で、右上のSNSアイコンの色をカスタマイズする方法をご紹介します。小さなアイコンですが結構イメージが変わりますので、まだ変更していない人は一緒に変更していきましょう。1.アイコン色の変化イメージたかが小さなアイコンと侮らないでください。色を変更するだけでブログのイメージがかなり変わります。どれだけ変わるかイメージ画像で見てみましょう。下図は初期設定のままのアイコンです。どんなブログにも合う薄いグレーに設定されています。これはこれで素敵です。なにか物足りない・・寂しい・・もう少し華やかにしたい・・そんな方は今回一緒に色をカスタマイズしていきましょう。1-2.全部同色やっとこブログに合わせて「橙色系」でアイコン色を変更すると下図のイメージになります。イメージ変わりますよね?1-3.個別に色を変えるアイコン色をひとつずつカスタマイズすることも可能です。「Facebook」「twitter」「google+」「feedly」それぞれのロゴマークを、公式ロゴと同色にカスタマイズすると下図のようなイメージになります。自分的には普段から各ロゴに見慣れているせいか、こっちのほうがしっくりきますね。見た瞬間に「これはFacebookだな、これはtwitterだな」と判断できます。コアラ色が変わるだけでイメージも随分違うな~色は何色にでもカスタマイズできますので、自分のブログにあった色にカスタマイズしてみましょう。今回は、アイコン色を全部同色にカスタマイズするアイコン色を個別にカスタマイズする上記2つの方法を説明していきます。テーマの編集」をクリックします。「テーマの編集」に移動したら、右の項目から「スタイルシート」を選択しましょう。この部分のcssを変更していきます。3.アイコン色を全部同色にカスタマイズまずはアイコン色を全部同色にカスタマイズする方法です。「スタイルシート」を開いたら、アイコン色を同じ色にカスタマイズするために、cssを変更していきます。a」で検索すると、下図の赤枠で囲ってある部分が表示されるはずです。この部分のカラーコードを変更することで、アイコンの色をカスタマイズすることが可能です。今回変更するcssは、初期段階では下記のようになっています。#ccc」の「#ccc」部分を好きなカラーコードに変更します。カラーコードが分からない方は、カラーピッカー等で好きな色のカラーコードを探してみてください。好みのカラーコードに変更したら、下にある「ファイルを更新」をクリックしましょう。記載したcssに間違いがなければ、右上のSNSアイコンの色が変更されているはずです。今回やっとこブログでは下記のように変更しました。#f7d38f;}上記cssの場合は下図のようなイメージになります。右上のSNSアイコンが「グレー」から「橙色系」にカスタマイズされていますね?それぞれブログのイメージカラーがあると思いますので、何度か変更してみてしっくりくる色を探してみましょう。4.アイコン色を個別にカスタマイズ次はアイコン色を個別にカスタマイズしていきます。いうことかと言うと「FacebookはFacebookの色」「twitterはtwitterの色」といった感じにそれぞれ色を設定していきます。こちらの設定の方が普段見慣れている分、アイコンを見た瞬間に直感的に「これはFacebook」「これはtwitter」と判断できるのでおすすめです。ブログでもこちらの設定を採用しています。それぞれ変更するにはcssを新しく追記する必要がありますので、最初だけ少し手間です。一回追記してしまえば、今後cssのカラーコードを変更するだけですぐにSNSアイコン色をカスタマイズ可能ですので、とても楽です。コアラ大変なのは最初だけ、頑張ろう!それでは頑張ってcssを追記していきましょう。アイコンの設定なので、後でまた変更する際に「どこに追記したっけ・・?」とならないように、同じアイコンの設定箇所である下図の赤線場所に追記していきましょう。「Facebook」「twitter」「google+」「feedly」の色を変更するには、それぞれ下記のcssを追記します。今回は公式ロゴのカラーコードを使用しています。他の色を使用したい場合はカラーコードに変更すれば、好きな色に変更できますよ。コアラたぶん合ってる、たぶんなFacebookの場合Facebookの場合は下記のcssを追記します。Facebookの公式ロゴのカラーコードは「#3b5998」です。#3b5998;}twitterの場合twitterの場合は下記のcssを追記します。twitterの公式ロゴのカラーコードは「#55acee」です。#55acee;}google+の場合google+の場合は下記のcssを追記します。google+の公式ロゴのカラーコードは「#dd4b39」です。#dd4b39;}feedlyの場合feedlyの場合は下記のcssを追記します。feedlyの公式ロゴのカラーコードは「#6cc655」です。#6cc655;}全て記載すると下図のようなイメージになると思います。全て追記し終わったら下にある「ファイルを更新」をクリックしましょう。追記cssに間違いがなければ、右上のSNSアイコン色がカスタマイズされているはずです。下図のようなイメージになっているはずです。それぞれの公式ロゴと同色なので見やすいし安心感がありますので、クリックしてもらいやすくなると思いますよ。5.マウスが乗った時の色をカスタマイズ右上のSNSアイコンにマウスが乗った時の色もカスタマイズ可能です。初期設定のカラーコードは「#57585a」で、見た目的には「濃い目のグレー」に設定されています。このままでも良いのですが、ブログのイメージを合わないよ~って方は変更してしまいましょう。ブログでは変更してません。このままでカッコいいから良いかなぁと思ったので。すると下図の赤枠で囲ってある部分が表示されるはずです。初期段階では下記のcssが記載されています。#57585a;}この部分のカラーコード「#57585a」を好みのカラーコードに変更しましょう。変更したら下にある「ファイルを更新」をクリックしましょう。変更したcssに間違いがなければ、SNSアイコンにマウスが乗った際の色がカスタマイズされているはずです。6.まとめ以上で「WordPressでSNSアイコンの色をカスタマイズする方法(テーマ:Xeory)」の説明は完了です。小さなアイコンですが、ページのトップに表示されているアイコンなので、ブログを開いてすぐ目につきます。SNSアイコン色をカスタマイズすることでブログのイメージも良くなりますから、記事を読んでもらえる可能性も上がるのではないでしょうか。ご自身のブログに合わせてカスタマイズしてみてください。【その他】WordPressでトップに戻るボタンをカスタマイズする方法(テーマ:Xeory)WordPressでリストの表示位置を変更する方法WordPressでリストの背景に色を付ける方法WordPressで引用デザインをカスタマイズする方法(テーマ:Xeory)WordPressで行間と改行幅をカスタマイズする方法(テーマ:Xeory)WordPressでSNSアイコンの色をカスタマイズする方法(テーマ:Xeory)WordPressでSNSアイコンサイズをカスタマイズする方法(テーマ:Xeory)WordPressで表をカスタマイズする方法(テーマ:Xeory)上記の記事を参考にしてください。WordPress、Xeoryコメントするやっとこブログトップへ戻るモバイルバージョンを。