まず今回ホームページを作ろう決めたときにやっぱりメンテナンスが簡単なWORDPRESSを使うことにしました。 WEB屋としてもよくWORDPRESSは使っているので、インストールはお手の物です♪ 今回は、仕事としてのPRより解決方法などの事例を載せることを目的に置いていたのでホームページの形式はブログ形式で。 使用するテーマには色々と悩みましたが、SEO効果もバッチリと有名な【Stinger3】を使わせていただくことにしました。 さすが評判良いだけあっていろいろな設定も簡単で使いやすい!! こんなに素晴らしいテーマを無料で配付していただけるENJIさんに感謝です♪ さてさて、そんな素晴らしいテーマのStinger3ですが、色々なカスタマイズ方法もENJIさんのブログだけでなく色々なブログに紹介されています。 そんなわけでカスタマイズをしたメモを残しておこうと思います。

画面左下に表示されるSNSボタンを削除する

画面左下に表示されるSNSボタンはノートパソコンを使っていると意外と邪魔になるので削除することにしました(^^; 変更したのは【footer.php】の以下の部分です。

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/base.js"></script>
<?php
}
?>
<!-- ここにsns02 -->
<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
<?php else: ?>
<?php get_template_part('sns02');?>
<?php endif; ?>
<!-- ここまでsns02 -->

</body></html>

ハイライトの部分を削除するだけです。 簡単ですね♪ ちなみに以下のサイトでも違う方法を紹介しています。 <参考サイト>

SNSボタンを記事の下に表示する

画面左下に表示してあったSNSボタンを削除したので、各記事の下に表示するようにしました。 変更するファイルは【single.php】の以下の部分です。

        <?php the_category(', ') ?>
        <?php the_tags('', ', '); ?>
        <br>
      </p>
    </div>
    <?php get_template_part('sns'); ?>
    <?php the_content(); ?>
    <?php wp_link_pages(); ?>

ハイライトの部分を追加するだけです。 こちらも簡単です。 <参考サイト>

SNSボタンを増やす

通常であれば、Twitterボタン・Facebookボタン・Google+ボタン・はてなブックマークのボタンなんですが【Feedlyボタン】と【Pocketボタン】を追加することにしました。

【Feedlyボタン】を増やす方法

変更するファイルは【sns.php】です。 <参考サイト> まずFeedlyのサイト（http://www.feedly.com/factory.html）にアクセスします。 １．次にFeedlyボタンのスタイルを選びます。 僕は他とのバランスを考えて左下のにしました♪ ２．次に自分のホームページのRSSフィードのアドレスを入力します。 僕のサイトの場合【https://www.upgrade-pc.net/feed/】なのでそれを入力します。 ３．にHTMLコードが表示されるのでそのコードを【sns.php】の追加したい場所にコピペします。 僕の場合、はてブのボタンの横が良かったので･･･

      <li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
      </li>
      <li><a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fwww.upgrade-pc.net%2Ffeed%2F'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-medium_2x.png' alt='follow us in feedly' width='71' height='28'></a>
      </li>
    </ul>
  </div>
</div>

ハイライトの部分を追加しました。

Pocketボタンを追加する方法

変更するファイルは【sns.php】です。 <参考サイト> １．Pocket（http://getpocket.com/）のサイトにログインして【Options】をクリック。 ２．下部のメニューの【publisher】をクリック。 ３．左側のメニューの【Pocket Button】をクリック。 ４．ボタンのスタイルを選びます。僕は他のボタンとのバランスを考えて一番左のボタンにしました。 ５．下に表示された【Copy Code】を【sns.php】の追加したい場所にコピペします。

      <li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
      </li>
      <li><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script></a>
      </li>
      <li> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
      </li>

色々なブログを見ているとPocketを利用している人はかなりいるみたいなのでとても大事な部分みたいです。

【続きを見る】の上にマウスを移動すると変化する

<参考サイト> 参考にさせてもらったサイトのそのままなのですが･･･(^^; 一応ご紹介します。 変更するファイルは【style.css】です。

/*記事を読む*/

.motto a {
	text-decoration: none;
	background-color: #ffcc33;
	width: 90px;
	color: #666666;
	text-align: center;
	display: block;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	font-weight: normal;

	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}
.motto a:hover {
	color: #FFF;
	text-decoration: none;
	background-color: #FFAAAA;
	text-align: center;
	display: block;

	padding-top: 4px;
    padding-right: 10px;
    padding-bottom: 4px;
    padding-left: 10px;

	-webkit-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
  -o-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
}

その他の部分もちょっとイジってますので参考にしてください。

Stinger3カスタマイズのまとめ

色んな見栄えを少しずつカスタマイズしてますが、Stinger3は基本そのままでも十分なくらいの見栄えも機能も持っています。 ちょっとした変更を加えるにしても構造がわかりやすいので比較的簡単にカスタマイズができるんですが、Stinger3作者のENJIさんが書いているようにあまりにカスタマイズしてしまうとStingerがStingerでなくなってしまいます･･･ SEO対策やったのに逆に順位が落ちてしまったのと同じような感じです。 SEO効果を見込んでStingerを利用しているのであれば、カスタマイズしすぎは逆効果かもしれません。 僕の場合、サイトのタイトルを画像ではなく文字として表示しているのも一応わざとです。 どこをカスタマイズするとどのくらい効果があるのかはわからないので手探りの状態ですが、徐々に色んな所をいじりながら試行錯誤していくのも楽しいかなと思っています。