WordPressを始めた初心者のあなたはカスタマイズをどうすれば良いかさっぱりわからないと思いませんか？
管理人はWordPressを始めた時は全くわかりませんでした。
何をどうすれば良いのかネットで調べることから始めました。
でもネットの解説で気をつけるところが１つだけあります。
それは WordPressが何度もアップデートされてネットの解説画像とあなたの WordPressが違う場合があるという事です。
ネットと違う場合は「本当にこれで大丈夫？」と不安になります。
管理人も最初はそうでした。
WordPressが更新されている場合は古い記事と現在の内容が違う事が原因です。
このコンテンツは WordPressの旧エディターではなくブロックエディターを使ったカスタマイズを解説したコンテンツです。
旧エディターでカスタマイズ解説をした記事が多いのですがこのコンテンツではブロックエディター（Gutenberg）でカスタマイズすることを前提に書いています。
そこを踏まえた上で WordPressテーマdiverのカスタマイズ手順をご案内します。
管理人がdiverを選んだ理由は1度購入すれば何度でも使える事とサポートの充実です。
- WordPressのブロックエディターのカスタマイズ がわかる
- カスタマイズの前にやる事がわかる
- diverのカスタマイズ手順がわかる
WordPressカスタマイズをブロックエディターで始める
WordPressをGutenbergでカスタマイズする
最初にこのコンテンツは全て WordPressブロックエディターでカスタマイズすることを前提に書いています。
古い記事だと旧エディターでの解説記事が多いので現在 WordPressのブロックエディターを使っている方は古い記事を参考にするとパニくるかもしれません。
WordPressをブロックエディター（gutenberg)にしている場合は古いネット記事と内容がかなり違います。
理由は古い記事は旧エディターでのカスタマイズ解説が多いからです。
ブロックエディターは2019頃から使われるようになりましたが、それ以前の記事は旧エディターで書かれていて使える機能などがかなり違います。
管理人がブログを始めた時にちょうどブロックエディターに変わったため調べる記事のほとんどが旧エディターでの解説記事ばかりでした。
どれを見ても自分のWordPressと違いネットと同じようにならず困りました。
ブロックエディター（Gutenberg）がわからない場合は下記の記事を先に読むと理解できます。
WordPressの新エディター「グーテンベルグ」の使い方をレビューはこちらから
WordPressテーマdiverのカスタマイズの準備をする
diverを購入して WordPressにインストール
まず最初にカスタマイズに必要なテーマDiverをダウンロードするところからスタートします。
Diverはこちらの公式サイトで詳細を確認してから購入する流れになります。
- Diverを購入（インフォトップで決済）
- Diverをダウンロード
- Diverを WordPressにアップロード
- Diverをインストール
- Diverをカスタマイズ
最初にDiver公式サイトで充分に確認してみましょう。
Diverを購入して WordPressにインストールするまでの流れが分からない方は下記のリンクで解説していますのでどうぞ。
WordPressテーマDiverをMacでインストールする手順で詳しく解説しています。
Diverのインストールができたら早速カスタマイズをしていきましょう。
カスタマイズするのはDiverの子テーマです。ここは間違えないよう確認しましょう。
diver_child「子テーマ」をカスタマイズする手順
ダッシュボードで作業を始める
diverを有効化すると最初にdiverで WordPressへのログインが必要です。ログイン後は上記の画像のダッシュボードが開きます。
ダッシュボードを開いたらカスタマイズはボードの下から5番目の外観をクリックして始めます。
外観をクリックすると、テーマ、カスタマイズ、ウィジェット、メニュー、テーマの編集と表示されますのでカスタマイズをクリックします。
すると下記のページが表示されますので、それぞれのカスタマイズを行います。
下記画像はカスタマイズメニューの拡大画像です。
Diverは初心者でも簡単にカスタマイズ可能
カスタマイズは上記画像のカスタマイズメニューで操作します。
注意点はカスタマイズメニューの上から2番目にdiver_childと表示されているか確認しましょう。
必ずダッシュボードの左上に表示されている部分がチャイルドと表示されていれば問題なくカスタマイズできます。
これは他のブログでチャイルドでカスタマイズせず親テーマでカスタマイズしたら記事が全部消えた人がいたので間違えないように確認しましょう。
Diverのトップページをカスタマイズする
まずはサイトアイコンからカスタマイズしましょう。この順番通りではなくても全く問題ありませんが、上から順番にご案内させて頂きます。
またサイトアイコンとはブラウザを表示した時にサイトタイトルの横やブックマークなどに小さく表示されるアイコンです。
自分のブログのマークみたいなものです。管理人は当初適当な画像を貼っていましたがサイトイメージを作ってからはアイコンを変更しました。
アイコンはCool Textと言うアメリカの会社が無料のジェネレーターを提供していますので、そこからダウンロードして加工して作りました。
この方法も詳しく説明されているサイトがあるので詳しく知りたい方は参考にしてください。
Diverメイン設定
メイン設定ではナビゲーションメニュー（下記画像の赤枠で囲われたところ）（トップ）（サイトマップ）などの部分をカスタマイズ。
ここはロゴと並列だと上のBANIRAWORLDの横に表示されますが、メニュー独立を選んだため下側の赤枠の部分に表示されています。
これはやって見ると文字が入力されたり消したり出来るので超初心者でもすぐにわかると思います。
結構デフォルトのままでも問題なく表示されていますのでデフォルトで作ってみて、それから少しづつカスタマイズでも良いと思います。
Diver投稿ページ
ここは結構デフォルトで良いと思います。
公開日の表示や更新日を表示など投稿のページのカスタマイズですが’超初心者にはあまり良く分からないため変にカスタマイズするより、デフォルト行きましょう！
Diver基本カラー
カラーは何度も色を変更して試しましょう。サイトの色を変更しても目立つとこならすぐに分かります。
しかし投稿内リンクやマウスオン時など色を変更してもどこが変わったかがすぐには分かりません。
何度も色の変更をするとどこの色が変わったかが分かるようになります。
背景や文字の色はすぐに分かりますが、マウスオン時などはサイトの上をマウスで触って初めて設定した色に変わるため何度もしないと超初心者には分からないかもしれません。
設定時は薄い似たような色よりも、赤や黒、白といったはっきりした色の方が分かりやすいと思います。
Diverサイズ設定
サイズも基本的にデフォルトのままで良いと思います。
実際何度かサイズを変更してカスタマイズしてみましたがデフォルトの方が良かったので戻しました。
Diverレイアウト設定
レイアウトはサイトのイメージを決める為に非常に重要だと思います。
見やすさや、どこに何を配置するかなど人気ブログなどを参考にしてレイアウトすると良いと思います。
しかし超初心者には記事のリスト表示？グリッド表示って何？ミニリストって？となるかもしれません。
色々と変更してレイアウトを変更してみましょう。
心配しなくてもしばらくは誰も見るひとはいないから何度でも変更しましょう。
何度も試して自分の見やすいレイアウトを試してみてください。
Diverデザイン設定①
デザインの設定①では記事ブロックの要素やニューラベルなどのデザインを設定出来ます。
サムネイルのズーム機能などを設定出来ます。ここは超初心者でも簡単に設定出来るのでどんどん挑戦しましょう。
Diverデザイン設定②
このデザイン②の設定は記事の見出しの文字色は基本色などの設定になります。
超初心者にも優しいカスタマイズが出来ます。
最初はどこの色が変わったか分かりませんが極端な色、例えば赤や青などにして投稿記事を書くと設定した色で文字が表示されていますので、どこを設定したか分かります。
Diverカテゴリー設定
カテゴリーはタイトル表示や関連タグ、カテゴリーの色を設定します。
DIVERの記事に表示されるカテゴリーの色などを設定できます。
何度でも色を変えてみてどのイメージに合うか試してみましょう。
Diverサイトロゴ・アイコン
サイトロゴやアイコンはサイトのイメージには大事なのでかっこよくデザインしましょう。
先ほどもサイト基本設定でも言いましたがアイコンを作成してダウンロード出来るアメリカの会社があるのでそこでロゴを作ってかっこよくサイトをデザインしましょう。
もちろん日本の会社などもありますが私はアメリカのCool Textと言う会社からダウンロードしました。会員登録不要で無料です。超初心者でもここは頑張りましょう。
Diverメニュー
メニューについては画像が100万ブログのトップページですが赤枠の部分がメニューです。
メニューの設定は上記で説明したナビゲーションメニューの設定です。
ここはメニューの設定も大事ですが、お問い合わせやプロフィールなど固定ページの作成も必要になる為、何をメニューに設定するかも重要になってきます。
初心者のころに管理人もお問い合わせメニューは作りましたが、クリックしてみたら、お問い合わせタイトルしか記載されてない固定ページが表示されたりしました。
ひとつひとつ完成させていけばブログを公開しても恥ずかしくありません。
Diverのウィジェット
ウィジェットは検索ボックスやカテゴリー表示などサイドバーやサイト下部などに表示するものです。
レイアウト設定でサイドバーを設定しましたが右側や左側に表示させて、そこに検索窓やカテゴリーリストなどを設置可能です。
それ以外にもビッグフッターやスマホのドロワーメニューなどもここで設定出来ます。
スマホを見ればサイドバーなどどのように表示されているかも確認できます。
スマホで見なくてもカスタマイズページの左下のコントロールと記載されたところにPCやタブレット、スマホから見た表示に出来ますのでそこを見ても良いです。
diverのホームページ設定
ここは超初心者はデフォルトで良いと思います。デフォルトでは最新の投稿にチェックが入っています。
いずれはカスタマイズすることもあるかもしれませんね。
diverの追加CSS
ここは超初心者にはあまり関係ないかと思います。なぜならカスタマイズもままならないのにサイトのレイアウト自体をカスタマイズなんて無理ですから。
それよりもっと通常のカスタマイズを勉強して良い記事を書きましょう。
アフィリエイター収益最大化!最新SEO対策済み!wordpressテーマ「Diver」
まとめ
初心者でもワードプレステーマdiverのカスタマイズに慣れれば問題なく出来る事をこのブログで確認して下さい。
WordPressでブログを始めるにあたりカスタマイズが必要ですがDiverはなるべく短時間でカスタマイズできてブログを書くことに集中できるテーマですね。
Diverは設定も簡単なので覚えればスムーズにカスタマイズできます。
Diverの使い方がわからない場合はカスタマイズ記事も多いし、問い合わせができる事が最大のメリットです。
diverの入力補助機能について詳しくまとめた記事を準備しました。diverでブログ作成するときにとても便利で捗ります。詳しくは下記の「diver入力補助まとめ」から読むことができます。
![[WordPress] Diver入力補助の使い方まとめマニュアル！[Gutenberg]編](https://100manblog.com/wp-content/uploads/2019/08/laptop-593673_640.jpg)
![[WordPress]Diverの評判をレビュー！1年半以上使用している5つの理由](https://100manblog.com/wp-content/uploads/2019/03/1fmlxrJcSaSz29vxW6aazw_thumb_fcaa-150x150.jpg)
![[WordPress]Diver入力補助「トグル」の使い方[Gutenberg]編](https://100manblog.com/wp-content/uploads/2019/07/wordpress-589121_640-150x150.jpg)
