※この記事にはプロモーションが含まれています。

Stingerを使うときには最低限ここだけはカスタマイズしている

stinger世の中がStingerだらけになるのはあまり好ましいことではないけれど、StingerにするとIE対策とスマホ対応が楽なので、ついつい手を出してしまう。本当によくできたWordpressテーマなので感心しきり。

スポンサーリンク

ヘッダー画像の高さやサイトネーム等の位置変更

ヘッダー画像の高さは150pxだと高いので100pxに変更。functions.phpのカスタムヘッダーの項目を書き換える。画像データもここで変えられるけれど、それは普通にカスタム画面のほうで。

//カスタムヘッダー
$args = array(
'width' => 986,
'height' => 100,
'flex-height' => true,
'default-image' => get_template_directory_uri() . '/images/stinger3.png',
);

サイトネームはヘッダー画像の上に重ねる。副題(Description)も重ねたければ重ねる。style.cssのsitename aの項目を少々書き換え。positionをabsoluteにしてmarginを調整。

#container #header #header-in #h-l .sitename a {
	color: white;
	text-decoration: none;
	font-weight: bold;
	position: absolute;
	margin-top: 50px;
	margin-left: 20px;
}

Descriptionの方も同様。descrの項目を書き換え。

#h-l .descr {
	font-size: 12px;
	color: #666;
	font-weight: normal;
	margin-bottom: 0px;
	line-height: 20px;
	position: absolute;
	margin-top: 90px;
	margin-left: 20px;
}

 ヘッダー画像より上の部分の余白はh-lのpadding-top、padding-bottomを調整。

#container #header #header-in #h-l {
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	float: left;
	width: 100%;
}

サイドバーのNewEntryを削除

サイドバーに標準で設定されているNewEntryは、WordPress Popular Postsのような慣れたプラグインを使いたいので、ソースから消す。sidebar.phpの<!–最近のエントリ–>以下、<!–/最近のエントリ–>までの記述を削除。

#container #wrap #wrap-in #search {
	padding-top: 0px;
	padding-bottom: 0px;
}

Search欄の上も不必要に下がっているので上に詰める。paddingを0に。

#container #wrap #wrap-in #search {
	padding-top: 0px;
	padding-bottom: 0px;
}

スマートフォンでもヘッダー画像を表示

標準仕様だとスマホサイトにはヘッダー画像が表示されない。smart.cssを書き換えてPCサイトと同じようにヘッダー画像が張り付くようにする。

もしも下記表記があったら削除。(バージョンによって表記がある場合も)

#container #gazou {
    display: none;
}

下記表記を追加。

#gazou img{
    height: auto;
    max-width: 100%!important;
}

アドセンス用のウィジェットは無理して使わない

スマホ用のほうは使ってもいいけど、PCサイト用のウィジェットはバナーが2か所に表示されて不都合があったりするので、無理して使うことはない。Post Snippetsとか導入していればバナーは普通に表示できる。

Stingerはかなり浸透しているので、個性を出すにはかなりカスタマイズしないと目立たないかも・・・。

 

この記事の執筆者:おき兄(おきにい)
PCで遊び続けて数十年。ガジェット好き。マザーボードに美しさを感じる系の人。子供の頃からいろいろなものを組み立てたり壊したりしてました。最近はVR/MR的な世界に傾倒しつつあります。
スポンサーリンク

シェアする

フォローする

スポンサーリンク