Diver-BB
Diver-BB
スポンサーリンク

diverは初心者に優しい、カテゴリーページのデザイン・レイアウトも簡単にできる。自動設定でもいいが読者に優しくわかりやすい、個性的なレイアウトにして見たい。

WordPress(ワードプレス)テーマdiver のカテゴリページ、カスタマイズ方法の手順とポイントを解説。

 

diver

diverを使用していますがその中で、お気に入りポイントの1つが、カテゴリー別のページがある事。

そして、レイアウトもカスタマイズできる(本当は知らなかった)(笑)...

 

BB
記事数も増えて整理しようと考えて、どうするか?

BB

難易度が高い高度なテクニックはない。

diverのタブウイジェットを使ってカテゴリーを見やすくしていたつもりが、BB自身も分からくなってしまった。

どうするかな!

BB
diverカテゴリーページを設定していたが、カスタマイズができる事に気がついたのは今日!

BB
では、カスタマイズしていきましょう。
画像をたくさん使って説明していくので重くなる可能性があります。

特にスマホ!少し我慢してね。早くスクロールすると画像がある所は白なってしまうこともあります、ご理解ください。

diver画像遅延処理を使ってなるべく対応しています。AMPは表示が崩れるので(現在)使用していません。

スポンサーリンク

出来上がりイメージ

 

BB
現在のカテゴリーページ
違う記事もみてね。

 

作成
当サイト、betterbestの(例)
  1. 新しい固定ページを作成
  2. カテゴリー別に分類
  3. 完成後
  4. ヘッダー内にスタートボタンを設定
  5. スタートボタンから新規レイアウト固定ページへ
  6. PC・スマホ対応
  7. 確認してみよう!

 

QR Code
betterbest- - スタートボタン

betterbest- - スタートボタン

 

 

 

こんな感じになるよ
公式サイトのご案内
  • 2
  • 3
よくある質問
  • 1
  • 2
  • 3
メーカー
  • 1
  • 2
  • 3
情報
  • 1
  • 2
  • 3

 

現在のカテゴリーページの画像です。

設定すると自動で、記事一覧が表示されている。

自動でも良いんですけど!

 

時系列なので探している記事までは、

探しにくいのがいまいち残念。

記事一覧の下をカスタマイズしていきます。

白く空いた空間をカテゴリーレイアウトで追加していきます。
スポンサーリンク

今回使うdiver機能

今回使うdiver機能

投稿画面から入力補助ボタン。
       ↡
DIVER入力補助のポップアップです。
使う機能は必要な項目を押すだけ。
今回使う機能
  • 1、グリッドレイアウト
  • 2、見出し
  • 3、ボタン
  • その他:必要に応じて

 

使い方を覚えればすぐに完成します。

サンプル

ザックリですけど、

見出しサンプル

公式サイトまとめ
見出しサンプル青
ボタンサンプル1、青ふちアリ
よくある質問
見出しサンプル赤
ボタンサンプル1、赤ふちアリ
  1. グリッドレイアウト2分割最大(4分割可能)
  2. 見出し挿入、11種類8カラー + カスタム色
  3. ボタン設定、13種類8カラー + カスタム色 + アイコン

 

サンプル2:公式サイトまとめ
サンプル2:公式サイトまとめ
見出しサンプル2、グリッドレイアウト2分割

ボタンサンプル2

 

 

 

グリッドレイアウトなし、ボタン横並び

 

完成全体イメージ

自動で表示部分
ここからカスタマイズ

自動で表示部分
←ここからカスタマイズ

レイアウトパーツ、説明

ポイント
  1. グリッドレイアウト2分割
  2. 入力補助から見出し選択
  3. 2ステップで終了
公式サイトまとめ
公式サイトまとめ

 

 

Diver専用:HTML、他のテーマは別CSSが必要です。

サンプルHTML
<div class="row sp">
<div class="sc_col2 sp">
<div class="sc_heading fukidasi blue"><span class="sc_title">公式サイトまとめ</span></div>
<div></div>
</div>
<div class="sc_col2 sp">
<div class="sc_heading fukidasi blue"><span class="sc_title">公式サイトまとめ</span></div>
<div></div>
</div>
</div>

 

 

カスタマイズレイアウト全体

 

ポイント
  1. グリッドレイアウト4分割を選択
  2. 入力補助、見出し選択を選択
  3. 入力補助、リストデザインを選択
  4. 3ステップ終了

 

カテゴリー名:メーカー
1
2
4
5
6
7
8
9
10
11
12
1
カテゴリー名:選ぶ基準
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
カテゴリー名:比較
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
カテゴリー名:生活
  • 1
  • 2
  • 3
カテゴリーページレイアウトは、Diver入力補助を3つ使うだけ!
グリッドレイアウト、入力補助からの見出しを選んで、(囲い枠)を入れたい場合は入れて、リストデザインを決めて終わり:4ステップ終了

全体レイアウトHTML

Diver専用:HTML、他のテーマは別CSSが必要です。

サンプルHTML
<div class="row sp">
<div class="sc_col4 sp">
<div class="sc_heading fukidasi blue">カテゴリー名:メーカー</div>
<div>
<div>
<div class="sc_frame_wrap blue">
<div class="sc_frame ">
<div class="sc_frame_text">
<div>
<div></div>
<div>
<div class="sc_heading bborder l blue"><span class="sc_title">1</span></div>
<div>
<div></div>
<div>
<div class="sc_heading bborder l blue"><span class="sc_title">2</span></div>
<div>
<div></div>
<div>
<div class="sc_heading bborder l blue"><span class="sc_title">4</span></div>
<div>
<div></div>
<div>
<div class="sc_heading bborder l blue"><span class="sc_title">5</span></div>
<div>
<div></div>
<div>
<div class="sc_heading bborder l blue"><span class="sc_title">6</span></div>
<div>
<div></div>
<div>
<div class="sc_heading bborder l blue"><span class="sc_title">7</span></div>
<div>
<div></div>
<div>
<div class="sc_heading bborder l blue"><span class="sc_title">8</span></div>
<div>
<div></div>
<div>
<div class="sc_heading bborder l blue"><span class="sc_title">9</span></div>
<div>
<div></div>
<div>
<div class="sc_heading bborder l blue"><span class="sc_title">10</span></div>
<div>
<div></div>
<div>
<div class="sc_heading bborder l blue"><span class="sc_title">11</span></div>
<div>
<div></div>
<div>
<div class="sc_heading bborder l blue"><span class="sc_title">12</span></div>
<div>
<div></div>
<div>
<div class="sc_heading bborder l blue"><span class="sc_title">1</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sc_col4 sp">
<div class="sc_heading fukidasi blue">カテゴリー名:選ぶ基準</div>
<div>
<div class="sc_frame_wrap yellow">
<div class="sc_frame ">
<div class="sc_frame_text">
<div class="sc_designlist ol dia red">
<ol>
 	<li>1</li>
 	<li>2</li>
 	<li>3</li>
 	<li>4</li>
 	<li>5</li>
 	<li>6</li>
 	<li>7</li>
 	<li>8</li>
 	<li>9</li>
 	<li>10</li>
 	<li>11</li>
 	<li>12</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sc_col4 sp">
<div class="sc_heading fukidasi blue">カテゴリー名:比較</div>
<div>
<div class="sc_frame_wrap red">
<div class="sc_frame ">
<div class="sc_frame_text">
<div class="sc_designlist ol timeline blue">
<ol>
 	<li>1</li>
 	<li>2</li>
 	<li>3</li>
 	<li>4</li>
 	<li>5</li>
 	<li>6</li>
 	<li>7</li>
 	<li>8</li>
 	<li>9</li>
 	<li>10</li>
 	<li>11</li>
 	<li>12</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sc_col4 sp">
<div class="sc_heading fukidasi blue"><span class="sc_title">カテゴリー名:生活</span></div>
<div>
<div class="sc_frame_wrap blue">
<div class="sc_frame ">
<div class="sc_frame_text">
<div class="sc_designlist li fa_arrow blue">
<ul>
 	<li>1</li>
 	<li>2</li>
 	<li>3</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

 

カテゴリーページは必要なのか

カテゴリーページを作成する意味があるのか、別に設定しなくても問題はないと思います。

記事も多少増えて自分で記事を探すのが大変だなと、と言う事は訪問してくれた方が検索しずらいんじゃないかなと?

 

サイトマップや目次見たいに分かりやすく、したかったので作成しました。

いい悪いは別として、見やすい、分かりやすがいいかなと!

 

そう思ったんで、整理してみることに、カテゴリページではなくてもトップページに固定ページ作成していくのがいいかもしれません。

 

もっと簡単に

 

もっと簡単にできる方法を発見、今さら遅いですが追加します。

 

 

diver入力補助から記事一覧を選択をして、

取得数:5~最大~

取得タイプ:カテゴリー

取得カテゴリー:diver

表示スタイル:グリッド

その他:お好きな設定

カテゴリーいちらん完成

 

ショートコードもあります、diver公式サイトより参照

記事がありません。

入力補助とショートコードをうまくつかえば更にレイアウト変更や固定ページ・カテゴリーページのカスタマイズが楽に簡単にできるようになります。
diverは多機能で最初覚えるのに少し時間がかかります。
しかし全てを使う分けではないので、2,3回記事作成すれば使いこなせます。
よく使う機能
  1. 入力補助
  2. 囲い枠
  3. 吹き出し
  4. 引用
  5. 会話
  6. 記事一覧
  7. 関連記事
  8. 区切り線
  9. マーカー

1,2,4,7,9を最低限必要なことをおぼえれば、あとは見出しを使うことも忘れないで下さい。

まとめ

 

初心者でも簡単にレイアウトが簡単にできます、今回はカテゴリーページの説明でしたが、

通常の投稿画面と固定ページでも同じ手順になります。お好きなようにレイアウトしてみてください。

 

ポイントはグリッドレイアウトを分割することです。

 

気になる情報はこちら

当サイト申し込み人気ランク

 

1位 トヨタ期間工 期間工jp

2位 ホンダ期間工 期間工jp

3位 スバル期間工 期間工jp

 

 

 

 

気になるなる方は最後まで見てね!!

 

 

 

 

1位 TOYOTA
総合評価
安定、継続率、短期長期間
安心して応募できる。
初回更新、3ヵ月で始めやすい
日給10000~1080
時給1360~1469
総合評価 1位

 

2位 HONDA

40代・50代が応募できるおすすめ。

年齢と食事で考えると1位

初回更新3ヵ月で始めやすい

業界1位の初回日給10300~スタート
他社と比較して仕事が楽な感じ!
満足度 1位
食事が美味しい
食事無料(1日1食)

 

3位 SUBARU
最大手当 6ヵ月/合計227
残業で稼ぐスバルリピーターが多く人気
関東近郊1番人気メーカー
車の持込みOK。
選考会参加費は参加後21日以内もしくは入社確認後※規定有
入社祝い金は入社後35日以内に振り込まれます※規定有

 

 

カテゴリー
スポンサーリンク
おすすめの記事