2016年5月12日

ヘッダーの右端にSNSフォローボタンを小さく設置。WordPressカスタム。

スポンサードリンク

 Stinger7をローカルでカスタマイズしているところです。
SNSフォローボタンを、ヘッダー画像の右、画面右端に設置。

SNSフォローバナーをページトップ右上に配置


 ではやってみましょう。
参考にしたのはこちらのサイト。

【STINGER5】コピペでOK!ヘッダーにアイコンフォントのフォローボタンを設置する方法
http://shufulife.com/follow-header/


 Stinger5のカスタマイズ内容なので、
そのままコピーすると少しコードが違います。

応用すれば大丈夫。


 ちなみにStinger7のカスタマイズは、
ほとんどStinger5の応用がききます。

Stinger6とStinger7は尚更簡単に更新できそう。
Stinger5とStinger7は少し違うけど大体いける。

Stinger3とStinger5は似てるけど少し違う。
なので、Stinger3からStinger7は結構違うのかもしれません。

まぁ楽しくカスタマイズして下さい。


 定期的にアップデートしておくと、
カスタマイズ内容も似ているので楽ですね。

では、始めましょう。

Stinger7ヘッダー用ウィジェットにSNSボタン


 Stinger7には、ヘッダー右横にウィジェットを追加できます。
ここにSNSフォローボタンを置きます。

別に広告でも構わないし、
好きなものに置き換えて下さい。



 WordPress管理画面→

ウィジェット→

ヘッダー用ウィジェット→

テキストを追加。


 以下の内容を貼り付けます。
タイトルは無し。

(このままコピーしないで下さい。UTF-8Nに変換して下さい。)


<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="【TOPのURL】/?feed=rss2" target="_blank"><i class="fa fa-rss-square" style="color:#ffb53c;"></i></a>
</li>
</ul>
</div>



広告を置きたい方は


<div class="header-ad">

ここに広告

</div>


で、以下のCSSに関しては

.header-ad

で適当にカスタマイズして下さい。
ulやliは不要でしょう。

スタイルシートCSSの設定、ヘッダー用ウィジェット


 スタイルシートへ。

以下を追加。

(このままコピーしないで下さい。UTF-8Nに変換して下さい。)



/*--------------------------------
ヘッダーコンテンツ
---------------------------------*/
#header-l {
max-width: px; //ヘッダー画像の幅を指定
}
#header-r {
max-width:200px; //ヘッダー用ウィジェットの幅を指定
}

/*電話番号*/
header .textwidget{
background:transparent;//灰色の背景を除去
}


/*headerフォローボタン */
.header-sns {
padding: 0.3em;
font-size: 40px;
float:right;
max-width:100px;
}
.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);
}



以上です。


 もし、SNSフォローボタンではなく、
もっと横長の広告を置きたい場合は、

#header-r {
max-width:200px; //ヘッダー用ウィジェットの幅を指定
}

を広くしてみてください。


 ヘッダー画像と重ならないように、
高さをずらすなり、

#header-l {

を狭くするなり、うまくカスタムしましょう。

フッターにも同じウィジェットが表示されるので除去


 通常、このヘッダー用ウィジェットには
企業の電話番号を記入する事を想定されているようです。

なので、フッターのコピーライト表記のあたりにも、
同じヘッダー用ウィジェット内容が自動で表示されます。


 フッターに上記CSS条件で、SNSフォローボタンを置くと、
幅がコンテンツ幅と同じ(1060pxほどある)になり、
物凄く大きなクリック領域になってしまいました。

テーブル形式にして、
 display:block;
を使っているからでしょうかね。


 これはアカンので、
フッターに表示されるヘッダー用ウィジェットは消しました。

そのやり方です。
子テーマで修正。


footer.php→

<?php get_template_part( 'st-header-widget' ); //電話番号とヘッダー用ウィジェット ?>

を検索。
見つけたら削除します。




 こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。


 当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。

必ずデータは最新のバックアップを取っておいて下さい。


 WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。

当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。

詳細はWordPressヘルプを参照下さい。


 ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
(わからんから)


スポンサードリンク