【STINGER5】コピペでOK!ヘッダーにアイコンフォントのフォローボタンを設置する方法

 2014/09/23

STINGER5コピペシリーズ第三弾です。headerサイトタイトルの右側にアイコンフォントでフォローボタンを設置してみました。前回のエントリー【STINGER5】コピペOK!サイドバーにアイコンフォントでSNS各種のフォローボタンを作るでサイドにはすでにフォローボタンを設置していたので、PCのみに表示させて、モバイルでは非表示にしています。

設置するのは、Twitter、Facebook、Google+とRSSの4つのボタンです。フォローボタンはマウスホバーでぴょこぴょこするエフェクトが付いています。

スポンサーリンク


設置は簡単コピペするだけ!

コピペシリーズなのでコピペするだけです!※一部自身のサイトのURLは書き換えが必要です。

follow-header1

フォローボタンはサイトタイトルの真横にくるようにしたいので、flot:rightにします。サイト名とキャプションにidを付与しflot:leftとします。(もっとスマートな方法あるかもしれません。)

header.phpへの記述

以下のように黄色の部分を追記します。【ロゴ又はブログ名】に<div id=”logo”>でくくります。下に</div>も。

<div id="logo">
<!-- ロゴ又はブログ名 -->
<p class="sitename"><a href="<?php echo home_url(); ?>/">
<?php if (get_option('stinger_logo_image')): //ロゴ画像がある時 ?>
<img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url(get_option('stinger_logo_image')); ?>" />
<?php else: //ロゴ画像が無い時 ?>
<?php bloginfo( 'name' ); ?>
<?php endif; ?>
</a></p>
<!-- キャプション -->
<?php if (is_home()) { ?>
<h1 class="descr">
<?php bloginfo('description'); ?>
</h1>
<?php } else { ?>
<p class="descr">
<?php bloginfo('description'); ?>
</p>
<?php } ?>
</div>  
<div class="smanone">
<div class="header-sns">
<ul>
<li><a href="【ツイッターのURL】" target="_blank"><i class="fa fa-twitter-square" style="color:#00abee;"></i></a></li>
<li><a href="【フェイスブックページのURL】" target="_blank"><i class="fa fa-facebook-square" style="color:#3b5898;"></i></a></li>
<li><a href="【Google+ページのURL】" target="_blank"><i class="fa fa-google-plus-square" style="color:#db4939;"></i></a></li>
<li><a href="<?php echo home_url(); ?>/?feed=rss2" target="_blank"><i class="fa fa-rss-square" style="color:#ffb53d;"></i></a></li>
</ul>
</div>
<div class="clear"></div>
</div>
POINT

フォローボタンのところはスマホで非表示となるクラスsmanone(display: none)で分岐させています。最後の<div class=”clear”></div>はSTINGERに元々あったスタイルclear:bothを使ってます。STINGERではない方はclear:bothで回り込みを解除してください。

Twitter、Facebook、Google+のURLはご自身のものに書き換えてくださいね!

style.cssへの記述

/*--------------------------------
headerフォローボタン
---------------------------------*/
.header-sns {
padding: 0.3em;
font-size: 40px;
width:300px;
float:right;
}
.header-sns ul {
list-style:none;
display: table;
table-layout: fixed;
width: 100%;
}
.header-sns ul li {
display: table-cell;
vertical-align:middle;
text-align: center;
}
.header-sns li a{
position:relative;
display:block;
padding:5px;
text-align:center;
text-decoration: none;
}
.header-sns li a:hover {
-webkit-transform: translate3d(0px, 5px, 1px);
-moz-transform: translate3d(0px, 5px, 1px);
transform: translate3d(0px, 5px, 1px);
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {
}
/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
/*--------------------------------
780px headerフォローボタン
---------------------------------*/
header #logo{
float:left;
}
header .header-sns {
float:right;
}
/*-- ここまで --*/
}

2か所記載するところがあります

これで完了です!!

まとめ

コピペシリーズいかがでしたか?次回はまた未定ですwカスタマイズねたは自分の備忘録も兼ねることができるので好きです。

そして、なんとこのブログがSTINGER5の導入ブログのコーナー(!?)でご紹介いただきました!!

m(;∇;)mありがたや~ありがたや~

記事数が増えるようにがんばらなくては!とりあえず100日!今は19日目!それではちゅんこ@shufulifeがお送りしましたー

STNGER5

Please comment!

  

1件のコメント

  • ちゅんこ 2015年7月15日 16:32

    かつひな様

    サイトを拝見したところ、表示されているようでしたので解決済みでしょうか?
    返信遅くなりましてすみません。

Messege




5件のトラックバック