【Diverカスタマイズ】見出しスタイルの一覧&入力補助のデザイン

前回は、Diverの見出しカラーのカスタマイズを行いましたが、

今回はデザイン編。

 

Diverでは、最初からいろんな見出しスタイルが用意されているんですが、

いちいちデザインを確かめながら決めるのは面倒!てる時間はない!

そんなあなたのため(?)に、デフォルトの見出しスタイルを一覧で並べてみました。

見出しのデザインを悩む時間とはオサラバです。

自分で見出しをカスタマイズしたい場合や、コピペできる見出しコードはこちら↓

 

diverカスタマイザーから簡単に選べる見出しデザイン

diverでは、カスタマイザーを使って見出しのスタイル(デザイン)を数種類の中から選ぶことができるようになっています。

色の変更についてはこちら↓

見出しスタイルの変更方法は、

「ダッシュボード」⇒「外観」⇒「カスタマイズ」⇒「デザイン設定②

Diverカスタマイザー(見出し)

スタイルのプルダウンキー(▼)から、以下のようなスタイルを選択することができます。

diverの見出しスタイル

この時点では13種類!

これからも進化するかも?(なのでカスタマイズしたい時は「カスタム」を使用)

すんごくありがたい機能だけど、でも、このスタイル名の一覧だけでは、見た目のデザインがどんなのかわからない。

(今のところ、公開ボタンを押さないと右側のプレビュー画面が変わらない)

というわけで、一覧にしてみました!

diver見出しスタイル一覧

見本として作った一覧なので、基本色は#1bb4d3(パキっとしたブルー)、文字色は#FFF(白)にしてみました。

ストライプは基本色を薄くして、文字色を#555(濃いめのグレー)に変更。

ラインとマークは背景が白になるので、文字色は基本色に合わせて#1bb4d3に変更しています。

(ストライプはまっすぐにみえないのが面白いね)

他のブログとかみると、幅いっぱいのボックスやリボンが人気かなーって思います。

スマホで見ると、リボンの折り返しは切れちゃうかも。(調整次第)

あと、PCで見た時に、投稿ページもウィジェットも見出しスタイルを「リボン1」にしちゃうとちょっと干渉しちゃうみたい。(調整次第)

えっ?Diver入力補助からも見出しが変更できるの?

ワードプレスには無料のテーマも色々あるのに、有料テーマが人気の理由は、簡単に記事を装飾できる補助機能が満載だからっていうのも一つありますよね。

diverにも、吹き出しや囲い枠など便利な機能が満載の入力補助が実装されてます。

diverの入力補助機能一覧

ん?左上に「見出し」ってのがありますね。

個別記事作成時に、いちいち入力補助で見出しをいれる人はいないかもだけど、LP作成時には便利かも。

しかも入力補助を使うと、もう少し見出しスタイルの種類が増えることになるんです。

diverの入力補助(見出し)

カスタマイザーにはないデザインがある!

diverの入力補助で見出しカスタマイズ

カスタマイザーと違って、テキスト・背景・枠線色と3つの要素が変更できちゃう。

diverの入力補助(見出し)

こんなデザインもあるのか。

(カスタムしたデザインを固定できたらいいのにな…)

でも、これで作った見出しをもとに、自作するのもアリですよね。

タイトルが2行になるとデザインが崩れる?

h2のタイトルはちょっと長めになりがちな私が、h2スタイルで「リボン2」を選んでしまうと…

見出し(リボン2)のスマホ表示

いや横向きの猫(の耳)!

みたいになっちゃったので、とりあえずは「ボックス幅いっぱい」にしておきました。

カラー的には「リボン1」にしたかったけれど、ウィジェットを「リボン2」にすると、PC表示でちょっと干渉しちゃうんですよね。(調整次第だけど)

見出しデザインはカスタマイズも検討してるので、とりあえずはウィジェットを優先にしちゃいます。

どうするかまだ迷ってるけど、お楽しみに、です。

 

このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事