~TCD~投稿ページ・固定ページの記事タイトルやページ内で使うhタグをデザインする

AN(tcd014)で見出しタグ(h2やh3など)をデザインする

AN(tcd014)の投稿ページと固定ページの記事タイトルには、h2の見出しが使われていますが、そのデザインはCSSでfont-sizeが指定されている程度で、これといった装飾はされていません。

また記事内で<h3>以下の見出しタグを使っても、それらにCSSはあてられていませんので、ブラウザのデフォルトスタイルシートに準じた、これまたとてもシンプルな表示になります。

各ブラウザのデフォルトスタイルシートについては、こちらのサイトでまとめられています。

今回は、投稿ページと固定ページの記事タイトルのデザインや、ページ内で使うh2やh3などといった見出しタグをデザインを変更する方法を紹介します。

カスタマイズをする場合の注意
必ずバックアップを取って自己責任でお願いします。もし何らかのトラブル等がおこっても、私は一切の責任を負えませんのでご了承ください。

記事タイトルのh2をデザインする

詳細記事ページと固定ページの記事タイトルは、h2になっていて、page_headline というclassが指定されています。

ですので、記事タイトルのデザインを変更したい場合は、この page_headline の部分に、お好みでCSSを書き加えるといいです。

変更後

/* post title */
.page_headline { margin:0 0 20px 0; line-height:150%; font-size:18px; border-left:8px solid #444; border-bottom:1px dotted #999; padding:0 0 0 14px; }

記事タイトルのイメージ

記事タイトルのサンプルです。こんな感じになりました。

例として、元々ある class=”headline1″ のCSSを真似して書き加えてみました。

記事内で使う見出しタグをデザインする

記事タイトル以外の記事内で使う見出しタグをデザインしたい場合は、最初から用意されている見出しタグ用のclassを使うか、新たにCSSを書き加えるかのどちらかになります。

用意されているclassを使用する

AN(tcd014)には、元々見出しタグに使用できるclassが用意されています。style.css内に書かれている【見出し】の部分にある、news_headline1 と news_headline2 の2つがそうです。

例えば、<h3 class="news_headline1"> というように書くだけで装飾されます。

news_headline1 と news_headline2 のイメージ

これはnews_headline1のサンプルです。

<h3 class="news_headline1"> と書くと、このようなデザインになります。

これはnews_headline2のサンプルです。

同様に <h4 class="news_headline2"> と書くと、このような(ry。

どちらも、h2やh5など他の見出しタグにも使えますし、好きな色に変えることもできます。

もし、見出しをつけるたびに、毎回class名を書くのは、ちょっと面倒に感じる場合は、見出しタグに関する記述を新たに書き加えるようにします。

記事内で使う見出しタグ用のCSSを作る

変更後

/* h3 */
.post h3 { background:url(img/common/○○.png) no-repeat; padding:0 0 0 ○px; }
/* h4 */
.post h4 { background:url(img/common/○○.png) no-repeat; padding:0 0 0 ○px; }

書き加える場所は、style_pc.cssの一番最後など、ご自分がわかりやすいところに書いてOKです。

(img/common/○○.png) の部分は、画像を直接サーバー(img/common/)にアップした場合の書き方です。管理画面のメディアでアップロードした場合は、メディア→ライブラリで、画像のURLを確認されてくださいね。

上の例では、見出しタイトルの前にワンポイント画像を挿入してみました。

最初の .post なしで「 h3 { background:url(hogehoge); } 」という風に書いてしまうと、サイト内にある全てのh3タグにスタイルが反映されてしまいますので、お気を付けくださいませ。

関連記事

コメント

  • トラックバックは利用できません。
  • コメント (11)
  1. 初めまして。竹中と申します。いつもブログ拝見させてもらってます。

    僕も同じテーマを使っているので、すごく勉強になります。助かってます。

    少し分からない事があるので質問させて下さい。

    見出しのカスタマイズなんですが、style_pc.cssを書き換えてみたんですが、

    pcページは変更が反映されますが、スマフォページには反映されません。

    そこで、style_mobile.cssやstyle_sp.cssのpost titleの部分を書き換えてみたんですが

    だめでした。変更をスマフォページに反映させるためにはどうすればいいんでしょうか?

    時間がある時で結構ですので、返信いただければ幸いです。

    これからも記事楽しみにしてます。

      • まりー
      • 2015年 12月 01日

      竹中さん、こんにちは。
      コメントありがとうございます。

      スマホにも反映させるには、style_sp.css の.page_headline に書き加えるといいです。

      変更が反映されないときは、スマホのページを再読み込み(または更新)などしてみてください。
      それでも反映されないときは、コードを書き間違えてる可能性もあります。

      一度、確認していただけますでしょうか。

  2. ありがとうございました。style_sp.cssの.page_headlineを書き換えたらスマフォページに反映させる事ができました。

    どうもコードを書き間違えていたようです。助かりました。まだ慣れていないのでコードの書き換えは気を使います。

    これからも記事楽しみにしてます。頑張って下さい。それでは。

      • まりー
      • 2015年 12月 03日

      うまくいってよかったです♪
      また何かあれば、お声かけください。

    • コムさん
    • 2016年 7月 22日

    初めまして。tcd104のカスタマイズで探していたら辿り着きました。とても可愛いサイトですね(^^)どうぞよろしくお願いします。

    私はWP初心者で、最近仕事でWPを使用するようになりました。tcd104をインストールして使っているのですが「ピックアップ記事」の表示件数を増やして6記事表示させたいのですが、いまいちどこを変更すれば良いのかわかりません。※デフォルトでは1件のみ表示です。

    よろしければお力添えお願いいたします。

      • まりー
      • 2016年 7月 23日

      コムさん、こんにちは。
      コメントありがとうございます♪

      ピックアップ記事の表示件数を変更するには、
      pickup_post.php で以下の部分を探してください。

      // Widget output //
      $args = array(‘post_type’ => ‘post’, ‘posts_per_page’ => 1, ‘meta_key’ => ‘pickup_post’, ‘meta_value’ => ‘on’, ‘orderby’ => ‘rand’);

      ここの、「’posts_per_page’ => 1」を好きな数字にするといいです。
      コムさんの場合ですと、6記事表示させたいということなので、
      「’posts_per_page’ => 6」にしたら、6記事表示されるはずです。

      上手くいかないようでしたら、またご連絡ください。

    • シュン
    • 2016年 8月 11日

    はじめまして!
    素晴らしい参考記事を投稿して頂きありがとうございます。
    同じテンプレートを使っているのでとても参考になります。

    ひとつ質問させてください。

    background:url(img/common/○○.png)のところの画像URLは
    メディアライブラリにあるhttp://~〇〇.pngというところではないのですか?

    そのようにしても背景色は変わっても指定した画像が表示されなかったもので。
    こういうことはかなり苦手で初歩的な質問で申し訳ないのですが、調べても
    分からなかったので。。。

    ご教授宜しくお願いいたします。

      • まりー
      • 2016年 8月 11日

      シュンさん、こんばんは。
      コメントありがとうございます。

      大変失礼いたしました。
      私が、指定方法を間違って書いていました。

      正しくは、「background:url(img/common/○○.png) no-repeat;」です。
      URLの() の次に書いてある ; (セミコロン)は不必要です(ノω・、)

      画像を管理画面のメディアでアップロードされている場合は、
      おっしゃるとおり、http://~○○.png と指定していただいて大丈夫です。

      本当に申し訳ありませんでした。
      上手くいかなければ、またご連絡ください。

    • 山本さん
    • 2016年 10月 17日

    お久しぶりです。
    以前子テーマの設定でお世話になりました山本です。

    いつも素晴らしく貴重な情報をシェアしてくださりありがとうございます。

    今回、ANのテーマでタイトルと小見出しのカスタマイズを行いたく、
    本ページの通り以下を行いましたが変更が反映されません。

    =============

    ①style_pc.cssのpage_headline の部分に変更

    /* post title */
    .page_headline { margin:0 0 20px 0; line-height:150%; font-size:18px; border-left:8px solid #444; border-bottom:1px dotted #999; padding:0 0 0 14px; }

    ②style_pc.cssの一番最後に以下を追加

    /* h3 */
    .post h3 { background:url(img/common/○○.png) no-repeat; padding:0 0 0 ○px; }
    /* h4 */
    .post h4 { background:url(img/common/○○.png) no-repeat; padding:0 0 0 ○px; }

    =============

    本当は、まりーさんのページの通り記事タイトル前にハートを、
    小見出しにはダブルハートを、さらに下の見出しには☆をなど、
    可愛くしたいです。。

    初歩的な質問で大変申し訳ないのですが、
    自分なりにやり尽くしてどうにもならなくなったので
    お力をお貸しいただけると助かります(; ;)

    お忙しい中申し訳ございませんが、
    何卒宜しくお願いします。

      • まりー
      • 2016年 10月 17日

      山本さん、ご無沙汰しています♪
      いつもありがとうございます(*´∇`*)

      変更が反映されないということですが、キャッシュの削除はされましたでしょうか?
      もしそれでも反映されないということですと、記述ミスが考えられます。
      綴りのミスや、「;(セミコロン)」が1つ抜けただけでも反映されなくなります。

      あとは、画像のファイル名を間違えているとかでしょうか…。
      画像のアップロード先はどこにされていますか?

      もし管理画面のメディアでアップロードしている場合は、
      メディア→ライブラリで、画像を選択すると、画像のURLが表示されますので、
      そのURLをコピー&ペーストでいいので記述してみてください。

        • 山本
        • 2016年 10月 18日

        まりーさん、

        お忙しい中、ご連絡頂き
        誠にありがとうございました!

        キャッシュクリアと記述について
        もう1度確認してみますね。

        style_pc.cssのpage_headline の部分を
        まりーさんが挙げて下さっている例の様に変更を加える場合は、
        記述をそのままコピペすれば大丈夫でしょうか?

        ちなみに、画像は管理画面のメディアでアップロードしています。
        こちらも確認してみます。

        ありがとうございました^^

サイト内検索

おすすめ記事

ページ上部へ戻る