2011年12月3日土曜日

WordPress Twenty Eleven ヘッダーのカスタマイズ

WordPressのテーマの Twenty Elevenを使用しています。

自分のメモをかねて書きます。

ヘッダーのカスタマイズする方法。


画像サイズを変更する方法をメモしておきます。


いじるのは「functions.php」内の122行目と123行目


define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1000 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 288 ) );


赤字の部分が画像のサイズです。
122行目が画像の幅。123行目が画像の高さです。

このページを参考にさせていただいて
以下のカスタムをしました。
ありがとうございます。
http://flyorbjp.com/web-consulting/1393

次にヘッダーの文字の上の隙間をなくす。グレー
style.cssの最終行に一行追加
#page.hfeed { margin-top: 0px; }

それから、グレーのラインを消します。
 ” border-top: 2px solid #bbb; ”を以下のようにコメントします。
/* border-top: 2px solid #bbb; */


次に下記コードを追加して縦幅を調整
#site-title {
font-size: 32px;
text-shadow: 0px 1px 1px #ccc;
margin: 0px;
padding: 14px 0px 0px 15px;
}

#site-description {
font-style: normal;
color: #999;
line-height: 1;
margin: 0 0 14px 0;
padding-left: 20px;
}

#site-title a {
color: #333;
letter-spacing: -0.05em;
}

#branding .only-search #s, #branding .only-search #s:focus {
width: 100px;
}

#branding { border: none; }
#branding img { border-top: 1px solid #aaaaaa; }
#branding hgroup {
margin: 0 0 0 10px;
overflow: hidden;
zoom: 1;
}

#branding #searchform {
right: 2.5%;
top: 1.5em;
}
#branding #s {
font-size: 12px;
height: 22px;
padding: 4px 10px 4px 38px;
width: 110px;
}

#branding #s:focus {
width: 100%;
}

0 件のコメント:

コメントを投稿