当テーマでは他社製のプラグインを導入した際にデザイン崩れが起こらないように、敢えてH等の見出しタグにはデザインを設定しておりません。そのため見出しを装飾したい場合はご自身でカスタマイズしていただく必要があります。
そこで今回はタグのカスタマイズ方法を紹介いたします。
デザインプレス社で用意している見出しを使う方法
デザインプレス社テーマでは、クラス指定で見出しが設定されるようにしております。クラスに「news_headline1」もしくは、「news_headline2」を設定されると、見出しがつくようになります。
HTMLファイル
1 <h3 class="news_headline1">見出し1</h3> 2 <h4 class="news_headline1">見出し2</h4> 3 <h3 class="news_headline2">見出し3</h3> 4 <h4 class="news_headline2">見出し4</h4>
CSSファイルは下記のようになっております。
cssファイル名：style.css
1 .news_headline1{margin:80px 0 25px 0; border-left:8px solid #444;
border-bottom:1px dotted #999; line-height:30px; font-size:1.2em; padding:0 0 0 14px;}
2 .news_headline2{margin:40px 0 20px 0; border-left:6px solid #666;
line-height:26px; font-size:1.1em; padding:0 0 0 12px;}
設定いただくと下記のように表示されます。
記事を書く際のおすすめプラグイン
記事を書く時に、毎回コードを書くのは面倒ですよね。記事でよく利用するコードをあらかじめ登録しておき、編集画面時にボタンひとつで呼び出せるWordPressプラグイン「AddQuicktag」をご紹介します。下記の記事を参考ください。
記事を書く時によく使うコードを登録してボタン1つで呼び出せるプラグイン「AddQuicktag」
オリジナルで追加する方法
見出しはcssをカスタマイズしていただくことで設定できますが、簡単に見出しを作成するアプリケーションがございますのでご紹介したいと思います。
CSS見出しジェネレータ
吹き出しやリボン、背景色、ボーダー色、文字色、影、ぼかしなどを選択して見出し用のCSSを生成するアプリケーション。
css見出しジェネレータ｜web道
使い方は簡単で、まずは見出しを【吹き出し】か【リボン】か【枠】から選び、後は自分好みにカラーなどをカスタマイズするだけです。最後に【ジェネレート】をクリックします。
tcdテーマに組み込む場合にはここで制作したcssを以下のようにコピーし貼付けます。
HTMLファイル
1 <h3 class="news_headline3">見出しnews_headline3</h3>
編集するcssファイル：style.css
01 .news_headline3{
02 position: relative;
03 color: #ffffff;
04 background: #05b127;
05 font-size: 16pt ;
06 border: 3px solid #150300;
07 margin: 10px 10px 23px 10px;
08 padding: 10px 5px 10px 10px;
09 border-radius: 3px;
10 box-shadow:1px 3px 7px 0px #666666 ;
11 }
12 .news_headline3:after, .news_headline3:before {
13 content: "";
14 position: absolute;
15 top: 100%;
16 height: 0;
17 width: 0;
18 }
19 .news_headline3:after {
20 left: 40px;
21 border: 10px solid transparent;
22 border-top: 10px solid #05b127;
23 }
24 .news_headline3:before {
25 left: 37px;
26 border: 13px solid transparent;
27 border-top: 13px solid #150300;
28 }
以下のような見出しが簡単に作成できます。
お好みで見出しをデザインしてみてください。
以上で見出しにデザインする方法の解説を終わります。
テーマファイルのカスタマイズについてはサポートの対象外となります。万が一、カスタマイズによって不具合が生じましてもデザインプレス社では責任を負いかねますのでご了承ください。カスタマイズに際しては、必ずバックアップをご用意の上お客様の責任において実施して頂きますようお願い申し上げます。
