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. poko より:

    >hero様

    再度コメントありがとうございます。hero様の言われるように優先順位の問題かも知れないですね。まずCSSの基本としては後から書いた物が優先されますので、追加するコードはCSSの一番下に追加してみて下さい。それでも変わらないのであれば優先するimportantというタグを入れて試してみて下さい。

    .site-header h1 a {color:#000000 !important;}

    変更する色の後ろに「!important;」を書いてみて試してみると変更が反映されるかも知れません。

  2. hero より:

    ×ブログタイトル色
    ○記事タイトル文字色

    でした。

  3. hero より:

    おはようございます。昨日書き込みしたheroと申します。
    タイトル文字色が反映されない件、あれからいろいろ試してみたのですが、
    どうもスタイルシートに書きこむ順番などで、反映のされ方が変わってくることに気がつきました。
    今現在、タイトル文字色は反映しました!
    しかし、今度はブログタイトル色が変わってくれなくなりました。(文字の大きさだけは反映されています)
    いろいろと書きこむ順番を入れ替えてみたりしていますが、今のところブログタイトル文字色は反映されていません。また、ネットで検索したところ、cssには優先順位というものがあるそうで、そのあたりもなにか関係があるのではないでしょうか。(初心者の私にはよくわかりませんでした)
    以上、こちらも試行錯誤状態のため、説明がわかりづらくて申し訳ありません。皆さんにとっても何かのヒントになればと思いまして投稿いたしました。

  4. hero より:

    はじめまして。昨日から見させていただいています。
    大変わかりやすい説明で、Wordpress初心者の私も助かっています。

    私も、ハル様と全く同じ症状でして、ブログタイトル文字の色が全く変わってくれません。
    ブラウザのキャッシュをクリアしてみたり、プラグインも全て無効化→有効化してから更新をしましたが、変化がありません。原因がまったくわからないですね。解決策が見つかるのをお待ちしています。

  5. poko より:

    >ハル様

    コメントありがとうございます。ウィジェットのタイトルのコードを他のブログでも試してみましたが反映されたのでコード自体が間違っているわけではなさそうです。後考えられるとするならば次の2点を確認してみて下さい。

    1.キャッシュ系のプラグイン
    キャッシュ系のプラグインが悪さをしている可能性がありますので、一度キャッシュ系のプラグインを停止してみてからリロード(F5)をしてみて下さい。

    2.サイドコードを貼り付け
    お手数ですが、一度ウィジェットカスタマイズのコードを削除して再度コードを貼り付けてリロードしてみて下さい。

    私の場合もよくキャッシュ系のプラグインの影響で上手く反映されない事があります。キャッシュ系のプラグインは表示速度を上げるために役立ちますが、このように時々変
    更が反映されない場合がありますので、定期的に貯まったキャッシュを削除したり一度停止してみると解決する事がありますので、試してみて下さい。

    また反映されない場合はいつでもコメント下さい。私ももう少し調べてみたいと思います。

  6. ハル より:

    初めまして、管理人さん。
    自分のブログ全般をカスタマイズさせて頂きました。
    お陰様でまとまりのある見栄えに出来て満足しています。

    1つ分からないことがあったので、
    こちらで質問していいのか分かりませんが、
    お聞きしてもよろしいでしょうか。

    こちらのページに書かれているTwentyTwelveのウィジェットの
    タイトル部分のカスタマイズをしてみたのですが、
    背景色と文字色が変わらずブログに反映されませんでした。

    ウィジェットの書き換えだけは、
    スタイルシートから独立した仕様になっている
    ということはないですよね…。

    更新ボタンを押したときに、一瞬カスタマイズされた背景色が
    映ったので、スタイルシートの書き換えは完了しているのですが、
    本ブログに反映されなかったので、どう対処したらいいのかを
    お尋ねさせて頂きました。

    ご迷惑でなく原因がわかるのであれば、ご意見頂けますか?
    お手数お掛けして申し訳ありません。

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