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

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

スポンサーリンク

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

今回も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.2; /* 高さ */
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に追加。

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

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

TwentyTwelveタイトル全般のカスタマイズ”に65件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    サマー様

    返信ありがとうございます。

    続きを読むのリンクの色は以下を追加してみて下さい。

    .entry-summary a {
        color: #0066cc;
    }
    

    ナビメニューとかタイトル部分とかは書かれているCSSが反映されてますので問題なさそうです。

    もし反映されていない部分があるのであればどの部分がどのように変更できていないのか?教えて下さい。

  2. サマー

    しげぞうさま

    早速のお返事をありがとうございます!
    です。宜しくお願いします。

  3. しげぞう 投稿作成者

    サマー様

    返信ありがとうございます。教えてもらったURLが開けませんでした。一時的なエラーかもしれませんが、もう一度URL教えてもらえると助かります。

  4. サマー

    しげぞうさま

    「続きを読む」の文字の変更は、アドバイス通りにしたところ、無事に変更ができました。ありがとうございました!

    また、スタイルシートでのカスタマイズで動けなくなってしまいました。。
    「続きを読む」の文字の色やブログのサブタイトルの文字の大きさや、メニューバーのカスタマイズなど、何も変わりません。。
    文字や記号が抜けてないか確認してみたのですがよくわからなくて、一度見ていただけますか??
    twenty twelveを使っています。
    宜しくお願いします!

  5. サマー

    しげぞうさま

    先ほど質問をさせてもらったのですが、初めからもう一回やり直して見たら、変更ができていました!!すみません!!

    続きを読む、だけ変えたいです。笑

    ありがとうございます!!

  6. もちがき

    しげぞうさんへ
    スマホのページ画面を何回かリロードしているうちに、タイトル下の間隔がなくなっていました。(しげぞうさんからのCSSでバッチリでした。ありがとうございました。)
    確認がシッカリできていなくて誠に申し訳ございません。(> <);

  7. しげぞう 投稿作成者

    もちがき様

    返信ありがとうございます。

    スマホのブログタイトルと記事タイトルの件ですが、一度下記コードをCSSに追加してみて下さい。スマホページのみ余白が小さくなるかと思います。

    @media screen and (max-width:599px){
    .site-content {
        margin: 0;
    }
    }

    もし上手く行かないの場合は実際に見てチェックしたいので、もし良かったらブログのURLも教えて下さい。もちろんコメント公開時にはURLは削除しますので、よろしくお願いします。

    それからスマホ用のパンくずですが、スマホだけ表示しないっていうのはOKです。実際に私も幾つかのサイトでスマホページのパンくず消してます。邪魔なので。ただ、今後は検索エンジンでモバイルファーストインデックスなどスマホページを重要視する形になるようですので、スマホだけパンくずがないって事がどのように影響するかは分かりません。多分そんなに影響はないと思いますが。。。そのうち順位が下がったりしたら1つ実験してみようかなと思っている事1つです。

  8. もちがき

    しげぞうさん
    いつもお世話になりありがとうございます。
    そして、前回は質問への回答ありがとうございました。
    早速で申し訳ないのですが、今回の質問はスマホのブログタイトルと記事タイトル(もしくはカテゴリータイトル)の間の余白を小さくする方法かなくす教えてほしいです。PC用のページは上手く表示できています。
    それともう一点なのですが、スマホ用のパンくずリストは各々のphpファイルのパンクズリストをスマホとPCの条件分岐でスマホだけ表示しないようにしていますが、別にこれでもかまわないでしょうか?
    しげぞうさんを目指してがんばりたいと思っています。以上、よろしくお願い申し上げます。

  9. しげぞう 投稿作成者

    naminami様

    コメントありがとうございます。なるほどそうだったんですね!違うテーマにする場合は子テーマchildのスタイルシートの一番最初の部分を書き換えます。インポートする親テーマ名を書き直し。それからスタイルシート以外にも子テーマにsingle.phpやcontent.phpなど他のファイルも作成しているならそれらは新しい親テーマの内容をコピペする必要があります。

    ちょっとややこしいと思うなら子テーマ内のスタイルシートやphpファイルを一度削除して再度作り直してもOKです。

  10. naminami

    しげぞうさま

    謎が解けた気がします!
    テーマを表示して、いくつかの他のライブプレビューを
    見てみたら、わたしの使用しているTwentyElevenが、
    そもそも、記事をひとつ表示しているときは、横の
    カテゴリーとかが表示されないタイプのようです。No---!

    もうすでにいくつか記事を投稿しているのですが、
    たとえば違う親テーマを使って、子テーマを作り直したい場合、
    どこからやり直しすればいいのでしょうか・・・。

  11. しげぞう 投稿作成者

    naminami様

    コメントありがとうございます。反映されていたようで良かったです。個別記事のサイドバーの部分なんですが、これ子テーマのコピペミスかもしれませんので、親テーマのsingle.phpを再度コピーして子テーマのsingle.phpに貼り付けをしてみて下さい。要は親テーマのsingle.phpと全く同じになるように再度コピペしてみて下さい。

    もしくは子テーマの方のsingle.phpを一度削除して確認してもOKです。その場合は親テーマのsingle.phpが反映されるはずなので。

  12. naminami

    しげぞうさん!

    それがね、なんだかちゃんと記事タイトルの色が、
    今日見たら、ちゃんと変わってたのです。
    なぜでしょうか・・・。ごめんなさい。

    あともう一つ、新たに聞きたいことがあります。

    ひとつひとつの記事を開いてみると、横のカテゴリーとかが
    まったく表示されてないんです。
    表紙というか、ホームというか、そこにしか
    右のサイドバー?が表示されないのは、テーマが
    そういうデザインなのか?と、わからない感じです。
    できれば、個別の記事の横にも、カテゴリーとか
    表示させたいなぁと思います。教えてください。

  13. しげぞう 投稿作成者

    naminami様

    コメントありがとうございます。この辺の書き方というか場所ごとの名前はテーマによって違ってきますので、間違っているかどうかは実際に確認が必要になります。なのでもしよかったらサイトのURL教えて下さい。コメント公開時にはURLは削除しますのでよろしくお願いします(^^)

  14. naminami

    しげぞうさん!こんばんは。

    ちょっとわからなくなったので、コメントにて質問させていただきます。

    記事タイトルの色を変更したくて、上記の方法で、やってみたのですが、
    トップページ?の色しか変わらず、
    個別で開いた記事タイトルはそのまま、黒のままなのです。
    ちょっとネットで検索して、以下のコードを
    styleシートに貼り付けてみましたが、変更できません。

    /* Singular content styles for Posts and Pages */
    .singular .entry-title {
    color: #ffb6c1;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5em;
    }

    間違ってますか?

  15. よしよし

    しげぞう様。
    返信ありがとうございます。

    独自SSLについては詳しく分かっていない状態で質問してしまい申し訳ございません。
    私のような訪問数の少ない個人ブログでは必要ないようですね。
    ありがとうございました。

    やはりコンテンツが一番なんですね。
    なかなか訪問数が増えなくて何かに頼ろうとしていました。
    「これはSEOにも強い」などよく見かけるので、そんなに違うものなのかと気になってしまって…
    しげぞう様が仰るとおり、良いコンテンツを書いていけるように頑張ります。
    Twenty Twelveのサイトはここのサイトを見ながら一から作ったので、とても思い入れがありこれからも大事にしていきたいと思います。

    暑い日が続きますのでしげぞう様もお体には気をつけて頑張ってください。