かゆい所に手が届く!?STINGERの細かすぎるカスタマイズ特集

      2016/04/11

stinger0003

WordPressのテーマであるSTINGERの細かすぎるカスタマイズをご紹介します。

絶対にやった方が良いものも含まれます。

STINGER初心者の方には特に参考になると思います。

元になるのは最新バージョンであるstinger3ver20140124です。
(2014/03/14 現在)

すぐに反映されない場合は、新しい記事を書いてみてください。

たぶんそこには反映されていると思うので。

スポンサーリンク

PCの左下のソーシャルボタンを消す

stingercust1

僕は消したい派です。

フッター(footer.php)の「ここにsns02」の所を丸々消します。

こんな風に。

 
stingercust2

 
stingercust3

引用の位置を内側に寄せる

stingercust4

僕の好みとしては、もうちょっと内側に寄せたいんですよね。

こんな風に。

 
stingercust7

まずはPCから直します。

スタイルシート(style.css)の「引用」をいじります。

 
stingercust5

/*----------------------------
引用
-----------------------------*/
.post blockquote {
	background-color: #f3f3f3;
	background-image: url(images/quote.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 70px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 40px;
	margin-top: 20px;
	margin-bottom: 20px;
}

 
引用のゾーンに、これをコピーして上書きすれば大丈夫です。

上の画像だと「基本のhタグ」も映ってますが、それはそのままでいいです。

次にスマホです。

スマホだと最初こんな感じです。

 
stingercust8

これをこんな風にします。

 
stingercust11

smart.cssの「引用」をいじります。

 
stingercust9

/*引用*/

.post blockquote {
	background-color: #f3f3f3;
	background-image: url(images/quote.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 70px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 40px;
	margin-top: 20px;
	margin-bottom: 20px;
}

 
PCと同じように、これをコピーして上書きすれば大丈夫です。

スポンサーリンク

パンくずリストの下のスペースを短くする

stingercust12

これをもっと短くしたいんですよね。

こんな風に。

 
stingercust15

なんか違和感があったんですよね。

僕だけかもしれませんが。

でも消すのはSEO的によくないみたいです。

僕は昔消しちゃってました!

スタイルシート(style.css)の「google用ぱんくず」をいじります。

 
stingercust13

 
stingercust14

このように一行消すだけです。

PREV(前の記事)、NEXT(次の記事)を現在のカテゴリ内に限定する

これができるのが、ワードプレスの大きな強みの一つであると思っています。

色んなジャンルを扱っている場合、特に便利ですよ。

単一記事の投稿(single.php)の「ページナビ」をいじります。

2箇所に“true”を記述するだけです。

 
stingercust20

 
stingercust21

スマホでツイート、YouTube埋め込みなどが途中で切れるのを直す

stingercust16

これは最初ショッキングでした。

smart.cssの「各コンテンツの最大サイズを制限」をいじります。

 
stingercust17

 
stingercust18

このように一行だけ直します。

下記のソースをコピーして当該行に上書きすれば大丈夫です。

.kizi img, .wp-caption, .kizi table {

 
すると、ちゃんとこうなります。

 
stingercust19

Google AdSenseが途中で切れるのを直す

下記のようにすれば直ります。

</div>
アドセンスのコード
<div class="kizi">

class="kizi"やclass="kizi02"の枠内だと途中で切れてしまうことがあるので、外に出してあげています。

Quick Adsenseを使用している方は、下記のようにしてください。

</div>
</div>
アドセンスのコード
<div class="kizi">
<div>

その代わり、コードを入れた部分の右側で「右」とか「中央」とか設定した部分は無効になります。

カスタマイズは以上です。

その他わからないことがあれば、下記のFAQが参考になるかもしれません。

「 みんなのFAQ 」 一覧

いちばんやさしい WordPress の教本 人気講師が教える本格Webサイトの作り方
石川栄和 大串肇 星野邦敏
インプレスジャパン
売り上げランキング: 5,772

 

はじめての簡単 WordPress入門「決定版」 (BASIC MASTER SERIES)
原 久鷹
秀和システム
売り上げランキング: 12,474

おすすめ記事

1
WiMAXって何?速度制限時でも動画が見れるWi-Fiルーターです

WiMAXとは、au系のUQコミュニケーションズが提供する、無線のインターネット ...

2
無料でネスカフェのカプセル式マシン「ドルチェグスト」が貰えます!

カプセルからコーヒーを作る事ができる事を知っていますか? 一時、CMやテレビ番組 ...

3
iPhoneケースや長財布のオリジナル本革製品が作れる「JOGGO」

レザー製品って、格好良いですよね。 その中でも、本革製品は、やはり別格です。 し ...

 - ブログ ,