• 2015.3.23
• TCDANカスタマイズ
• 11 comments

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

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です。

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

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