bb_line_koushiki

bb_line_koushiki

登録してくれたお友達に 特典 があるよ!

プレゼント1、完全無料でブログができる方法

プレゼント2,期間工情報や生活にかかせないお得が、、、
bb_info_line

bb_info_line

QRコード恐竜が可愛い

カメラで読み込んで見てね!

恐竜QRを表示させる方法

動画の中に新しい機能が!

2021年東京オリンピック開会式予定まであと何日?

New video marketing

 

diver カテゴリーのレイアウトは簡単:自動 + グリッドレイアウト
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を最低限必要なことをおぼえれば、あとは見出しを使うことも忘れないで下さい。

まとめ

 

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

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

 

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

 

BB公式登録キャンペーン

3つのプレゼント

限定特典

お得がもらえる

だけもれなく全員

BB公式LINE 限定

期間工募集中!
激アツ 情報

期間工最新情報、激アツ
トヨタ期間工 入社祝い金が UP 

 

入社祝い金 40
※ メーカーより特別手当 20  + 初回更新手当 20

 

経験者手当:最高10

 

年収例445以上可能 ※1年目

 

詳細は別記事で紹介している

 

募集、予約面接会場マップ、
他メーカー情報:
当サイトオリジナル

 

期間工、募集企業名 特典
トヨタ自動社 入社祝い金 40 【特別手当 20 + 20 初回更新

  • ◇満了慰労金+報奨金
    • 3ヶ月満了 122,000円(満了慰労金30,500円+満了報奨金91,500円)
    • 6ヶ月満了 390,400円(満了慰労金207,400円+満了報奨金183,000円)
    • 12ヶ月満了 488,000円(満了慰労金305,000円+満了報奨金183,000円)
    • 18ヶ月満了 512,400円(満了慰労金329,400円+満了報奨金183,000円)
    • 24ヶ月満了 536,800円(満了慰労金353,800円+満了報奨金183,000円)
    • 30ヶ月満了 561,200円(満了慰労金378,200円+満了報奨金183,000円)
    • 35ヶ月満了 576,000円(満了慰労金396,000円+満了報奨金180,000円)
豊田自動織機 ★★メーカーより入社特典総額55万円支給★★
【内訳】
■入社祝い金50万円
■赴任手当3万円
■食事手当2万円
※支給規定あり
トヨタ自動車九州 メーカーより入社祝い金 総額 40万円 ※規定あり
スバル、群馬製作所 入社特典最大55 メーカーからの支給
※入社祝い金や特典には規定があります。
応募や面接時に確認しましょう。
スポンサーリンク
おすすめの記事