Diverトップページカスタマイズマニュアル

このページでは、DEMOサイトのレイアウトを作成する手順を説明いたします。すべて標準の機能にて作成いたしますので、とても簡単です。
利用方法はだいたいわかっていて独自のレイアウトで作成したいという方は、このマニュアルは無視して作成してください。

 最新バージョンと若干違う場合がございますが、基本的には同じ作り方ですので、このページをヒントにしてください。また、作成の前に、Diverに更新通知がきていないか確認していただきまして、きている場合にはバージョンアップの対応をよろしくお願いいたします。

カスタマイズを始める前に


Diverでは、基本的には画像の素材等を用意していただかなくても、投稿さえあれば綺麗なサイトが作成できるようになっております。

うさP
おしゃれな写真ばっかり駆使してデモサイトを作っているのは、とてもかっこいいけど実際使った時のギャップがすごいんだよね。その点、Diverは用意する素材が全然無いから誰でもおしゃれに出来ちゃうって訳。

ネコD
そう、だから投稿が無いサイトは最低でも6記事くらいは作ってカスタマイズを始めた方がいいかも!カスタマイズはいつでも簡単に変更できるから気楽にいじっちゃおう!

うさP
記事には最低限アイキャッチ画像を設定しておこう!記事で彩るサイトは、アイキャッチ画像で雰囲気が決まるといっても過言では無い!
Point
  • 基本的に素材の準備は必要なし
  • 記事を最低でも6記事準備しておく
  • 記事にアイキャッチ画像を設定しておく

基本設定

フロントページについて

WordPressでは、フロントページを記事一覧にするか、固定ページにするか選択できます。

カスタマイズ > 固定フロントページ へ移動して、最新の投稿にチェックが入っている状態にしてください。

1ページの投稿表示数について

管理画面 > 設定 > 表示設定 > 1ページに表示する最大投稿数 から変更が可能です。

記事一覧ページでは、記事の表示数が決まっております。お好きな数字で構わないのですが、グリッド表示の場合に、綺麗に表示するには少し考える必要がありますね。

ヘッダーカスタマイズ

サイトロゴ・サイトタイトル・キャッチフレーズ


サイトには、タイトルとキャッチフレーズを設定する必要があります。これはとても大事な要素で、訪問者にとっても検索エンジンにとってもどんなサイトかを説明してくれる重要な要素です。手を抜かずに設定しましょう。

ロゴ画像を使用していない場合


カスタマイズ > サイト基本情報 から設定できる各項目が対応しております。それぞれあまり長すぎるとレイアウト崩れの原因になりますので、完結に設定すようにしてください。

ロゴ画像を使用する場合


カスタマイズ > サイトロゴ・アイコン で設定した画像が表示されます。

うさP
サイトのロゴが変わるだけで一気に印象が変わりますね!気分も上がって運営がよりたのしくなりそう!
アドバイス
サイトタイトルやキャッチフレーズを完結に書いた時に、SEO対策で若干伝わりづらい場合があります。その時には、検索エンジンだけに伝える文章を設定しましょう!

管理画面 > Diverオプション > SEO設定 からサイトタイトルとサイトの説明を入力してください。
この項目で設定されたものは、ソースコード上で表示されるものになりますので、通常では目に触れることはありません。表示するサイトロゴやキャッチフレーズは簡潔でも、実際にはしっかりと内容が伝わるようなサイト情報が送信可能になります。

ロゴの横のボタンについて

まず、カスタマイズ > メイン設定 > ナビゲーション設定 > メニュー独立に設定します。
そうすると、ヘッダーロゴにあったメニューが独立表示されて、ヘッダーロゴの右というウィジェットエリアが利用可能になります。

ここにテキストウィジェットを利用して、ボタンを表示するHTMLを記述して保存します。

下記、DEMOサイトでの記述を参考にしてみてください。

<div class="button" style="display:inline-block">
<a href="https://tan-taka.com/diver/" style="color:#070f33;background:#fff;"><i class="fa fa-shopping-cart" aria-hidden="true"></i>  
 Diver紹介ページ</a>
</div>
<div class="button" style="display:inline-block">
<a href="https://tan-taka.com/diver/contact" style="color:#070f33;background:#fff;"><i class="fa fa-envelope" aria-hidden="true"></i>    お問い合わせ</a>
</div>

メインナビゲーションについて

DiverDEMOサイトでは、独立メニューに設定しているので、上記画像のような表示になりますが、ロゴと並立にした場合には、ロゴの横にメニューが表示されます。

まず、管理画面 > 外観 > メニュー で新規メニューを作成してください。固定ページやカテゴリーを追加してメニューを作成します。項目が多すぎても、レイアウトが空れてしまいますので注意してください。

作成したメニューのメニューの位置をヘッダーのナビゲーションにチェックをいれます。

他のメニューも同じような手順で作成することができます。

ファーストビュー設定


サイトで一番目立つファーストビューの設定です。

管理画面 > Diverオプション > ファーストビュー設定 から設定することが可能です。

ファーストビュー設定で設定することができるものは下記の通りです。

  • シンプル背景スタイル
  • ピックアップスライダー
  • 画像(背景画像 or ヘッダー画像)
  • 動画(Youtube or アップロード動画)

表示したい項目に指定してある情報を入力するだけで簡単に実装することができます。

中のコンテンツの設定も、テンプレートから完全にカスタムなど様々な表示が可能になります。

うさP
サイトの顔になる部分だからこだわりたいですね!難しい設定が必要ないからいろいろなサイト作成に役立つこと間違いなし!

ピックアップスライダー


トップページに表示されているスライダーの設定です。このスライダーは、投稿ページでも表示されているものと同じです。


まずは、カスタマイズ > メイン設定 > スライダー記事 設定してある文字列を確認してください。このタグが設定してある投稿が自動的にスライダーに追加されます。上記画像ではpickupが設定されています。(初期値もpickupです。)


投稿ページのタグに、先ほどの設定されていた文字列をタグに設定します。

同じ要領で、複数の記事にも同じタグを設定してスライダーの記事を増やしてください。
以上で、ピックアップスライダーの作成ができます。

タブウィジェット

タブウィジェットを、作成してトップページ上部に設置しています。

テキストウィジェットの中身は下記のようになっております。
記事一覧ショートコードを利用してカテゴリーごとに表示しております。

<div style="padding: 0 .8em .6em; color: #0b3c73; font-size: 1.2em; border-bottom: 3px solid #3b5c82; font-weight: bold; margin-bottom: 20px;">メイン設定</div>
<div class="article_col">[article num="12" order="post_date" category="81"]</div>
<div style="text-align: right;"><a href="https://tan-taka.com/diver-demo/category/manual/mainseting">もっと見る→</a></div>

下記CSSをコピペで同じようなデザインにすることが可能です。
カスタムCSSや子テーマのstyle.cssに追加してください。

.article_col .sc_article_title{
	width:100%;
}

.article_col ul li {
    width: 33.3%;
    display: inline-block;
	border-bottom:none !important;
}

.article_col ul li a{
	padding:.5em;
	font-size: 1.1em;
    font-weight: bold;
    color: #3d7fbb;
	   background: #f9f9f9;
    border-radius: 3px;
	 overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media screen and (max-width:768px){
	.article_col ul li {
    width: 100%;
}
}

ピックアッピカテゴリー


一覧とは別に目立たせたいカテゴリーを独立して表示させる機能です。これは非常に簡単です。


カスタマイズ > メイン設定 > ピックアップカテゴリー で表示したいカテゴリーを選択するだけです。
プレビューで表示されたのがわかると思います。

 ピックアップカテゴリーで選択しているカテゴリーは、重複回避のため、記事一覧には表示されなくなります。

固定記事


固定記事は、記事の更新日に関わらずにトップページに固定して表示される記事のことです。


投稿ページで、公開 > この投稿を固定表示 というチェックボックスにチェックを入れて、保存すると表示されます。

 

記事一覧レイアウト

サイドバー


サイドバーには、様々な項目を入れることができます。基本的にウィジェットにて入れることになります。

アイコンメニューの作り方


デモサイトには、メニューの先頭にアイコンを表示しているウィジェットが確認できるかと思います。これは、テキストウィジェットにHTMLを記述して実現しております。
下記を参考にしてみてください。

<ul>
<li><a href="https://tan-taka.com/diver-demo/powered/1862"><i class="fa fa-birthday-cake" aria-hidden="true"></i>ランキング作成</a></li>
<li><a href="https://tan-taka.com/diver-demo/powered/1864"><i class="fa fa-comments-o" aria-hidden="true"></i>
口コミ作成</a></li>
<li><a href="https://tan-taka.com/diver-demo/powered/1970"><i class="fa fa-users" aria-hidden="true"></i>
会話作成</a></li>
<li><a href="https://tan-taka.com/diver-demo/powered/1979"><i class="fa fa-quora" aria-hidden="true"></i>
Q&A作成</a></li>
<li><a href="https://tan-taka.com/diver-demo/powered/1883"><i class="fa fa-list" aria-hidden="true"></i>
記事リスト作成</a></li>
</ul>
あなたはそのサイトで満足していますか?

サイトはただ作るだけで満足ですか?あなたのコンテンツはとっても有益なものがたくさんあります。よいコンテンツも埋もれてしまっては全く意味がありません。
Diverを使えば、SEO対策はもちろん、ユーザビリティーを考えられたデザインで、サイト回遊率、直帰率、再訪問がアップします。アフィリエイターだってブロガーだって関係無しです!!しかし、スケールの小さいサイトを量産するような方法には向いていません。サイトを育てて、長い間愛されることの出来るコンテンツを作成出来るのは、このDiverだけです。