人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Wordpress3.4のテーマ「TwentyEleven」のカスタマイズについて、
以下の点を教えてください。

1.ヘッダー画像とトップまでの高さを低く(狭める)方法

2.サイトのタイトル と キャッチフレーズ

http://www.near-mint.com/blog/software/wp-syntaxhighlighter
のサイトのように、
左右に並べて表示する修正。

3.上記のサイトは、全体が黒い細線で囲まれています。
このやり方。

style.css
の修正だと思うのですが、
どこかわかりません。

http://1811way.com/work008/header-hatena001.png
を参照してください。

よろしくお願いします。

●質問者: kohhi
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● lang_and_engine
●100ポイント

修正したいテーマのフォルダ内にあるstyle.cssで,それぞれ該当する要素のCSS属性を書き換えたり,追記したりします。

行番号はバージョンで変動しますので,修正すべき要素の名前を下記に列挙します。


1:上の高さ

#site-title 要素のスタイルで,例えば margin : 0; などしてみてください。


2:タイトルの横並び

#site-description要素に float:right; clear: right;

#site-title 要素に float:left;


3:全体の枠線

#wrapper要素に border : solid 1px #222222;



Firebugを使えば,特定の要素のCSS属性を簡単に調べられます。お試しください。


kohhiさんのコメント
お返事ありがとうございました。 Firebug使わせてもらってます。

2 ● rouge_2008
●150ポイント ベストアンサー

1.ヘッダー画像とトップまでの高さを低く(狭く)
タイトル(#site-title)とキャッチフレーズ(#site-description)に指定された余白が原因ですので、その値を小さくします。

・510行目

#site-title {
margin-right: 50px; /* 元の値 270px */
padding: 1.2em 0 0; /* 元の値 3.65625em 0 0 */
}


・526行目

#site-description {
color: #7a7a7a;
font-size: 14px;
margin: 30px 100px 0.5em 0; /* 元の値 0 270px 3.65625em 0 */
}



※上記のままだと検索フォームが下に下がって中途半端な位置になります。
どの位置に表示させたいか分かりませんが、キャッチフレーズの右に表示するには次のようにしてみてください。

・626行目

/* Search Form */
#branding #searchform {
position: absolute;
top: 1em; /* 元の値 3.8em */
right: 2.6%; /* 元の値 7.6% */
text-align: right;
}



2.サイトのタイトルとキャッチフレーズを左右に並べて表示
それぞれ「float」で右寄せ・左寄せを追加で指定します。

・510行目

#site-title {
margin-right: 50px; /* 元の値 270px */
padding: 1.2em 0 0; /* 元の値 3.65625em 0 0 */
float: left;
}


・526行目(※上記変更後527行目)

#site-description {
color: #7a7a7a;
font-size: 14px;
margin: 30px 100px 0.5em 0; /* 元の値 0 270px 3.65625em 0 */
float: right;
clear: none;
}


次の記述を一番最後(※最終行)に追加して、h2に対するfloatクリアの指定を無効にします。
上記にキャッチフレーズ(#site-description)への指定に加えた方がいいと思います。こちらは必要ありません。

h2 {
clear: none;
}


上記で大丈夫だと思いますが、一応floatのクリアをヘッダー画像に指定します。

・531行目(※これまでの修正を加えていると533行目?)

#branding img {
height: auto;
margin-bottom: -7px;
width: 100%;
clear: both;
}



3.コンテンツ表示部全体を黒い細線で囲む
コンテンツ全体を囲んでいる要素にボーダーを指定します。

・326行目

#page {
background: #fff;
border: 1px solid #000;
}


もしヘッダー上部のグレーの部分が不要な場合は、次のようにして無効にします。

・504行目

#branding {
/* border-top: 2px solid #bbb; */
padding-bottom: 10px;
position: relative;
z-index: 9999;
}



希望の表示と違う部分があったら返信で知らせてください。
【※回答一部修正済み】


kohhiさんのコメント
いつも、ご丁寧な回答ありがとうございます。 たいへんわかりやすいです。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ