STINGER7 サイドバーの改造色々　まとめ

2016/06/08 2016/06/23

えーっと最初に
一気にまとめ書きするので目次で必要な情報へ飛んでください。
サイドバーのカスタマイズをずら～っと上げました。
GINのこのページでやってることです。
たくさんの情報がありますよね　ありがたいことです。
今後追記した場合は　ここの日付　2016/0６/７　を確認してみてください。

Contents　(目次)

1 サイドバーの改造
2 サイドバーカスタマイズ　まとめ

サイドバーの改造

サイドバーの改造と言っても色々あるので私のページの表示をベースでの方法です。　STINGER７に元々ある使い方ではなくて　ひと手間ですね。　新たにcssやphpに書き込んでの追加作業なので　なるべくコピペで出来るように紹介します。　もっとも私は他の方の方法を使いページをイジってるので　元のページも紹介しますね。　本当にありがたい。

１　プロフィールを載せる

私の場合　サイドバー内にプロフィールと写真を入れてます。写真と言っても今はまだアバターですが…　　実はGoogle Adsenseの取得もこの程度のプロフィールで大丈夫でした。　アドセンスの件については別記しますし　ちょっとした冷や冷や話もあるので笑っていただけたらな　って思ってますが　いつその話に行き着くやら…　余談が多い内容ですがＧＩＮ流ということで　笑

sideber.phpを参照ください。　外観→テーマの編集→sideber.php
コピー場所は　<?php } ?>　の後に
えーっと　キーボードで　”Ctrl+F”　を押して左上に検索カーソルが出るんでそこに　<?php } ?>　を入力して検索した一番最初のところです。　・・・ //アドセンス ?>　ってところの近くです。

<h4 class="menu_underh2"> ＧＩＮ   プロフィール</h4>
	<div class="textwidget">
		<span class="profile">
			<img src="●●●●●●●">
		</span>
	<p>日本人男性です。　　かくかくしかじか云々かんぬん　いろはにほへと・・・・
        </br>Mail to →　<a target="_blank" href="●●●●●●●">【メールアドレス等】</a></br></p>
	</div>

<h4 class="menu_underh2"> ＧＩＮプロフィール</h4>

</span>

<p>日本人男性です。　　かくかくしかじか云々かんぬん　いろはにほへと・・・・

</br>Mail to →　<a target="_blank" href="●●●●●●●">【メールアドレス等】</a></br></p>

</div>

これだと「かくかくしかじか・・・」まんま乗っかります　笑　＜ｐ＞内のプロフィール部分をご自身で変えてください。
コピペ用のコード内に●●●●●●が２箇所あります。

１つ目の<img src="●●●●●●●">はプロフィール画像です。
ご自身がアップしたい画像を　メディア→ファイルを選択　でアップロードし　アップロードした画像を確認すると右側に画像の情報がでますよね。　その情報の中の　ファイルのURL　をコピーしてここに貼り付けてください。　画像が出ます。
すっごい大きく出ますよね　笑　　私の様な丸い形にはなっていないと思います。
そこで次に　画像を丸くすることをします。　このままでいいや　って人はご参考までに。

GINの場合は以下の設定になっています。　これをCSSにコピーしてください。

/* プロフィールの画像大きさ */
span.profile img {
    margin: 0px 15px 10px 15px;
    width: 130px;
    height: 120px;
    border-radius: 50%;
    text-align: start;
    float: left;
}

/* プロフィールの画像大きさ */

span.profile img {

margin: 0px 15px 10px 15px;

width: 130px;

height: 120px;

border-radius: 50%;

text-align: start;

float: left;

}

width　と　heighit　をいじると　丸み　大きさを変更できます。

さて２つ目の
<a target="_blank" href="●●●●●●">【メールアドレス等】</a>

これは連絡先ですね。
私の場合　クリックすると連絡先へのメールフォームが開くように設定してます。
私の場合　【メールアドレス等】の部分にメールアドレスを記載してしてますが　この●の指定先アドレスをメールアドレスに指定すればメールが送れますし　ここをクリックすると別途のメールフォームを関連させて設定することも可能。　私はGoogleフォームを利用しています。

さてこれを参考にさせていただいたのはこちらのサイト

【Stinger7】右サイドバーでプロフィールをカッコよく表示させる方法 - yuichi.co

色々と方法が乗ってます　ありがたいです。

さてもう一つ乗せておきます。
私が使っているアバターについてですが　FACE YOUR MANGA　というサイトを使っています。
ちなみに　こんな画像が作れます。

この画像を上記のCSSで表示の仕方を変えて　丸く表示してるのがサイドバーです。
メールで受け取ることになりますが無料です。　なかなか細かく設定できるので色々とできると思います。　まぁ私はGoogleAdsenseを意識していたので管理人の様子はちゃんと載せよう　と思っていたのでね。　ご参考まで。

２　プロフィールの下にSNSボタンを設置

私のページには上記で設定したプロフィールの下にSNSボタンがありますよね。　その設定です。
さて以下に紹介するコードなんですが　sidebar.php内にコピーしてもらうのですけど(子テーマにコピーしたものね。)　場所の指定があります。　一応私と同じ位置に設置するのであれば　ということで説明します。　既にsidebar.php内に記載されているコードの26行目辺りに　<?php } ?>　の下　次の行に挿入してください。見当たらなければ　Ctrl+F　でページ内で　<?php } ?>　を探してみてください。

<h4 class="menu_underh2">フォローいただけると嬉しいです</h4>
	<div class="follow">
		<ul>
			<li class="twitter"><a href="【twitterURL】" target="_blank"><i class="fa fa-twitter"></i></a></li>
			<li class="facebook"><a href="【facebookページURL】" target="_blank"><i class="fa fa-facebook"></i></a></li>
			<li class="googleplus"><a href="【googleplusURL】" target="_blank"><i class="fa fa-google-plus"></i></a></li>
			<li class="rss"><a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【運営しているブログのドメイン】%2Ffeed%2F"><i class="fa fa-rss"></i></a></li>
		</ul>
	</div>

<h4 class="menu_underh2">フォローいただけると嬉しいです</h4>

<ul>

</ul>

</div>

これでボタンの設置はできました。
rss　の一行に　【運営しているブログのドメイン】　があるのでそちらにスペースを空けずに一文にアドレスを紛れ込ませてください。

さて　これだけじゃ機能しないのでstyle.cssに以下を追加します。　ちょっと長いです　笑
style.cssの一番下にコピーしてくださいませ。

/*サイドバーSNSボタン*/
.follow {
    margin-bottom: 10px;
}
.follow ul {
    margin: 10px 0;
    overflow: hidden;
    position: relative;
}
.follow ul li {
    float: left;
    margin: 10px 0 0 10px;
    width: 25%;
}
.follow ul li a {
    display: block;
    color: #fff;
    margin: 0px 3px;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    transition:	.2s ease-in-out;
    -webkit-transition:	.2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
}
.follow .twitter a,
.follow .facebook a,
.follow .googleplus a,
.follow .rss a {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
}
.follow .twitter a {
    background: #00aced;
}
.follow .facebook a {
    background: #3c5a98;
}
.follow .googleplus a {
    background: #db4a39;
}
.follow .rss a {
    background: #87c040;
}
/*ここまで*/

/*サイドバーSNSボタン*/

.follow {

margin-bottom: 10px;

}

.follow ul {

margin: 10px 0;

overflow: hidden;

position: relative;

}

.follow ul li {

float: left;

margin: 10px 0 0 10px;

width: 25%;

}

.follow ul li a {

display: block;

color: #fff;

margin: 0px 3px;

padding-top: 15px;

padding-bottom: 15px;

text-align: center;

transition: .2s ease-in-out;

-webkit-transition: .2s ease-in-out;

-moz-transition: .2s ease-in-out;

-o-transition: .2s ease-in-out;

}

.follow .twitter a,

.follow .facebook a,

.follow .googleplus a,

.follow .rss a {

border-radius: 5px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-o-border-radius: 5px;

}

.follow .twitter a {

background: #00aced;

}

.follow .facebook a {

background: #3c5a98;

}

.follow .googleplus a {

background: #db4a39;

}

.follow .rss a {

background: #87c040;

}

/*ここまで*/

もしこのSNSボタンが必要なければ飛ばしてください。
まぁサイドバーにあるとトップページに戻ったときも(記事一覧など)表示されているので　思い出してフォローいただける場合があるかな？　と　笑　　ということで私は設置です。

３　見出しのカスタマイズ

小さなことですがアクセントがあるとグッと自分らしさが出ます。　また特に色の使い方で　自分　というか雰囲気というかね　味が出るから私は大事だと思ってます。　派手派手しくは無いのだけど　地味〜に味わえる外観を目指してます（ホントかなぁ　苦笑）
さてこの改造は　もうまんまこちらですので詳細の参照は以下のサイトを参考にしてください。

Stinger7の右サイドバー見出しをコピペでオシャレにカスタマイズ - yuichi.co

変えたところと言えば　色(微妙に違う　笑)と見出しのアクセントになる丸いデザインを少しだけ変えました。　丸ではなくて四画もありかな　と思ったけど　後に本文の見出しをいじることになるので同じ様な形だと　ちょっと角々しいな　と思って　笑

４　人気記事　他　のデザインを統一する

これもこちらに記事が・・

【Stinger7】右サイドバーのNEWPOSTと人気記事を統一感のあるデザインにする4つの手順 - yuichi.co

凄く参考にさせてもらったので　本当にありがたいです。
ほぼ設定が載っていますので是非ご参照ください。

５　カテゴリーをカスタマイズ

STINGER７ではカテゴリーの設置は　外観　→　ウィジェット　で変更できますが　その表示方法についての設定もできます。　サイドバーウィジェットを開くと　”カテゴリー”というウィジェットが出てきますので右側の小さな▼をクリックし中を確認しますと　タイトルが書けたり

投稿数を表示
階層を表示
ドロップダウン表示

という設定ができますよね。
私の使い方なのだけどなるべくシンプルにしたかったので　カテゴリーを階層で分けて細かく指定するより　タグ　をつけることで関連記事への誘導ができるな　と思ったので階層を指定していません。　トロップダウンについては使ってませんのでわからないけど　それぞれのカテゴリーで記事数がどのくらいあるかを表示する　”投稿数を表示”ってのにチェックをいれて使ってますが　標準表示だとGINの場合だと　「　WordPress(１０)　」()内は記事数　　っていう表示なんですよね。。でそこをちょっといじくりたいな　と思って探したらありまして　今の様な表示になってます。

方法は　fanctions.php　に追加で以下

/*カテゴリーのカスタマイズ*/
function theme_list_categories( $output, $args ) {
	$replaced_text = preg_replace('/<\/a> \(([0-9,]*)\)/', ' <span class="count">${1}</span></a>', $output);
	if($replaced_text != NULL) {
		return $replaced_text;
	} else {
		return $output;
	}
}
add_filter( 'wp_list_categories', 'theme_list_categories', 10, 2 );

/*カテゴリーのカスタマイズ*/

function theme_list_categories( $output, $args ) {

$replaced_text = preg_replace('/<\/a> $([0-9,]*)$/', ' <span class="count">${1}</span></a>', $output);

if($replaced_text != NULL) {

return $replaced_text;

} else {

return $output;

}

add_filter( 'wp_list_categories', 'theme_list_categories', 10, 2 );

さらに以下をcssに追加

/*カテゴリーのカスタマイズ*/
#side aside ul li ul li { /* デフォルトのアイコンと余白を削除 */
	background: none;
	padding-left: 0;
}
#side aside li.cat-item a { /* リンク全体の装飾 */
	display: block;
	overflow: hidden;
	font-size: 16px; /* 文字サイズ */
	line-height: 2.2em; /* 行（ボックス）の高さ */
	text-decoration: none;
	vertical-align: middle;
	padding: 0 8px; /* 左右の余白 */
	color: #fff; /* 文字色 */
	background: #6fa5e3; /* 背景色 */
	margin-bottom: 3px; /* 次のカテゴリーとの余白 */
	border-radius: 6px; /* 角を少し丸く */
}
#side aside li.cat-item a:hover { /* マウスオーバー時の設定 */
	background: #a8ffb0; /* 背景色 */
	color: #ff9696; /* 文字色 */
}
#side aside li.cat-item span { /* 記事数部分の装飾 */
	line-height: 1em;
	float: right; /* 右端に寄せる */
	margin: 8px 0 0 8px; /* 位置の調整 */
	padding: 4px 8px; /* 文字周りの余白 */
	border-radius: 4px; /* 角の丸み */
	color: #fff; /* 文字色 */
	background: #6f81ff; /* 背景色 */
}

/*カテゴリーのカスタマイズ*/

#side aside ul li ul li { /* デフォルトのアイコンと余白を削除 */

background: none;

padding-left: 0;

}

#side aside li.cat-item a { /* リンク全体の装飾 */

display: block;

overflow: hidden;

font-size: 16px; /* 文字サイズ */

line-height: 2.2em; /* 行（ボックス）の高さ */

text-decoration: none;

vertical-align: middle;

padding: 0 8px; /* 左右の余白 */

color: #fff; /* 文字色 */

background: #6fa5e3; /* 背景色 */

margin-bottom: 3px; /* 次のカテゴリーとの余白 */

border-radius: 6px; /* 角を少し丸く */

}

#side aside li.cat-item a:hover { /* マウスオーバー時の設定 */

background: #a8ffb0; /* 背景色 */

color: #ff9696; /* 文字色 */

}

#side aside li.cat-item span { /* 記事数部分の装飾 */

line-height: 1em;

float: right; /* 右端に寄せる */

margin: 8px 0 0 8px; /* 位置の調整 */

padding: 4px 8px; /* 文字周りの余白 */

border-radius: 4px; /* 角の丸み */

color: #fff; /* 文字色 */

background: #6f81ff; /* 背景色 */

}

全てGINのページの設定なので　背景色や文字色　形など自分風にカスタマイズしてください。
で元々この方法を紹介している　うぇぶあしび　さんのものに１箇所だけ追加しています。

#side aside li.cat-item a 　の部分の一番下

border-radius: 6px; /* 角を少し丸く */

1	border-radius: 6px; /* 角を少し丸く */

の部分です。
次に説明するキーワード(タグ)の表示で角を丸くしているので合わせてます。
細かいことを言うと　キーワードよりも大きな表示なので角を丸くする範囲を大きめに取ってることかな。　ほんと細かいけど　笑

さて　参考にさせていただいたのはこちらのページ
かなり参考にさせてもらっています。　ありがたい！！
私はやってませんが　アイコンの追加も出来たりしますので　さらに工夫できますよ～
因みにアイコンの追加方法は　うぇぶあしび　さんのページの後半に出ています。
私はメニューにこの方法を使っていますが　メニューに使う場合はプラグインをインストールする必要がありますので　メニューのカスタマイズを書かせていただいた際　載せますね～

STINGER7：サイドバーのカテゴリーをカスタマイズする方法【ウィジェット】

STINGER7を使っているほとんどの方はサイドバーにカテゴリーの一覧を表示して ...

うぇぶあしび

６　KEYWORD　のカスタマイズ

実はこちらも　うぇぶあしび　さんのカスタマイズを参照しました。
STINGER7の場合　最初(デフォルト)の設定だと　使われているキーワード(タグ)が　多い・少ない　で文字の大きさが変わって検索しやすさをアップしてる感じかな。

とはいえちょっと見づらいのと　きっとキーワード(タグ)は今後どんどん増えていくと思うので見易さの整理と言う意味で　一つ一つのワードがきっちり　くっきり　分かれて同じ大きさに整理されていたほうがいいかな　と思って参考にさせていただきました。　マウスでカーソルを合わせるとそのタグが設定されている関連ページ数も表示されるので便利ですよ～

先ずウィジェットにてサイドバーウィジェットの中のタグクラウドウィジェットを設定し▼を押してタイトル名入力と　分類：タグ　を選択します。

そしたらcssに以下を追加してください。
これは私のまんまコピーなので自分色に変えてくださいませ。

/*タグウィジェット*/
.tagcloud a {
	font-size: 14px !important; /* 文字のサイズ */
	line-height: 1em;
	background: #6fa5e3; /* 背景色 */
	color: #fff; /* 文字色 */
	display: inline-block;
	white-space: nowrap;
	padding: 8px 8px; /* 文字周りの余白 */
	margin-top: 3px; /* タグ同士の余白 */
	border-radius: 4px; /* 角を少し丸く */
	text-decoration: none;
}
.tagcloud a:hover {
 	background: #a8ffb0; /* マウスホバー時の背景色 */
	color: #ff9696; /* マウスホバー時の文字色*/
}

/*タグウィジェット*/

.tagcloud a {

font-size: 14px !important; /* 文字のサイズ */

line-height: 1em;

background: #6fa5e3; /* 背景色 */

color: #fff; /* 文字色 */

display: inline-block;

white-space: nowrap;

padding: 8px 8px; /* 文字周りの余白 */

margin-top: 3px; /* タグ同士の余白 */

border-radius: 4px; /* 角を少し丸く */

text-decoration: none;

}

.tagcloud a:hover {

background: #a8ffb0; /* マウスホバー時の背景色 */

color: #ff9696; /* マウスホバー時の文字色*/

}

７　下へスクロールでサイドバーが消えるのを解消する

この方法はアフィリエイトなどで追尾機能を使用している方はその機能が使えなくなるのでご注意ください。　私はサイドバーに色々と表示をしたかったのですが　スクロールするとサイドバーの全てが表示される前に消えてしまうので　それを解消したかったので。

FTPソフトでアクセスすることになります。
Stinger７の親テーマにアクセスし　js フォルダ 内にある scroll.js を削除します。
確認してみてください。　スクロールしてもサイドバーが消えないと思います。
強いて言えば　この削除作業をする前に　scroll.js　のバックアップをオススメします。
今後使わないとも限らないのでね。

サイドバーカスタマイズ　まとめ

こんなもんかな？
あとはTwitterを表示させたり　もしFaceBookページなどの表示をさせたりということもあるかもしれません。　このTwitterやFaceBook(FBは私は今のところ設定してないけど)の設定についてはWordPressの左のメニューで　外観　→　ウィジェット　でサイドバーウィジェット内にテキストとしてコードを貼り付けて設置してます。

さっ　これだけやってらだいぶ変わりますよ！
後は自分色にして　オリジナリティーを出してくださいませ。

重要

※これらコードの追加は全て子テーマ内にあるプログラムファイルへ行っています。
以下を参照ください。