世の中が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はかなり浸透しているので、個性を出すにはかなりカスタマイズしないと目立たないかも・・・。
