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ヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク