yuichi.co

ゆういちのノートブック

【Stinger7】右サイドバーにSNSフォローボタンを簡単に設置するカスタマイズ

 3773

Stinger7 右サイドバーSNSボタンをカスタマイズ

@yuichico_です。今回は右サイドバーにTwitter、Facebook、Google+、feedly(rss)のSNSフォローボタンを1列に4つ設置するカスタマイズする手順です。feedlyボタンはicomoonでimportしてやろうと思いましたが、めんどくさかったので、fontawesomeのrssアイコンを入れました。コピペでできますので初心者の方は見てください。完成図としてはこんな感じです。スマホでもタブレットでもPCでも同じ幅に調整できます。

右サイドバーにSNSフォローボタンを簡単に設置 完成図



ダウンロードしてインストール

リンク Stinger7親テーマと子テーマのダウンロードとインストールのやり方

子テーマは必ずインストールしてください。

子テーマへアップロード

sidebar.phpを子テーマへアップしてください。

リンク Stinger7で特定の親テーマのファイルを子テーマへアップロードする方法

カスタマイズ

このブログの場合は、見出し文字をプロフィールにしてその下にSNSフォローボタン、プロフィール画像と文章、ホームページのリンクとメールアドレスを明記しました。試してみてください。

リンク 【Stinger7】右サイドバーでプロフィールをカッコよく表示させる方法

右サイドバー

外観→テーマ編集→sidebar.phpの26行目の <?php } ?> の下へ以下をコピペ。見ているPCにもよりますので、26行目で見つかなければその近辺25行目や27行目にある<?php } ?>を探してください。コピペしたら ファイルを更新 をクリックします。

<h4 class="menu_underh2">フォローミー</h4>
	<div class="follow">
		<ul>
			<li class="twitter"><a href="【twitterURL】" target="_blank"><i class="fa fa-twitter"></i></a></li>
			<li class="facebook"><a href="【facebookページURL】" target="_blank"><i class="fa fa-facebook"></i></a></li>
			<li class="googleplus"><a href="【googleplusURL】" target="_blank"><i class="fa fa-google-plus"></i></a></li>
			<li class="rss"><a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【運営しているブログのドメイン】%2Ffeed%2F"><i class="fa fa-rss"></i></a></li>
		</ul>
	</div>

各ソーシャルボタンの中にFontawesomeのアイコンを入れました。Twitter、facebook、Google+は運営しているアカウントを入れてください。feedlyはご自身が運営しているブログのドメインを入れてください。

CSS

外観→テーマ編集→style.cssで以下を一番下へコピペ

.follow {
    margin-bottom: 10px;
}
.follow ul {
    margin: 10px 0;
    overflow: hidden;
    position: relative;
}
.follow ul li {
    float: left;
    margin: 10px 0 0 10px;
    width: 25%;
}
.follow ul li a {
    display: block;
    color: #fff;
    margin: 0px 3px;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    transition:	.2s ease-in-out;
    -webkit-transition:	.2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
}
.follow .twitter a,
.follow .facebook a,
.follow .googleplus a,
.follow .rss a {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
}
.follow .twitter a {
    background: #00aced;
}
.follow .facebook a {
    background: #3c5a98;
}
.follow .googleplus a {
    background: #db4a39;
}
.follow .rss a {
    background: #87c040;
}

まとめ

shufulifeのちゅんこさんのブログを参考にしました。WordpressやStinger関連の記事が多数あってタメになります。ためになりますので、ぜひ見てみてください。

参考URL 【STINGER5】コピペOK!サイドバーにアイコンフォントでSNS各種のフォローボタンを作る

Twitter @shufulife

Stinger7 カスタマイズ