TwentyTwelveタイトル全般のカスタマイズ

TwentyTwelveタイトル全般のカスタマイズWordPressブログ

今回はサイトのタイトル、記事タイトル、サイドバーのタイトル等、タイトル関連のカスタマイズをしていきます。タイトル関連部分でできるカスタマイズとしては文字の大きさや色を変更したり、背景部分に画像を使う事もできます。まずは基本的な部分からやっていきましょう。

サイトタイトルの文字の色や大きさを変更する

今回もTwentyTwelveの子テーマで作成したスタイルシート (style.css)を使います。まずはサイトタイトルの文字色や大きさを変更してみましょう。私のブログの場合はこの部分になります。

タイトル-1

この部分のコードを見てみます。

/* ブログタイトル部分 */
.site-header h1 {
font-size: 28px; /* 文字の大きさ */
line-height: 1.846153846; /* タイトル部分の高さ */
background-color: #fff; /* 背景に色を使う場合に記入 */
}

ここの数字を変更する事でタイトル部分の文字の大きさと高さを調整する事ができます。また背景に色を付けたい場合はbackground-color:の部分に好きなカラーコードを入れて下さいね。タイトル部分の文字色ですが、これを変更する場合は次の記述をしてみて下さい。

/* ブログタイトルの色 */
.site-header h1 a {color:#000000;} /* タイトルの色 */
.site-header h1 a:hover {
color: #7a8285;} /* カーソルが乗った時の色 */

記事タイトル部分のカスタマイズ

記事タイトル部分も容量はほとんど一緒で場所の名前が違うだけです。

/* 記事タイトル */
.entry-header .entry-title {
font-size: 20px; /* 文字の大きさ */
line-height: 1.6; /* 行間の高さ */
padding-left: 10px; /* ちょっと左に余白 */
}
.entry-header .entry-title a {
color: #000000;/* 文字の色 */
}

サイドバー(ウィジェット)のタイトル部分を変更

ここもほとんど同じです。私の場合のカスタマイズをそのまま載せておきますので、好きな部分を変更して使って下さい。私の場合はこのように表示されてます。

タイトル-2

/* ウィジェットタイトル部分 */
.widget-area .widget h3  {
text-align:center;  /* タイトルの中央寄せ */
line-height: 20px; /* 高さ */
font-size: 15px; /* 文字の大きさ */
color: #fff; /* 文字色 */
background-color: #1F5E73; /* 背景色 */
border-radius: 3px; /* 角に丸みをつける */
padding: 2px 10px; /* 左と上下に余白 */
}

タイトルの背景に画像を使う場合

タイトルの背景に色ではなくて画像を使う事もできます。画像を使う場合には事前に使う画像をアップしておき、画像のファイルのURLをコピーしておく必要があります。WordPressの管理画面から「メディア」⇒「新規追加」をクリックして「ファイルを選択」してアップロードしておきます。それでアップロードした画像の編集をクリックして下さい。

タイトル-3

すると右側に画像ファイルのURLがあるのでこれをコピーしておきます。

タイトル-4

コピーしたらこの画像のURLを記事タイトルとかサイドバーのタイトルに追加する事になります。その場合はこのようなコードを追加して下さい。

background-image:
url(http://アップロードしておいた画像URL);
background-repeat:repeat;

これを先ほどカスタマイズしたそれぞれのタイトル部分に追加してください。

  • サイトタイトルに使う場合は.site-header h1 に追加。
  • 記事タイトルに使う場合は.entry-header .entry-titleに追加。
  • サイドバータイトルに使う場合は.widget-area .widget h3に追加。

基本的な部分ですが、さらに応用編もありますので次の記事を読んでみて下さい。カスタマイズの幅が広がります。

見出しの先頭にランキング用などのアイコンを表示させる方法

以上WordPressのTwentyTwelveタイトル全般のカスタマイズでした。

コメント

  1. しげぞう より:

    北様

    返信ありがとうございます。なるほどサイドバーのタイトルの色だったんですね。これを1つ1つ色変更するのはちょっと難しいかもしれません。できない事はないのですが、その場合には「sidebar.php」に1つ1つサイドバーのコンテンツを作っていくような作業が必要かと思います。

    現在は「functions.php」でサイドバーを呼び出すような感じで、管理画面の「外観」⇒「ウェイジェット」で設定した物が反映されるような仕組みになってます。それぞれのタイトル部分の色を変更する場合にはこれを使わずに「sidebar.php」に直接1つ1つコンテンツを作り、タイトル部分にそれぞれ自分でクラス名を付ける必要があるかと思います。

    なので、変更できない事はないと思いますが、サイドバーのコンテンツが増える度に編集したり、内容も自分で追加していかないといけないので、結構大変かと思います。そのサイドバーの作り方は私もやった事がないので、ちょっと自信はないです。すみません。

  2. より:

    しげぞう様

    すいません。説明不足でございました。
    ウィジェットタイトル部分の色をそれぞれ変えれるのかな? という質問です。

    しげぞう様のを例にすると、「サイト内検索」「カテゴリー」「最近の投稿」の青い部分です。
    ご迷惑をおかけしました。毎度ご丁寧にありがとうございます。よろしくお願いいたします。

  3. しげぞう より:

    北様

    返信ありがとうございます。サイドバーのそれぞれの部分の背景色は変更できてますが、これとは違うのでしょうか?私はこれだと思ってました。もしかするとサイドバーのそれぞれのコンテンツに違う色の枠線を付けるという事でしょうか?ちょっと内容が分からないので、お手数ですが再度コメント頂けると助かります。よろしくお願い致します。

  4. より:

    しげぞう様ご回答ありがとうございます。
    一応、教えてもらったコードで試しましたが、やはり項目部分が変わってしまします。
    下記サイトで一応、画像を張っておきましたので、ご確認お願いします。

  5. しげぞう より:

    北様

    返信ありがとうございます。上手くできたようで良かったです。ウィジェットそれぞれの背景色ですが、次のコードをスタイルシートに追加してみてください。

    /* スポンサーリンク */
    aside#text-4 {
        background-color: #fff;
    }
    
    /* 検索 */
    aside#search-2 {
        background-color: #fff;
    }
    
    /* 最近の記事 */
    aside#recent-posts-2 {
        background-color: #fff;
    }
    
    /* カテゴリー */
    aside#categories-2 {
        background-color: #fff;
    }

    もし上手く反映されない場合にはカラーコードの後ろに「!important」を付けて試して下さい。こんな感じです。

    /* 最近の記事 */
    aside#recent-posts-2 {
        background-color: #fff !important;
    }

    もしこれでサイドバーのタイトルまで変わってしまうのであればサイドバータイトルの装飾コードの方に「!important」を付ける必要があるかもしれませんが、一度「!important」無しで試してそれで反映されたらOKです。

    一応リロードしてから確認して下さい。

  6. より:

    しげぞう様

    ご回答ありがとうございます。4ですが、サイドバーでなくても、記事一覧(サイトマップ)にもつけれるんですね。参考にさせていただき、できました。

    ウィジェットのことですが、変更されませんでした。一度やってみたんですが、文字部分に色が入ってしまいまして。自分でできるって言ってたんですけど、すいません、お願いします。

  7. しげぞう より:

    北様

    返信ありがとうございます。まず背景ですが、調べたクラス名が「●●」とした場合には次のようにスタイルシートに追加できます。

    .●● {
      background-color:#■■■;
    }

    ●●にはクラス名を入れて下さい。クラス名の直前の「.」も忘れないようにしてスタイルシートに追加してみてください。

    それから画像付きのリンクですが、先ほど回答した記事の後半部分に「サムネイル付き」のリンクがあると思いますが、これとは違うのでしょうか?

  8. より:

    しげぞう様詳しくありがとうございます。

    1:こちらは、「要素を検証」でid=”○○○○” class=”○○○○”> という部分でOKですよね。このことは分かりましたので、色の変更の仕方を教えてもらえれば自分でできると思います。

    2:これも解決致しました。なにかで#333か#666位になってたと思います。
    3:こちらも無事消すことができました。良かったです。
    4:こちらについてですが、誤解を招いていたようです。失礼いたします。もう一度質問しなおします。
      ⇒こちらのブログのサイトマップに記事一覧がズラリとリンク付きでありますよね。そのリンクに画像もつけたいなと思っていまして。

    2度目になってしまいますが、1と4 再度ご回答よろしくお願いいたします。すいません。

  9. しげぞう より:

    北様

    コメントありがとうございます。1つ1つ回答してみますね。

    1.サイドバーのウィジェットの背景について

    これはサイドバーの各項目で背景を変更する事は可能だと思います。ただ、それぞれのクラス名もしくはID名を調べる必要があります。

    ブログ表示させてサイドバーの各項目などにカーソルを合わせて右クリックし、「要素を見る(調べる)」をクリックするとその部分の要素を調べる事ができます。その中からサイドバーの各コンテンツを含む部分のクラス名もしくはId名を調べてCSSで変更できます。これはサイトや使っているウィジェットによって違いますので、もし分からない場合にはURLを教えて頂けると検証できると思います。

    これは私もやったことがないのですが、可能だと思います。

    2.キャッチフレーズの文字について

    キャッチフレーズ(説明文)はスタイルシートに次のコードを入れると変更できます。Twenty Twelveの場合のサンプルです。

    h2.site-description {
        color: #000;  /* 文字の色 */
        font-size: 15px;  /* 文字の大きさ */
        margin-top: 5px;  /* 上に余白 */
        margin-bottom: 5px;  /* 下に余白 */
    }

    3.画像の影を削除する

    これもスタイルシートに次のコードを追加すれば削除できると思います。

    .entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {
        box-shadow: none;
    }

    4.サイドバーに記事一覧

    サイドバーに画像付きの記事一覧を作る事は可能です。こちらの記事が参考になるかと思います。
    http://dokidome.com/wp-customize/921/

    またできない部分があればお手数ですが再度コメントを頂けると助かります。

  10. より:

    4つほど質問があります。いつもまとめてたくさん質問してしまい、すみません。

    ・サイドバーのウィジェット部分の背景色は、一色にしかできませんか?
     ⇒例えば、A、B、C、Dがあれば、ABは青に。BDは緑に。など。
    ・ブログタイトル下のキャッチフレーズの文字が薄すぎで、濃くしたいんですがいい情報が見つけれません。どうすればいいでしょうか?太さは丁度いいんですが。
    ・Twenty Twelveは初期状態で画像に黒い枠線?影が出るようですが、これを消す方法はありますか?
    ・「http://dokidome.com/wp-customize/933/」こちらを参考にサイトマップを作っているんですが、これに「サイドバーに記事一覧の自作」を設置した際の?100×100の画像をつけれますか?

    お時間をとるようになってしまうと思うんですが、毎回参考にさせていただいております。よろしくお願いいたします。

タイトルとURLをコピーしました