初心者おばちゃんもできた!WordPress(ワードプレス)講座

ワードプレスでブログを始めませんか?テーマSTINGERなど。おばちゃんのカスタマイズ保存版

【Stinger3】SNSボックスを縦に トップページ以外は非表示にする

      2015/04/16

snsボックス

お世話になっているStinger3で、少し気になるところと言えば、追尾してくるSNSボックスです。

これって、「横並び」になっているので、なんとなく画面が見づらいですよね。

ということで、今回はSNSボックスのカスタマイズです。

  1. 並びを「横並び」→「縦並び」に変更。
  2. いらないSNSボタンを削除する。
  3. トップページ以外のSNSボックスは削除する。

こちらの作業を行います。

スポンサーリンク

横並びのSNSボックスを横並びにする

スタイルシート (style.css)を変更する

「管理画面」-「外観」-「テーマの編集」-「 スタイルシート (style.css)」を開きます。

.sns { ←この部分を探します。

黄色いマーカーの部分(2.3行目)を書き換えます。

 

snsボックス縦

このような縦並びになります。

 

SNSボタンのカスタマイズ

いらないSNSボタンを削除する

使わないSNSボタンを取る方法です。

sns02.phpを変更する

「管理画面」-「外観」-「テーマの編集」-「sns02.php」を開きます。

「li」で囲まれた部分が、SNSボタンです。
良く見るとツイッター、フェイスブック、グーグルプラス、はてなブックマークの順に並んでいます。
今回はツイッターを削除してみます。

↑の部分を削除します。

 

※注意点

削除する部分は2か所あるので2ヵ所とも削除して下さい。

SNSボタンを削除する

上の部分はトップページ、下の部分はそれ以外のページに表示されるSNSボタンです。

 

トップページ以外のSNSボタンを消したい場合は?

sns02.phpを変更する

「管理画面」-「外観」-「テーマの編集」-「sns02.php」を開きます。

<?php } else if (is_page()) { ?> ←ここを探します。

<div id=”snsbox”>~</div>までを削除します。

このようになります。

これでトップページ以外のSNSボックスは削除できます。
(ただ、この方法で良いのかわかりません。良い方法があれば教えて下さい)

 

最後に

今回はSTINGER3の追尾するSNSボックスのカスタマイズ方法でした。

私はポケットのボタンを追加していますが、新たにボタンを追加する時は、他と同じようにリストの中にボタンのコードを入れるだけでOKです。
その際は、2ヵ所にコードを入れるようにして下さいね。

トップページ以外のSNSボックスを消すという方法は、もっと良い方法があるかもしれません。
とりあえず今回はメモ書き程度に載せておきます。

 - STINGER ,

  • このエントリーをはてなブックマークに追加
  • Pocket

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

[初心者]ワードプレスのテーマSTINGER3をインストールする
[初心者]ワードプレスのテーマSTINGER3をインストールする

今回は、ワードプレスにテーマを設定してみましょう。 スポンサーリンク このページ …

STINGER3 ウィジェット広告の設置方法と配置は?
STINGER3 ウィジェット広告の設置方法とサイトの配置は?

前回のウィジェットの設定方法の続きで第2回目となります。 今回はワードプレスのテ …

STINGER5
STINER5インストールとカスタマイザーで色のカスタマイズ

とうとう、STINGER3からSTINGER5にバージョンアップを行いました。 …

[STINGER3]トップページ・サイドバーのカスタマイズ
[STINGER3]トップページ・サイドバーのカスタマイズ

STINGER3の基本的なカスタマイズ第2弾です。 改めて新しいサイトを作るとき …

STINGER3 基本的なカスタマイズ
[初心者]STINGER3の基本的なカスタマイズ

スポンサーリンク このページの目次1 STINGER3 テキスト色や装飾の変更1 …

[stinger3]ワードプレスヘッダー画像と背景色の変更
[STINGER3]ワードプレスのヘッダー画像と背景色の変更方法

今回は、いよいよワードプレスのテーマSTINGER3のカスタマイズです。 ◆今回 …

FeedlyボタンとRSSボタンを並べて設置する方法は?
FeedlyボタンとRSSボタンを並べて設置する方法は?

今回は、以前から付けたいと思っていたFeedlyとRSSのボタンの設置方法です。 …