WordPressテーマ、「Diver」を使ったカスタマイズですが、今回はトップページの見た目を変更してみました。
変更した項目はちょっと多いのですが、設定自体はカスタマイザーのみで簡単に変更できます。
Contents
トップページ変更には、Diverカスタマイザーの5つの項目を使用します。
まずは、ホーム画面（トップページ）の表示を変更していきます。
デフォルトでは新着記事を公開日順に表示してくれる設定になっていますが、これはそのままでいいかなと。
変更前はこんな感じですね↓
今回は一度に色んな箇所を変更していくので、事前に変更する項目を挙げておきます。
使用するのはDiverカスタマイザーの5つの項目と、Diverオプションです。
・メイン設定
・サイズ設定
・レイアウト設定
・デザイン設定①
・デザイン設定②
それと、Diverオプション機能を使用していきます。
（順番が前後するのは許してね）
メインタイトルのスタイルを変更する
まずは「新着記事」と書いてあるメインタイトルのデザインを変更していきます。
ダッシュボードの「外観」⇒「カスタマイズ」⇒「デザイン設定②」から、文字色や背景色、スタイルを選択。
見出しよりもデザインは少な目ですが、インラインと小さいラインがあります。
このあと紹介する新着ラベルとの兼ね合いもあって、今回はインラインにしてみました。
スタイルによっては基本色を選ぶ必要があったり（タグや付箋）、文字色と背景色を入れ替えたほうがいいデザインもあります。
記事一覧レイアウトを変更する
トップページで表示される記事一覧のスタイルを変更することができます。
これはリストデザイン↓
これはグリッドデザイン↓
これはミニリスト↓
「外観」⇒「カスタマイズ」⇒「レイアウト設定」から、
PC表示とモバイル表示それぞれを選択。
これはお好みですが、
PCはグリッド表示・モバイルはリスト表示にしてみます。
グリッドの最大カラム数（横何列にするか）は「2」と迷ってますが、とりあえずデフォルトのままにしておきました。
NEWラベルのスタイルと記事一覧サムネイルの変更
新着記事一覧内でも、特に最新の記事にはラベルをつけることができます。
「外観」⇒「カスタマイズ」⇒「デザイン設定①」より、Newラベルスタイルを選択。
ついでにブロック要素（記事の枠など）も影付きの角丸に変更してみました。
先ほど設定したメインタイトルのスタイルによっては、Newラベルのスタイルが干渉しちゃう場合もあります。
メインタイトルを「吹き出し」にすると、Newラベルの「リボン1」などは、被ってしまいますね。
残りのリボンデザインはこんな感じ↓（メインタイトルはインライン）
リボンはどれもいい感じのデザインで迷います。
ラベルカラーはゴールドっぽい色（#eddc49）にしてみたんですが、いまいち目立たないかなぁ。
カラー選びに迷ったら、こちらもどうぞ↓
記事一覧サムネイルを変更する
同じ「デザイン設定①」内で、記事一覧のサムネイルにカーソルを乗せた時の動きを変更することができます。
記事一覧のサムネイル画像にカーソルをあてると、画像が変化するように設定できます。
・ズーム
・ぼかし
・グレイスケール
・セピア
・透過
ズームもかっこいいんけど、このブログのアイキャッチは中央に文字を入れているので、ズームしたときに途切れてみっともないんですよね。
グレイスケールとセピアは使ってる画像の色と相性がよくないかな、と思って今のところは「透過」をセレクトです。
抜粋文字数とNEWラベル設定
「外観」⇒「カスタマイズ」⇒「メイン設定」内では、記事一覧レイアウトや内部リンクカードに表示される抜粋文字数を選ぶことができます。
（ああっ、まだアバターがデフォルトのまま…）
タイトルのみ表示したかったら「0」。
このブログはアイキャッチ画像が少し派手なので、「0」だと記事一覧が窮屈に見えたので、「50」にしておきました。
記事を読んで欲しいなら、あまり長すぎてもだし、細かい字が沢山並んでいると読む気も失せるような…。
この記事の冒頭に貼ってある変更前画像のように、「リスト」デザインなら160くらいあってもいいかもしれませんが。
NEWラベルのタイトルと表示時間の設定
先ほど設定したのはNewラベルのスタイル（デザイン）ですが、ここでは表示についての変更ができます。
ラベルのタイトル（長すぎNGとなるとNEWしか思いつかない）と、ラベルを表示される時間を変更できます。
デフォルトは「NEW！」と24時間。
ここはデフォルトのままにしています。
DiverオプションでSNSボタンを変更する
DiverのSNSボタンは、デフォルトで記事上、記事下、そしてPCでは記事左側に追従ボタンがついてきます。
これらを変更できるのが、ダッシュボードの「Diverオプション」。
SNS設定に進むと、アイコンの大きさや追従ボタンの選択ができるようになっています。
サイズ変更、SNSボタンの種類、非表示を選ぶことができます。
今回は追従SNSボックスを外してみる事にしました。
チェックを全て外すと、ボタン表示が消えて、その分記事幅が広がります。
せっかくPCで見てもらうなら、画面いっぱい使わないともったいないんじゃないの、と思うかもしれませんが、
私はあまり幅がありすぎると、目で左右に追う範囲が広くなるので疲れてしまう。（歳じゃないもん）
そこで、Diverカスタマイザーに戻って、記事幅を変更していきます。
「外観」⇒「カスタマイズ」⇒「サイズ設定」です。
サイト全体のサイズ（大）をデフォルトの90％→80％に、
個別ページのメインカラム（大）もデフォルトの90→80に変更しました。
（特に推奨するものではありません）
変更後の記事幅がこちら↓
少し左の余白が増えました。（このあたりはまた様子をみて変更していくかもしれません）
おしまいに
Diverでは、トップページにファーストビューやピックアップ記事を入れることもできます。
現段階ではまだ記事数が少ないので、カテゴリ増やしてから設定していきますね！
