【Diverカスタマイズ】トップページの表示やサイズの変更

WordPressテーマ、「Diver」を使ったカスタマイズですが、今回はトップページの見た目を変更してみました。

変更した項目はちょっと多いのですが、設定自体はカスタマイザーのみで簡単に変更できます。

トップページ変更には、Diverカスタマイザーの5つの項目を使用します。

まずは、ホーム画面(トップページ)の表示を変更していきます。

デフォルトでは新着記事を公開日順に表示してくれる設定になっていますが、これはそのままでいいかなと。

変更前はこんな感じですね↓

ブログデザイン

今回は一度に色んな箇所を変更していくので、事前に変更する項目を挙げておきます。

使用するのはDiverカスタマイザーの5つの項目と、Diverオプションです。

トップページ変更に使用するカスタマイザー
ダッシュボードの「外観」⇒「カスタマイズ」から、
メイン設定
サイズ設定
レイアウト設定
デザイン設定①
デザイン設定②
それと、Diverオプション機能を使用していきます。
(順番が前後するのは許してね)

メインタイトルのスタイルを変更する

まずは「新着記事」と書いてあるメインタイトルのデザインを変更していきます。

ダッシュボードの「外観」⇒「カスタマイズ」⇒「デザイン設定②」から、文字色や背景色、スタイルを選択。

メインタイトルのスタイル変更
メインタイトルのスタイル

見出しよりもデザインは少な目ですが、インライン小さいラインがあります。

このあと紹介する新着ラベルとの兼ね合いもあって、今回はインラインにしてみました。

スタイルによっては基本色を選ぶ必要があったり(タグや付箋)、文字色と背景色を入れ替えたほうがいいデザインもあります。

記事一覧レイアウトを変更する

トップページで表示される記事一覧のスタイルを変更することができます。

これはリストデザイン↓トップページ(リスト)

これはグリッドデザイン↓トップページ(グリッド)

これはミニリスト↓
トップページ(ミニリスト)

「外観」⇒「カスタマイズ」⇒「レイアウト設定」から、

トップページレイアウトを選ぶ

PC表示とモバイル表示それぞれを選択。

これはお好みですが、
PCはグリッド表示・モバイルはリスト表示にしてみます。

グリッドの最大カラム数(横何列にするか)は「2」と迷ってますが、とりあえずデフォルトのままにしておきました。

NEWラベルのスタイルと記事一覧サムネイルの変更

新着記事一覧内でも、特に最新の記事にはラベルをつけることができます。

「外観」⇒「カスタマイズ」⇒「デザイン設定①」より、Newラベルスタイルを選択。

ついでにブロック要素(記事の枠など)も影付きの角丸に変更してみました。

新着記事ラベルの変更
新着ラベルの選択

先ほど設定したメインタイトルのスタイルによっては、Newラベルのスタイルが干渉しちゃう場合もあります。

メインタイトルを「吹き出し」にすると、Newラベルの「リボン1」などは、被ってしまいますね。

タイトルとラベルのスタイルがかぶる

残りのリボンデザインはこんな感じ↓(メインタイトルはインライン)

縦リボン2
newラベル(縦リボン2)
横リボン1
Newラベル(横リボン1)
横リボン2
newリボン(横リボン2)
斜めリボン
newリボン(斜めリボン)
斜め三角
newリボン(斜め三角)

newリボン(丸)

リボンはどれもいい感じのデザインで迷います。

ラベルカラーはゴールドっぽい色(#eddc49)にしてみたんですが、いまいち目立たないかなぁ。

カラー選びに迷ったら、こちらもどうぞ↓

記事一覧サムネイルを変更する

同じ「デザイン設定①」内で、記事一覧のサムネイルにカーソルを乗せた時の動きを変更することができます。

記事一覧サムネイルの変更

記事一覧のサムネイル画像にカーソルをあてると、画像が変化するように設定できます。

・ズーム
・ぼかし
・グレイスケール
・セピア
・透過

ズームもかっこいいんけど、このブログのアイキャッチは中央に文字を入れているので、ズームしたときに途切れてみっともないんですよね。

グレイスケールとセピアは使ってる画像の色と相性がよくないかな、と思って今のところは「透過」をセレクトです。

抜粋文字数とNEWラベル設定

「外観」⇒「カスタマイズ」⇒「メイン設定」内では、記事一覧レイアウトや内部リンクカードに表示される抜粋文字数を選ぶことができます。

記事一覧の抜粋文字

(ああっ、まだアバターがデフォルトのまま…)

抜粋文字数を変更する

タイトルのみ表示したかったら「0」。

このブログはアイキャッチ画像が少し派手なので、「0」だと記事一覧が窮屈に見えたので、「50」にしておきました。

記事を読んで欲しいなら、あまり長すぎてもだし、細かい字が沢山並んでいると読む気も失せるような…。

この記事の冒頭に貼ってある変更前画像のように、「リスト」デザインなら160くらいあってもいいかもしれませんが。

NEWラベルのタイトルと表示時間の設定

先ほど設定したのはNewラベルのスタイル(デザイン)ですが、ここでは表示についての変更ができます。

newラベル設定

ラベルのタイトル(長すぎNGとなるとNEWしか思いつかない)と、ラベルを表示される時間を変更できます。

デフォルトは「NEW!」と24時間。

ここはデフォルトのままにしています。

DiverオプションでSNSボタンを変更する

DiverのSNSボタンは、デフォルトで記事上、記事下、そしてPCでは記事左側に追従ボタンがついてきます。

これらを変更できるのが、ダッシュボードの「Diverオプション」。

Diverオプション

SNS設定に進むと、アイコンの大きさや追従ボタンの選択ができるようになっています。

DiverオプションでSNSボタンを設定する
サイズ変更、SNSボタンの種類、非表示を選ぶことができます。

今回は追従SNSボックスを外してみる事にしました。

追従SNSボタン

チェックを全て外すと、ボタン表示が消えて、その分記事幅が広がります。

ブログの記事幅

せっかくPCで見てもらうなら、画面いっぱい使わないともったいないんじゃないの、と思うかもしれませんが、

私はあまり幅がありすぎると、目で左右に追う範囲が広くなるので疲れてしまう。(歳じゃないもん)

そこで、Diverカスタマイザーに戻って、記事幅を変更していきます。

「外観」⇒「カスタマイズ」⇒「サイズ設定」です。

サイトサイズの変更

サイト全体のサイズ(大)をデフォルトの90%→80%に、

個別ページのメインカラム(大)もデフォルトの90→80に変更しました。
(特に推奨するものではありません)

 

変更後の記事幅がこちら↓カスタマイズ後の記事幅

少し左の余白が増えました。(このあたりはまた様子をみて変更していくかもしれません)

おしまいに

Diverでは、トップページにファーストビューやピックアップ記事を入れることもできます。

現段階ではまだ記事数が少ないので、カテゴリ増やしてから設定していきますね!

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

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

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

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

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

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

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