WordpPress3.0のTwenty Ten テーマのカスタマイズの第一歩として、
テーマのコードはあまり変えず、CSSで見栄えを変えていくことから
始めていきます。
このテーマは、非常に細かくidやclassが割り振られているので、
CSSのみでも全く違う雰囲気のものができあるはず。
ちょっとした工夫で、サイトの量産も？
また、この割り振りと知っておくと、
後々テーマのコードを見たり、
いじったり、というときに役に立ちます。
まずは、Twenty Ten テーマの、大まかな
レイアウト構成を見てみます。
body
Twenty Ten では、ここに背景の色が設定されています。
管理画面で「背景」とあるのは、bodyに対する設定です。
wrapper
全体の囲みです。Twenty Ten では、
ここの背景に「白（#FFFFFF)」が設定されています。
header,masthead
サイトのヘッダー部分。
サイトのタイトル、メインビジュアル、
メニューなどが含まれます。
main
サイトのメインになる部分の囲みです。
container,content
一番メインになる、コンテンツ部分が入ります。
primary,secondary
ウィジェットが入る部分です。
Twenty Tenのデフォルトではサイドバーとして表示されていますが、
レイアウトを変える事が出来そうですね！
footer,colophon
サイトのフッター部分です。
フッターののウィジェットや、サイトの情報などが入ってます。
ありがたい設定
すごいなあ、と思ったのは
header＞masthead container＞content footer＞colophon
の部分。
ここは大きな囲みで、なにも入らずもう一つの囲み、
２重構造になってます。
これは、背景の設定など、ちょっと複雑なスタイルを組みたいと思ったときに
使えますよ！
「どんどん、デザインも変えていって下さい」、
という意気込みが感じられますね。
これから、wordpressを勉強する初心者です。
内容がすごく理解しやすく助かります。
kyamasan さん
ありがとうございます。
WordPressを楽しんで下さいね！
初めまして。
今回ブログを作るにあたって、こちらのブログを参考にさせていただいております。
今回２，３点気になる事があり質問させていただけたらと思います。
１．ヘッダー部分の「site-title」と「site-description」を消すには
２．フッダー部分の左に表示されるサイト名と右に表示される「～wordpress」を消すには
３．フッダー部分の左に表示されるサイト名を画像に変えるには
以上です。自分なりに調べたのですが、どうにも上手くいかず･･･アドバイスをいただけたらと思います。宜しくお願い致します。
LYU-YAさん
１．ヘッダー部分の「site-title」と「site-description」を消すには..
CSSのみで消すのなら、display:none; などで見えなくしてしまう方法があります。ただしhtmlにはそのまま残ります。
もうひとつの方法はテーマファイルを編集する方法で、header.phpを編集します。
＜div id=”branding” role=”banner”＞の下、60行目からはじまる ＜?php $heading_tag〜 66行目 ＜?php bloginfo( ‘description’ ); ?＞＜/div＞
までを削除します。
２．フッダー部分の左に表示されるサイト名と右に表示される「～wordpress」を消すには…
これも #site-generator をCSSで見えなくしてしまうか、footer.phpの div id=”site-generator 部分を削除します。
３．フッダー部分の左に表示されるサイト名を画像に変えるには..
#site-infoを画像置き換えを使って画像に変えるか、footer.phpの該当部分を画像（img）に書き換えます。
このような方法でできると思います。削除したりimgタグ入れたりした後はCSSも調整してくださいね。
また、header.phpやfooter.phpを編集するときは直接編集すると、
WordPressのアップグレードの時にテーマもアップグレードされて上書きされてしまうおそれがあるので、
子テーマを作るとよいと思います。
このような感じでいかがでしょう？
なるほど、助かりました！ありがとうございます！
すみません、あと一つだけ質問させて下さい。
「３」の補足になるような質問になってしまうのですが・・・
footer.phpを編集する場合、サイト名の部分を画像に変えてホームにリンクするようにしたい場合って、どのようにコードを入力すれば宜しいのでしょうか？
お忙しい中申し訳ありませんが宜しくお願い致します。
LYU-YA さん
footer.phpの25行目あたり、div id=”site-info” から始まる部分は
a href= 以降でもともとホームにリンクしています。
その下の ＜?php bloginfo( ‘name’ ); ?＞の部分がサイトのタイトルを出している部分です。
ですからその部分を画像のimgタグに置き換えてあげれば大丈夫です。
丁寧な対応感謝します。
おかげで上手くいきました！
本当にありがとうございました。
ピンバック: mairutoukou | 現原小学校
ピンバック: 全くのド素人がWordPressでサイトを構築するためにやったこと 完結編