最近、ＬＩＮＥのアップデートとともに、プロフィールが丸いアイコンになりました。
WordPressに新しく追加されたテーマを見ていても、丸いアイコンが増えているような気がします。
それで、勉強も兼ねて、当ブログのＳＮＳのフォローアイコンを丸いアイコンに変更してみました。
当ブログは、WordPressで運用しており、テーマは、cimplicityです。
cimplicity のフォローアイコンは「Font Awesome」のアイコンで表示されています。
「Font Awesome」のサイトを見てみますと、このアイコンは、表示方法をいろいろアレンジできるようです。
・拡大
・メニューリスト
・チェックリスト
・引用符
・スピン（回転し続ける）
・傾斜（角度を付ける）
・オーバーラップ（重ねる）
・反転
・Bootstrapでの使用
など、さまざまな利用方法が紹介されています。
それで、丸いアイコンを表示して、そこに、反転させたアイコンを重ねる表示をするようにしました。
丸いアイコンに、反転アイコンを重ねる方法
変更した３つのファイル
変更したファイルは,
・sns.css
・sns-pages.php
・style.css
の３つです。
sns-pages と style.css はWordPress管理画面からも編集できます。
でも、sns.css は、サーバー内で直接編集するか、いったんダウンロードして、編集後アップロードする必要があります。
sns.cssの変更箇所
以下の文章を、** SNSページフォロー ** 内に追加しました。
ul.snsp li a i2.icon-feedly{
font-size:22px;
text-align: center;
top:6px;
}
ul.snsp li a i2{
padding:0;
z-index: 100;
}
ul.snsp li a i3{
top:2px;
padding:0;
z-index: 110;
}
sns-pages.php変更箇所
a タグに、class=”fa-stack” を追加しました。
・・・ “><a class=”fa-stack” href ・・・
そして、
<i class=”fa fa-twitter-square”></i> を、
<i2 class=”fa fa-circle fa-stack-2x”></i2><i3 class=”fa fa-twitter fa-stack-1x fa-inverse”></i3>
<i class=”fa fa-facebook-square”></i> を、
<i2 class=”fa fa-circle fa-stack-2x”></i2><i3 class=”fa fa-facebook fa-stack-1x fa-inverse”></i3>
<i class=”fa fa-google-plus-square”> を、
<i2 class=”fa fa-circle fa-stack-2x”></i2><i3 class=”fa fa-google-plus fa-stack-1x fa-inverse”></i3>
<i class=”fa fa-instagram”></i> を、
<i2 class=”fa fa-circle fa-stack-2x”></i2><i3 class=”fa fa-instagram fa-stack-1x fa-inverse”></i3>
<i class=”icon-feedly-square”> を、
<i2 class=”fa fa-circle fa-stack-2x”></i2><i2 class=”icon-feedly fa-stack-1x fa-inverse”></i2>
<i class=”fa fa-rss-square fa-2x”> を、
<i2 class=”fa fa-circle fa-stack-2x”></i2><i3 class=”fa fa-rss fa-stack-1x fa-inverse”></i3>
に、変更しました。
style.css の変更箇所
** レイアウト（Layout）の 240 を 300 に変更しました。
#header .alignright{
width: 300px;
text-align:right;
margin-right:30px;
}
何度も試行錯誤の結果、これで、丸いアイコンに変更されました。
どうでしょう、ご覧のブラウザでは、丸いアイコンで表示されていますか？
