Twenty Ten テーマの構成(レイアウト)-1

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
の部分。
ここは大きな囲みで、なにも入らずもう一つの囲み、
2重構造になってます。
これは、背景の設定など、ちょっと複雑なスタイルを組みたいと思ったときに
使えますよ!
「どんどん、デザインも変えていって下さい」、
という意気込みが感じられますね。

Twenty Ten テーマの構成(レイアウト)-1」への10件のフィードバック

  1. LYU-YA

    初めまして。
    今回ブログを作るにあたって、こちらのブログを参考にさせていただいております。

    今回2,3点気になる事があり質問させていただけたらと思います。

    1.ヘッダー部分の「site-title」と「site-description」を消すには

    2.フッダー部分の左に表示されるサイト名と右に表示される「~wordpress」を消すには

    3.フッダー部分の左に表示されるサイト名を画像に変えるには

    以上です。自分なりに調べたのですが、どうにも上手くいかず・・・アドバイスをいただけたらと思います。宜しくお願い致します。

    返信
    1. webourgeon 投稿作成者

      LYU-YAさん

      1.ヘッダー部分の「site-title」と「site-description」を消すには..
       CSSのみで消すのなら、display:none;  などで見えなくしてしまう方法があります。ただしhtmlにはそのまま残ります。
       もうひとつの方法はテーマファイルを編集する方法で、header.phpを編集します。
       <div id=”branding” role=”banner”>の下、60行目からはじまる <?php $heading_tag〜 66行目 <?php bloginfo( ‘description’ ); ?></div>
       までを削除します。
       
      2.フッダー部分の左に表示されるサイト名と右に表示される「~wordpress」を消すには…
       これも #site-generator をCSSで見えなくしてしまうか、footer.phpの div id=”site-generator 部分を削除します。

      3.フッダー部分の左に表示されるサイト名を画像に変えるには..
      #site-infoを画像置き換えを使って画像に変えるか、footer.phpの該当部分を画像(img)に書き換えます。

      このような方法でできると思います。削除したりimgタグ入れたりした後はCSSも調整してくださいね。

      また、header.phpやfooter.phpを編集するときは直接編集すると、
      WordPressのアップグレードの時にテーマもアップグレードされて上書きされてしまうおそれがあるので、
      子テーマを作るとよいと思います。

      このような感じでいかがでしょう?

      返信
  2. LYU-YA

    すみません、あと一つだけ質問させて下さい。

    「3」の補足になるような質問になってしまうのですが・・・

    footer.phpを編集する場合、サイト名の部分を画像に変えてホームにリンクするようにしたい場合って、どのようにコードを入力すれば宜しいのでしょうか?

    お忙しい中申し訳ありませんが宜しくお願い致します。

    返信
  3. webourgeon 投稿作成者

    LYU-YA さん

    footer.phpの25行目あたり、div id=”site-info” から始まる部分は
    a href= 以降でもともとホームにリンクしています。

    その下の <?php bloginfo( ‘name’ ); ?>の部分がサイトのタイトルを出している部分です。

    ですからその部分を画像のimgタグに置き換えてあげれば大丈夫です。

    返信
    1. LYU-YA

      丁寧な対応感謝します。
      おかげで上手くいきました!
      本当にありがとうございました。

      返信
  4. ピンバック: mairutoukou | 現原小学校

  5. ピンバック: 全くのド素人がWordPressでサイトを構築するためにやったこと 完結編

コメントをどうぞ♪