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

51 comments

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

スポンサーリンク
スマートフォン買取

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

今回も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; /* 左と上下に余白 */
}

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

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

タイトル-3

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

タイトル-4

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

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

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

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

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

おすすめのASP

⇒もしもアフィリエイトの登録や使い方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

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

広告
【無料】キーワード選定に特化した無料教材＆動画「キーワード無双」
広告
【期間限定無料】一億円ブロガーの電子書籍「自由な人生を手に入れる教科書」

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

アフィリエイトで稼ぐ方法を全部話そうと思う

関連記事

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

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

  1. よしよし

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

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

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

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

  2. しげぞう 投稿作成者

    よしよし様

    コメントありがとうございます。独自SSLですが、これは私もまだです。というのも、まだアフィリエイトリンク自体がSSLに対応していないためです。現在大手のASPなどは一部SSLのリンクに対応してくれていますが、まだ完全に全てのアフィリエイトリンクがSSL化されているわけではありませんので、これが全て対応されてから考えます。

    SSL化に関しては検索順位にも良い影響があるという事ですが、実際の所あまり大きな変化を産むような変化は期待できないと思ってます。あくまで個人的な意見ですが。もちろん訪問してくれるユーザーにとっては安心感があるため、将来的には必要になる項目かもしれませんね。

    という訳で、アフィリエイト用のブログであれば設置したい広告全てがSSL化されているのか？という部分を調べてから検討しても良いと思います。

    それからテンプレートの件ですが、私自身は手持ちのサイトの全てがTwenty Twelveです。他のテーマを使っていた時期もあったのですが、慣れているのでカスタマイズしやすいですし、SEO対策的な部分も自分で何とかなると思ってます。

    また、テンプレートに頼るのではなく、一番効果的なのはやはりコンテンツだと思ってますので、コンテンツを重視して後はサイトの構成、カテゴリー分けなど細かい部分も少しずつ改善できたらいいなと思ってます。

    例外として、シリウスだけは時々使ってます。これは記事数の多くないミニブログを作成する時に使っていて、完成したら放置するサイトの時だけシリウスという感じです。WordPressのように定期的な更新（WordPressやプラグインの更新）などちょっと面倒なので、作って放置するミニブログだけシリウス使ってます。

    ちなみにテンプレートの変更をするとHTMLが変わりますし、内部リンクなども変わります。その結果検索順位が良くなる記事もありますし、悪くなる記事もあります。なので、私の場合は順位が上がってからテンプレートを変更するような事は避けています。テンプレートを途中で変えるなら早めに変更してそれを続ける方が良いと思います。これも個人的な意見ですが。

  3. よしよし

    しげぞう様。
    いつも大変お世話になっております。

    高速化の返信へのお礼が遅れて申し訳ございません。
    お陰様で高速化は少し改善されました。ありがとうございます。

    エックスサーバーで独自SSLの無料をやっていますが、自分は無料になる前に契約しましたので独自SSLを利用しておりません。
    セキュリティー的に有料でも「オプション独自SSL」に申し込みした方が良いでしょうか？
    独自SSLがいまいちよく分かっていませんが、アドバイスいただけると助かります。

    しげぞう様はいくつかサイトをお持ちだと思いますが、SEO的に強いテンプレートでおすすめはありますか？
    今はTwentyTwelveですが、新しいブログをスティンガーやシリウスなどいろいろあるので迷っています。
    やはり有料のものはSEO的に強いのでしょうか？
    宜しくお願い致します。

  4. しげぞう 投稿作成者

    よしよし様

    返信ありがとうございます。高速化ために入れているプラグインはよしよし様が挙げてくれた５つを利用してます。あ、もう１つ画像の遅延読み込みのためのプラグイン「Unveil Lazy Load」も入れてます。この「Unveil Lazy Load」は有効化するだけでOKで、表示範囲より下にある画像の読み込みを遅延させて表示スピードを上げるプラグインになります。

    キャッシュ関連はプラグインと「.htaccess」のファイルで高速化ができるので結構改善はできるかと思います。

    高速化の記事はちょっと難しい部分が多いですが、また何か分からない部分があればいつでもコメント下さい。

  5. よしよし

    いつもお世話になっております。

    高速化の記事がこんなにたくさんあったのですね！
    分かりやすくて素晴らしいです！
    だいぶ前ブログを作った頃に見ていたので忘れておりました。
    WP Super Cacheの対処方法などとても細かく書いてくださっていて、本当に感謝します。
    （エラーが出てしまって怖くてずっと使っておりませんでしたので）

    記事を読みながら高速化を実行していこうと思いますが、しげぞうさんが使用されているプラグインはこの５個で宜しいでしょうか？

    EWWW Image Optimizer
    WP Super Cache
    DB Cache Reloaded Fix
    001 Prime Strategy Translate Accelerator
    Autoptimize

    もし変更などがありましたら教えていただけると助かります。
    宜しくお願い致します。

  6. しげぞう 投稿作成者

    よしよし様

    コメントありがとうございます！pageSpeed Insight」の件ですが、WordPressの高速化の記事で書いてますので、一度そちらを読んで見て下さい。１つ１つ解決できるかと思います。プラグインで対応できる物やファイルの修正で対応できます。もし読んでみて分からない部分があればいつでもコメント下さい。
    ⇒WordPress高速化まとめページ

  7. よしよし

    いつもご丁寧にありがとうございます。

    分かれば教えていただきたいのですが『PageSpeed Insights』で速度を計ってみたのですがかなり遅いです。
    改善したいのですが、
    ・レンダリングを妨げる JavaScript を削除する
    ・CSS の配信を最適化する
    ・ブラウザのキャッシュを活用する
    という方法を調べていますが難しくて分からず困っています。
    テーマはしげぞうさんと同じくTwenty Twelveです。
    もし分かれば宜しくお願い致すます。

    今後ブログを増やして本格的にアフィリエイトをしようかと思っています。
    しげぞうさんの記事を参考にしてもう少し考えてみます。

  8. しげぞう 投稿作成者

    よしよし様

    返信ありがとうございます。通常リンクの色のスタイルは3種類あって、「通常のリンクの色」「カーソルが乗った時の色」それから「訪問済みの色」の設定ができます。

    前回の返信で「通常のリンクの色」と「カーソルが乗った時の色」の設定をしたので、もう１つ「訪問済みの色」を設定してみると良いかもしれません。

    span.nav-previous a:visited {
    color: #000;
}

    これが訪問済みの色のコードなので、カラーの数値を変えて試して見て下さい。

    もしそれでも反映されない場合には元々のスタイル（リンクの色）の方が優先的に反映されるようになっている可能性があるので、以下のように「!important」を追加して見て試してみて下さい（反映されない部分に）。

    span.nav-previous a:visited {
    color: #000 !important;
}

    !importantが付いた物が優先されるはずですので、これで反映されるはずなんですが、これでもダメなら記述的にミスがあるかもしれませんので、もし良かったらURLを教えて下さい。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。

  9. よしよし

    いつもお世話になっております。
    前回の３つの質問に詳しく説明していただきましてありがとうございます。

    １．続きを読むの文字色
    無事に変更できました。

    ３．カテゴリー表示
    これはどうしてか変更できませんが、もう少し落ち着いてからまたチャレンジしてみようと思います。

    ２．記事下の過去記事と新しい記事のリンク
    これは過去の記事（左）は変更できますが新しい記事（右）は変更ができませんでした…
    何か記述不足がありますでしょうか？
    すみませんが宜しくお願い致します。

  10. しげぞう 投稿作成者

    よしよし様

    返信ありがとうございます。質問は全部で３つかな？と思いますので１つ１つ試してみましょうか。

    １．続きを読むの文字色

    このブログで解説したカスタマイズで続きを読むを設置している場合ですが、以下のコードをスタイルシートに入れたらOKかと思います。カラーは好きな数値に変更して下さい。

    /* 続きを読むリンクの色 */
.entry-summary a {
    color: #000;
}

/* 続きを読むカーソルが乗った時の色 */
.entry-summary a:hover {
    color: #0066cc;
}

    ２．記事下の過去記事と新しい記事のリンク

    これもスタイルシートに以下のコードを追加でOKと思います。カラーの数値は変更してみてください。

    /* 記事下のリンクの色 */
span.nav-previous a {
    color: #000;
}

/* 記事下のリンクカーソルが乗った時の色 */
span.nav-previous a:hover {
    color: #0066cc;
}

    ３．カテゴリー表示

    最後にカテゴリーの表示ですが、私の「content.php」はこんな感じになってます。footer class=”entry-meta”の部分の中身を全部削除して次のようにしてます。

    <footer class="entry-meta">

<?php if ( is_single() ) : ?>
<p>カテゴリー : <?php the_category( ' | ' ); ?></p>	
<?php endif; ?>	

		</footer><!-- .entry-meta -->

    以上３つですが、上手く反映されない場合にはURLも教えて頂けると助かります。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。

  11. よしよし

    いつもお世話になっております。
    パンくずの文字の大きさや文字の色の変更は無事にできました。
    いつも丁寧に説明していただき、ありがとうございます。

    もう１ヶ所文字の変更をしたいのですが、このブログを参考にトップページやアーカイブページで抜粋記事にしておりまして、その「続きを読む」の文字です。
    あと記事を表示した時に記事下に表示される、過去の記事と新しい記事のタイトル文字です。
    文字の色とカーソルが乗った時の色だけ変更したいのですが宜しくお願いします。

    前々回に教えていただいた「記事下のカテゴリー表示」についてですが、私はしげぞう様と同じくテーマはTwenty Twelveです。
    何度か試していますが何も変わりないです。
    お手数ですが宜しくお願い致します。