TCD

【TCD】見出しデザインをカスタマイズする方法!オリジナルへも簡単に変更設定可能

ブログ運営を行っていく上で、「見やすさ」「おしゃれ」なサイトデザインは重要ですよね。

TCDではデフォルトの見出しはただ文字が大きくなるだけなので、ユーザビリティを考えると「変更したい!」と思うケースも多いのではないのでしょうか。

今回はテンプレート「TCD」でブログ記事の見出しをカスタマイズをしていく方法、簡単なカスタマイズやオリジナルデザインへの変更方法も解説していきます。

TCDで見出しデザインを変更する方法は?簡単にオリジナルへカスタマイズする方法

今回はテンプレート「TCD」の中でも管理人のテンプレートである「ANGEL」を前提として進めていきます。

ここでは個人的に簡単だと思う方法から順番に紹介していきますね。

 TCDの見出しデザインを変更する方法その1:クイックタグを使う

見出しデザインを変更する方法、まずはTCDの「クイックタグを使う方法」から解説します。

参考記事:クイックタグが便利すぎ!簡単カスタマイズする設定方法

 

クイックタグを選択すると、デフォルトでプルダウンから「見出し3」「見出し4」「見出し5」をそれぞれ2種類のデザインが選べる様になっています。

 

クイックタグで「H3/4/5 見出しa/b」のどれかを選び、タイトル文字を編集すれば簡単に変更設定完了です!

もしも気に入ったデザインで違う見出しで出力したい場合は、hの後の数字を任意の数字に変更すればOKです。

 TCDの見出しデザインを変更する方法その2:テキストエディタでオリジナルコードを入力

続いては「TCDオリジナルデザインを出力する方法」です。

 TCDでは「style.css」でデフォルト設定されているclassタグのHTMLコードをテキストエディタで入力すると、オリジナルデザインの見出しが反映されます。

やる事は簡単!こちらのコードをテキストエディタに入力してみます。

 

するとこの様な表示になります。

 

こちらも数字の部分を任意の数字にする事で出力する事で、見出しの階層を変更することが出来ます。

 TCDの見出しデザインを変更する方法その3:CSS見出しジェネレータを使う

例えば完全にオリジナルの見出しを作りたい場合は、「CSS見出しジェネレータ」の作成が便利です。

WEB道 CSSジェネレータ

 

使い方は簡単!

①見出しの種類 ②ボックス関係 ③文字関係 

の3点を好みのデザインの通り入力していき、「ジェネレート」をクリックすると、CSSコードが生成されます。

そのコードを貼り付ければ完了ですね!

 

TCDの場合、HTMLコードをこの様に貼り付けます。※見出し3の場合

ジェネレートされたCSSコードをstyle.css該当箇所、もしくはカスタムCSSに貼り付ければ完了です。

オリジナルデザインへ変更した見出しをボタンで呼び出す!プラグインAddQuickの設定方法

せっかく自分でカスタマイズした見出しも、毎回classタグのHTMLコードをテキストエディタに打ち込むなんて、

めんどくさくてやってられない!!

のが本音ですよね(笑)
正直、私はテキストエディタボタンをクリックする一手間すら面倒です・・!

 

という事で、続いて便利プラグイン「AddQuicktag」を使ってワンクリックボタンでオリジナル見出しを呼び出す設定方法を解説していきます!

AddQuicktapについての基本的な解説はこちら

 

例えばTCDオリジナルデザインコードやCSS見出しジェネレータで生成したコードでボタン生成した場合は、こちらのHTMLコードを毎回打ち込むことになります。※見出し3の場合

 

なので、AddQuicktag設定画面ではこの様に設定してみました。

 

「変更を保存」ボタンを押すと、ビジュアルエディタに新たに「Quicktags」というプルダウン項目が追加されます。テキストエディタにもラベル名が追加されます。

早速呼び出してみましょう。「ラベル名」で設定した「h3」をプルダウンから選択します。

 

こんな表示になりました^^
毎回HTMLコードを打ち込まなくても楽ですね!

 

ちなみに見出し2、見出し3、見出し4、見出し5と全てタグ内の数字を変更すれば見出し出力もその数字通りになります

なので、例えば見出し2をボタン生成したい場合は

という様にコード編集し、このコード自体を前述した流れでクイックタグ設定すれば使用頻度が高くても楽チンですね^^

 

オリジナルのデザインカスタマイズも一度コード生成してしまえばクイックタグ一発で呼び出せるので、上手に使いこなしていきましょう!

それでは今回は以上です!

〜自由なライフスタイルを実現させたいアナタへ〜  

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です