
前回は、Diverの見出しカラーのカスタマイズを行いましたが、
今回はデザイン編。
Diverでは、最初からいろんな見出しスタイルが用意されているんですが、
いちいちデザインを確かめながら決めるのは面倒!てる時間はない!
そんなあなたのため(?)に、デフォルトの見出しスタイルを一覧で並べてみました。
見出しのデザインを悩む時間とはオサラバです。
自分で見出しをカスタマイズしたい場合や、コピペできる見出しコードはこちら↓
diverカスタマイザーから簡単に選べる見出しデザイン
diverでは、カスタマイザーを使って見出しのスタイル(デザイン)を数種類の中から選ぶことができるようになっています。
色の変更についてはこちら↓
見出しスタイルの変更方法は、
「ダッシュボード」⇒「外観」⇒「カスタマイズ」⇒「デザイン設定②」
スタイルのプルダウンキー(▼)から、以下のようなスタイルを選択することができます。
この時点では13種類!
これからも進化するかも?(なのでカスタマイズしたい時は「カスタム」を使用)
すんごくありがたい機能だけど、でも、このスタイル名の一覧だけでは、見た目のデザインがどんなのかわからない。
(今のところ、公開ボタンを押さないと右側のプレビュー画面が変わらない)
というわけで、一覧にしてみました!
見本として作った一覧なので、基本色は#1bb4d3(パキっとしたブルー)、文字色は#FFF(白)にしてみました。
ストライプは基本色を薄くして、文字色を#555(濃いめのグレー)に変更。
ラインとマークは背景が白になるので、文字色は基本色に合わせて#1bb4d3に変更しています。
(ストライプはまっすぐにみえないのが面白いね)
他のブログとかみると、幅いっぱいのボックスやリボンが人気かなーって思います。
スマホで見ると、リボンの折り返しは切れちゃうかも。(調整次第)
あと、PCで見た時に、投稿ページもウィジェットも見出しスタイルを「リボン1」にしちゃうとちょっと干渉しちゃうみたい。(調整次第)
えっ?Diver入力補助からも見出しが変更できるの?
ワードプレスには無料のテーマも色々あるのに、有料テーマが人気の理由は、簡単に記事を装飾できる補助機能が満載だからっていうのも一つありますよね。
diverにも、吹き出しや囲い枠など便利な機能が満載の入力補助が実装されてます。
ん?左上に「見出し」ってのがありますね。
個別記事作成時に、いちいち入力補助で見出しをいれる人はいないかもだけど、LP作成時には便利かも。
しかも入力補助を使うと、もう少し見出しスタイルの種類が増えることになるんです。
カスタマイザーにはないデザインがある!
カスタマイザーと違って、テキスト・背景・枠線色と3つの要素が変更できちゃう。
こんなデザインもあるのか。
(カスタムしたデザインを固定できたらいいのにな…)
でも、これで作った見出しをもとに、自作するのもアリですよね。
タイトルが2行になるとデザインが崩れる?
h2のタイトルはちょっと長めになりがちな私が、h2スタイルで「リボン2」を選んでしまうと…
いや横向きの猫(の耳)!
みたいになっちゃったので、とりあえずは「ボックス幅いっぱい」にしておきました。
カラー的には「リボン1」にしたかったけれど、ウィジェットを「リボン2」にすると、PC表示でちょっと干渉しちゃうんですよね。(調整次第だけど)
見出しデザインはカスタマイズも検討してるので、とりあえずはウィジェットを優先にしちゃいます。
どうするかまだ迷ってるけど、お楽しみに、です。