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