Simplicityのページ上部に表示されるフォローボタンをカスタマイズしてみた

WordPressのテーマにはSimplicityを利用させてもらっています。更新も早く、日々機能も増えており素晴らしいの一言に尽きます。ただ人気テーマなだけに利用サイトが多く、見た目も被りがちに。

そこで今回はフォローボタンの見た目を上のようにカスタマイズしてみました。

やり方

sns-pages.phpの編集

各フォローボタンアイコンを表示するspanタグ部分を以下のように編集。他の各Webサービスも同様に。

// この部分を
<?php if ( is_feedly_follow_btn_visible() )://feedlyフォローボタンを表示するか ?><li class="feedly-page"><a href='//feedly.com/index.html#subscription%2Ffeed%2F<?php echo rawurlencode(get_bloginfo("rss2_url")); ?>' target='blank' title="feedlyで更新情報を購読" rel="nofollow"><span class="icon-feedly-logo"></span></a></li><?php endif; ?>
// こうする
<?php if ( is_feedly_follow_btn_visible() )://feedlyフォローボタンを表示するか ?><li class="feedly-page"><a href='//feedly.com/index.html#subscription%2Ffeed%2F<?php echo rawurlencode(get_bloginfo("rss2_url")); ?>' target='blank' title="feedlyで更新情報を購読" rel="nofollow"><span class="icon-feedly-logo">Feedly</span></a></li><?php endif; ?>

style.cssの編集

以下のコードを追加。

ul.snsp li a span {
  display: inline;
  font-size: 18px;
  background-color: #fff; /*ここの色はウェブサイトの背景と同じ色を指定する*/
  color: #333;
  padding: 6px;
  border: 2px solid #333;
}