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

    しげぞう様

    迅速なご返信、ありがとうございます。
    こちらこそ、いつもお世話になってばかりで頭があがりません。

    また質問すると思いますが
    その際は宜しくお願い致します。

  2. しげぞう より:

    りた様

    いつもありがとうございます。今回は説明文ですね。スタイルシート(CSS)に次のコードを追加すれば変更できるかと思います。

    h2.site-description {
        color: #000000;
    }

    一度試して上手く反映されない場合には再度コメント下さいませ。

  3. りた より:

    しげぞう様

    りたです。先日は連投していまい、申し訳ございませんでした。

    本日はブログ説明文について、ご質問させて下さい。
    ブログ説明文を黒文字にしたいのですが、どのようなコードを挿入したら良いのでしょうか?
    調べても中々見つからず、しげぞう様にお尋ねさせて頂きました。

    何卒、宜しくお願い致します。

  4. より:

    ご返答ありがとうございました。
    1,2,3解決致しました。 大体の使い方も分かり、慣れてきたところですので、質問の頻度は少しは減ると思います。(^^)

    また、なにかありましたら、よろしくお願いいたします。ありがとうございました。

  5. しげぞう より:

    >北様

    コメントありがとうございます。WordPressの外観⇒テーマの編集と進み、右側のサイドに色々なPHPファイルやスタイルシートなどが並んでいると思いますが、一番右上に「Twenty Twelve」のテーマを引き継ぎますというリンクがあります。このTwenty Twelveの部分をクリックするとTwenty Twelveのテーマファイルを見る事ができます。

    1.記事タイトルが表示されないのはおそらく記事タイトル部分のコードを間違って削除しているかもしれませんので、親テーマTwenty Twelveの「content.php」を確認して子テーマの「content.php」との違いを見てみるといいかも知れません。特にこの記述の部分を削除してないか確認します。

    <?php if ( is_single() ) : ?>
    			<h1 class="entry-title"><?php the_title(); ?></h1>
    			<?php else : ?>
    			<h1 class="entry-title">
    				<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
    			</h1>
    			<?php endif; // is_single() ?>

    もし「content.php」はほとんど変更していないのであれば子テーマの「content.php」の中身を削除して「親テーマ(Twenty Twelve)」の「content.php」をコピーして子テーマの「content.php」に貼り付ければ一応初期化できます。この方が早いかもしれません。

    2.プレビューや更新でエラーがでるのは色々原因が考えられます。一時的な場合もありますし、プラグインが悪さをしている場合もあるかと思います。一度プラグインを停止して確認してみるといいかも知れません。

    3.見出しの「左の青の線と広さ(高さ)」は次のコードで調整できます。

    .entry-content h2 {
      color: #000000;
      border-left: 5px solid #1F5E73;
      padding: 3px 15px;
      line-height: 2;
      font-size: 18px;
      margin-top: 30px;
      margin-bottom: 30px;
    }

    上下の余白を一番最後の「margin-top」と「margin-bottom」の数値で調整してみてください。

  6. より:

    すいません。あと1つお願いします。
    アフィリエイトの見本 で見たような気がするんですが、左の青の線、見出しの部分を2行、3行分に広くするにはどうするんですか?

  7. より:

    失礼いたします。
    これが分かれば、一区切り付きそうです。お願いいたします。
    1:記事タイトルが表示されません。アイキャッチ画像の設定で、アイキャッチ画像の上に持ってくる設定をした後からです。やらかしました。(・_・;) 記事途中に でやると表示されます。教えてもらった点線も表示されません。 また、何かがずれたでしょうか。

    2:引っ越しの途中で、記事、画像、リンクを張り替えているんですけど、書いた後にプレビューや更新をするとエラーになり、パーです。なにかがおかしいんでしょうか?

    まだ、困ったことがあると思いますが、最低限今はこのことで戸惑ってます。お時間があるときによろしくお願いいたします。

  8. より:

    しげぞう様 まとめてご回答ありがとうございます。
    なるほど、タイトル部分でもこんなにややこしくなとは思いませんでした。(笑)

    >3 そうなんですね。ってことは、見出し等の色、太さ、背景の変更時は、いちいち前のコードを探して書き換えではなくて、どんどん下に書いていってもいいんですね。でも、変更、変更ってやっていっても長くなって大変ですね。

    だんだん分かってきました。これからも、参考にさせていただきます。振り返り振り返りで猛勉強していきます。ありがとうございます。

  9. より:

    すいません。テーマ自体が違っていました。
    3つ目のみのご回答よろしくお願いいたします。

  10. しげぞう より:

    >北様

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

    1.タイトル下の下線

    これは多分ブログのタイトルではなく、「記事のタイトル」だと思いますのでスタイルシートの一番下に次のコードを入れて下さい。

    #content .entry-title {
      border-bottom: none;
    }

    2.キャッチフレーズ(説明文)の文字の大きさ

    このキャッチフレーズの文字の大きさは次のコードを追加して調整できます。これもスタイルシートの一番下に追加です。

    .site-description {
      font-size: 14px;  /* 文字の大きさ */
      color: #000000;   /* 文字の色 */
    }

    3.スタイルシートの順番

    スタイルシートは下(後)に書いた物が優先的に反映されます。そのため、同じ記述があれば下(後)に書いた方が優先されるようになってます。例えばブログの文字の大きさを変更する場合にはまず「全体」の文字の大きさをスタイルシートで一度設定し、後から「細かい部分(サイドバーとかフッターとか)」の文字の大きさを変更するというような感じです。なので先に全体を決めて後から細かい部分の修正をしていくとスムーズに行くと思います。

    4.サイドバーが記事下に行ってしまった

    これは複数の原因が考えられます。例えばコンテンツの周りに線を入れた(その線の太さの影響で横幅に入りきれない)というような場合もありますし、単純にサイトの横幅を変更する時に計算を間違えているというような事もありますし、コンテンツに対して余白を設定したりして、横幅のサイズをオーバーするというような事もあります。

    そのため、最近追加したスタイルシートで原因になりそうな物を探し、一度削除すると元に戻ると思います。もし原因がわからない場合には一度URLを教えて頂けると助かります。どうぞよろしくお願い致します。

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