ロゴ
【note:検索上位を狙うブログ理論】一騎当千SEO

【マナブログコピー(WordPressテーマ)】シェアボタンの修正

外観デザイン設定

こんにちは、ごま吉(@Lv1gomakichi)です。

この記事では、シェアボタンの修正方法を学ぶことができます。

当ブログについて

マナブログさんに参考マニュアルとして掲載して頂きました😆
本家認定のマニュアルです。

Manablog Copy シェアボタンの修正

修正部分としては、デフォルトで組み込まれている【Google+】については、既に差オービスが終了しているのでボタンをカットします。

また一世を風靡したFacebookのいいねボタンについても、最近ではあまりアクティブな様子も見れないためボタンを削除します。

まずは、管理画面外観テーマエディターsns.phpにアクセスします。


sns.phpの中身を丸ごと下記のコードに変更します。

<ul class="sns_button list-unstyled clearfix">
	<li class="facebook-btn-icon col-xs-2">
		<a class="facebook-btn-icon-link" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" target="_blank">
			<span class="icon-facebook"></span>
			facebook
		</a>
	</li>
	<li class="twitter-btn-icon col-xs-2">
		<a class="twitter-btn-icon-link" href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>" target="_blank">
			<span class="icon-twitter"></span>
			<span class="sns-share-small_text">Tweet</span>
		</a>
	</li>
	<li class="hatena-btn-icon col-xs-2">
		<a class="hatena-btn-icon-link" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">
			<span class="icon-hatebu"></span>
			<span class="sns-share-small_text">hatebu</span>
		</a>
	</li>
	<li class="pocket-btn-icon col-xs-2">
		<a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"  class="pocket-btn-icon-link" target="_blank">
			<span class="icon-pocket"></span>
			<span class="sns-share-small_text">Read Later</span>
		</a>
	</li>

</ul>


CSSもカスタマイザー追加CSSへアクセスして下記のコードを追加します。


ul.sns_button {
    white-space: nowrap;
}

ul.sns_button li a {
    color: #fff;
    font-size: 16px;
    position: relative;
    display: block;
    padding: 25px 0px 25px 0px;
}

ul.sns_button .facebook-btn-icon {
    background: #2B418B;
}
ul.sns_button li {
    float: left;
    width: 45%;
    text-align: center;
    margin-right: 10px;
    border-radius: 3px;
	  
	
}


ul.sns_button .twitter-btn-icon {
    background: #3D97F1;
}

ul.sns_button .hatena-btn-icon {
    background: #0075DD;
}


ul.sns_button .google-plus-btn-icon {
    background: #D73220;
}


ul.sns_button .pocket-btn-icon {
    background: #ED243E;
}


.single ul li, .single ol li {
    margin-bottom: 10px;
    text-align: left;
}


修正が完了しました。

画像提供:Freepik – jp.freepik.com によって作成された background ベクトル



注目こちらも合わせてどうぞ▼
アフィリエイトを始めるための手順を紹介しています。マナブログコピーのカスタマイズが終わったら『ASP登録』をしましょう。

note


注目こちらも合わせてどうぞ▼
アフィリエイト初心者向けに【月3,000円を稼ぐ着実なSEO】をテーマにnote執筆しました。マナブログコピーと合わせて運用すると効果大です。

note

人気記事【マナブログコピー(WordPressテーマ)】文字装飾プラグインの設定