【ミッキー様】HTML構造の確認の仕方 テーマのCSSカスタマイズ方法

WordPressテーマ Twenty Twelveのカスタマイズ方法、余白の調整方法などについてご相談頂きました。


WordpressのSEO対策ならRoot-013 Root-013ではWordPress・SEO対策・アフィリエイトなどサイト運営に関するご質問に無料でお答えしております。
WordPress 無料相談 アフィリエイト SEO 無料相談 無料!WPインストール代行・集客サポート

組み方について

先日はありがとうございました。もう一つ、組み方でどうしてもうまくいかず、恐れ入りますがご質問させてくださいませ。
WordPress テーマTwenty Twelve 記事のテンプレートをカスタマイズする方法

添付の画像の左が今の様子で、それを右のように仕上げたいのです。他のブログシステムの記述はもっとわかりやすかったりで出来ていたのですが、wordpressテーマtwentytwelveの組み方がどうなってるのかよくわからず、style.cssをいじってもどうしてもうまくいきません。

デフォルトの色や画像だけいじって、なんとか現在、左の状態まで持っていったのですが、ここから目指してるのが、

ヘッダー上部にあたる余計な部分をとりたい。
ヘッダー幅(現在950px)でコンテンツ幅(ボディ幅?)は下部まで揃えて、そのコンテンツ外の左右は別の背景画像(このサンプル絵では黒部分)に。

それから、各エントリータイトル部分とエントリー本文に少し隙間(茶色部分)を入れる。また、エントリータイトルのbackgroundは白のみにしたい(今はタイトル背景 白部分のフチにこの絵のように色がついてしまってますが、そのフチはなくしてエントリータイトル背景は白のみにしたい)。

各エントリー記事にもそれぞれ隙間を入れて、背景色(茶色部分)が出るようにしたい。

それとこれは書いてもわかりにくいかもしれませんが、各エントリー記事部分の最下部(カテゴリーや日付が表示されてる部分より下の部分)のエントリー背景になる黄色部分が下に伸びすぎていて、伸びすぎてるのを短くして切り上げる(切りあがった部分はこの画像の茶色の背景になる)

こんな風に組みたいのですが、cssをいじっても背景とボディがどんな風に区切られてるのかよくわからず、ヘッダー画像外上部の茶色にあたる部分を取ろうとしても出来ず、ヘッダーと同じ横幅950pxでのコンテンツ(ボディ?)左右の枠外にあたる部分だけを黒くしようとしても茶色のままにしておきたいコンテンツ部分まで黒くなったりでどうしてもうまくいきません。
すみません。どうかご教授いただければと思います。

余白の調整について

多くのご要望は余白の調整のようですね。

まず、レイアウトやデザインについては希望に近いものを探すという選択の方が労力は少ないです。ここにリソースを割くよりも、希望に近いテーマを探してはやくブログを書いた方がメリットが大きいでしょう。(アフィリエイトなら尚更です!)

twentytwelveなどのデフォルトテーマはそれほど機能が充実しているわけではありませんので、敢えてこのテーマをカスタマイズしていくよりも他に目的に合うテーマがあるのではないか・・・と老婆心ながら思ってしまいます。

※こだわったサイトには愛着も出ますので、否定するつもりはありませんし、今やっていることが悪いとは全く思いませんよ!

開発者ツールでHTMLの仕組みを確認しよう

CSSはテーマの組み方がどうなっているのかを理解してからの方がスムーズです。

現状のHTMLソース・レイアウトがどのようになっていて、どの部分にどれくらいCSSで余白が設けられているのか。

これには是非ブラウザの開発者ツールを使ってください。Google Chromeの場合はF12や右クリック>検証 で開発者ツールを出す事ができます。
開発者ツール

調べたい場所で右クリック>検証
検証
(カテゴリーアーカイブで記事タイトルを調べる場合)

又は、開発者ツールの矢印アイコンをクリックし、任意の要素をクリックでも同じです。
矢印アイコン

余白の確認

開発者ツールで要素を見てみます。
余白

<section id="primary" class="site-content">
  <div id="content" role="main">
    <header class="archive-header">
    <h1 class="archive-title">Category Archives:</h1>
    </header><!-- .archive-header -->
    <article id="" class="">
    記事タイトルや抜粋部分
    </article>

sectionタグ = 左コンテンツ
articleタグ = 各記事
Twenty Twelveではarticleタグの中に各記事のデータが入るようになっています。

そして、articleの要素にはそれぞれに余白が設定されているというわけですね。
構造

.site-content article {
    border-bottom: 4px double #ededed;
    margin-bottom: 72px;
    padding-bottom: 24px;
}

remという単位についてはややこしいので説明を省かせて頂きますが、この数字を変更・または別にCSSで上書きすることで調整することができます。
開発者ツールではCSSの部分をクリックして数値を書き込み、リアルタイムで見ることができます。
※追記した内容は別途CSSに追記する
CSS 追記

構造を理解すればこのような形にすることは難しくありません。正し、あくまでPC画面のみです。
レスポンシブサイトの場合はメディアクエリによって画面サイズが変更されると適用されるCSSが変わったりするので注意しましょう。
Twenty Twelve レイアウトカスタム見本

参考にして頂ければ幸いです。

おすすめコンテンツ

コメントをどうぞ

  1. 開発者ツールは簡単に開けるのですが、見方や使い方が私にはむずかしいです。何をどうすればいいのか全然わからないので、時間をかけて検証していきたいと思います。
    とりいそぎ、御礼申し上げます。

    1. >ミッキーさま
      コメントありがとうございます。
      時間はあるようなので、勉強されるという選択肢も有りだと思います。

      CSSはHTMLとセットなのでまずはその2つを覚える所からが良いかもしれませんね。
      僕はこちらのサイトのお世話になりました。
      http://www.htmq.com/
      用法まで数パターンまとめられているので役に立ちます。

      HTMLも余白の調整くらいならたくさんのタグを覚えることはありません。
      ・どのタグに、
      ・どんなIDやクラスが割り当てられていて、
      ・どんなCSSが効いているか
      が分かれば大丈夫です。

      <div id="hey">
        <p class="say">
          JUMP
        </p>
      </div>
      

      というHTMLなら、

      p.say {
        color:#F00;
      }
      

      でテキストが赤くなりますが

      .say {
        color:#F00;
      }
      p {
        color:#F00;
      }
      

      でも同じになりますし、

      .say {
        color:#F00;
      }
      #hay .say {
        color:#00F;
      }
      

      なら青になります。

      ID class 要素の優先順位などを勉強していけば、既存のCSSを直したり、上書きしたりすることができるようになるでしょう。

      コードの整合性に関する直接的なチェックやアドバイスは無料対応はできませんが、ご依頼頂ければ作業も可能ですし、別途無料サポートなどもあります。
      参考にして頂ければ幸いです。
      WordPressサイト・ブログなどインストール代行を無料で行います。HP集客サポートも条件付きで無料!

コメントを残す

メールアドレスが公開されることはありません。

コメントの前にご確認ください。

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 当ページによる一切の不利益および損害に関し、責任を取ることはできません。