ケロ蔵
どうしよう~
見出しのデザインで気に入ったものがないよ~

カー君
何いってんだよケロ蔵。
見出しのデザインならカスタマイズから選べばいいじゃん。

ケロ蔵
う~ん。
でも選べる見出しのデザインって1つだけでしょ。
記事によっていろいろなデザインの見出しが使いたいんだよ。

トラ先生
おや二人ともこんなところで何を話しているんですか?

カー君
あっ!先生ちょうどいいところに。
実はケロ蔵が見出しのデザインをサイトで1種類だけでなく記事ごとに使い分けたいようなんだよ。

トラ先生
そういうことでしたか。
Diverのデモサイトは見てみましたか?

ケロ蔵
えっ?
最近は記事を書くことに夢中だったから見るヒマはありませんでした。

トラ先生
最近Diverの入力補助に新たな機能が追加されて、見出しも個別にデザインを変更できるようになったんですよ。

ケロ蔵
そうだったんですか?
それなら早くテーマをアップデートしないと!
じゃあ二人ともまた今度ね。

カー君
あら~、もう帰っちゃったよ。

一部の見出し変更を簡単にできる!

見出しを使っていると同じデザインを使っていくので、たま~にデザインを変えてみたいと思ったことはないでしょうか。
「この見出しデザインだけ変えてみたい!」と考えていても見出しのデザイン設定を変えてしまうとすべての見出しが変更されてしまうのでなかなか難しいのですが、Diverでは一部の見出しだけデザインの変更をすることができます。

 

Diverバージョン4.5.8で搭載

 

それでは実際に見出しの変更をしてみましょう。
見出しの編集画面は以下のようになっております。

入力補助・見出しの編集画面

【入力補助】見出し

編集画面を見てもそこまで複雑な設定が必要なく、初心者でも簡単に設定ができるので、すぐに使いこなすことが出来るという点はありがたいです。

設定の詳細内容

それでは見出しの編集画面で設定する項目を順番に紹介していきます。
とは言ってもそこまで多くはないので簡単に説明しましょう。

タイプ

h2~h5とdivタグの中から選択します。
見出しタグをつけたくない場合にはdivタグを選択することで不必要に見出しタグの乱用を防ぐことができます。

見出しテキスト

見出しに表示させたいテキストを入力します。

スタイル

見出しのデザインを用意されているものから選ぶことが出来ます。
11種類のデザインが用意されています。

オプション

見出し先頭に表示されている数字の部分を指しています。
スタイルで数字が表示されている見出しを選択した場合に限り表示されており、それ以外のスタイルを選んだ場合この項目は表示されません。

見出しの色を変更できます。
はじめから用意されているものを含め、自分でカスタマイズをすることが出来るので、同じ色がかぶるといったことはなく、さまざまなバリエーションの見出しを使うことができます。

スポンサーリンク

Diverで使える見出しサンプル

これらはすべてDiverの入力補助で作った見出しデザインです。
見出しデザインは数が限られているものの、色に関しては多様なカスタマイズをすることによって使い分けることができます。

タイトル
タイトル
タイトル
タイトル
タイトル
タイトル
タイトル
タイトル
タイトル

タイトルの先頭に数字を入力することも出来ますよ。

1タイトル
2タイトル
3タイトル
さらに数字の部分を直接変更することによって、漢数字やローマ数字に変えることだってできちゃいます。
タイトル
タイトル
タイトル

ちなみに上のサンプルにあるローマ数字は入力補助の編集画面では設定することが出来ません。

ちょっとだけHTMLをいじる必要がありますが、難しくはありません。1箇所だけ変更してしまえばいいだけです。

<div class="sc_heading count blue"><span class="sc_title"><span class="before">1</span>タイトル</span></div>

線で囲んだ上記のHTMLは見出しタグの見本です。
赤文字で表示されている部分をかえるだけですが、ビジュアルエディタでこのような表示はされていません。
テキストエディタに切り替えて数字の部分を漢数字やローマ数字に変更するだけで簡単にできますので、ぜひやってみてください。

まとめ:簡単に見出しデザインを変更できる点がGOOD!

基本の見出しデザインは標準設定で固定させて記事によって入力補助機能を使って見出しのデザインを変えると行った使い方もできますし、最初からこの機能を使って見るのもいいかもしれませんね。

ケロ蔵
見出しは区切りをわかりやすくするため絶対に必要になるから、これから記事を書く上では覚えておいて損はないと思うよ。
スポンサーリンク
おすすめの記事