本ページはプロモーションが含まれています

pickup
WordPressテーマ「Diver」カスタマイズ手順まとめ!(Gutenberg編)

当サイトはアフィリエイト広告を利用しています

ばにら営業部長
こんにちは!この記事はブロックエディターを使っている人向けの記事だよ

WordPressを始めた初心者のあなたはカスタマイズをどうすれば良いかさっぱりわからないと思いませんか?

管理人はWordPressを始めた時は全くわかりませんでした。

何をどうすれば良いのかネットで調べることから始めました。

でもネットの解説で気をつけるところが1つだけあります。

それは 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をダウンロード
  • Diverを WordPressにアップロード
  • Diverをインストール
  • Diverをカスタマイズ

最初にDiver公式サイトで充分に確認してみましょう。

Diverを購入して WordPressにインストールするまでの流れが分からない方は下記のリンクで解説していますのでどうぞ。

WordPressテーマDiverをMacでインストールする手順で詳しく解説しています。

Diverのインストールができたら早速カスタマイズをしていきましょう。

カスタマイズするのはDiverの子テーマです。ここは間違えないよう確認しましょう。

diver_child「子テーマ」をカスタマイズする手順

diver

ダッシュボードで作業を始める

diverを有効化すると最初にdiverで WordPressへのログインが必要です。ログイン後は上記の画像のダッシュボードが開きます。

ダッシュボードを開いたらカスタマイズはボードの下から5番目の外観をクリックして始めます。

外観をクリックすると、テーマ、カスタマイズ、ウィジェット、メニュー、テーマの編集と表示されますのでカスタマイズをクリックします。

すると下記のページが表示されますので、それぞれのカスタマイズを行います。

下記画像はカスタマイズメニューの拡大画像です。

Diverは初心者でも簡単にカスタマイズ可能

カスタマイズは上記画像のカスタマイズメニューで操作します。

注意点はカスタマイズメニューの上から2番目にdiver_childと表示されているか確認しましょう。

必ずダッシュボードの左上に表示されている部分がチャイルドと表示されていれば問題なくカスタマイズできます。

これは他のブログでチャイルドでカスタマイズせず親テーマでカスタマイズしたら記事が全部消えた人がいたので間違えないように確認しましょう。

ばにら営業部長
初心者にはありがちな勘違いだよね

ばにら営業部長
ちゃんとChildになっていれば大丈夫だよ

Diverのトップページをカスタマイズする

まずはサイトアイコンからカスタマイズしましょう。この順番通りではなくても全く問題ありませんが、上から順番にご案内させて頂きます。

またサイトアイコンとはブラウザを表示した時にサイトタイトルの横やブックマークなどに小さく表示されるアイコンです。

diver

自分のブログのマークみたいなものです。管理人は当初適当な画像を貼っていましたがサイトイメージを作ってからはアイコンを変更しました。

アイコンはCool Textと言うアメリカの会社が無料のジェネレーターを提供していますので、そこからダウンロードして加工して作りました。

この方法も詳しく説明されているサイトがあるので詳しく知りたい方は参考にしてください。

ばにら営業部長
アイコンはブログの顔だからよく考えよう

Diverメイン設定

diver

メイン設定ではナビゲーションメニュー(下記画像の赤枠で囲われたところ)(トップ)(サイトマップ)などの部分をカスタマイズ。

ここはロゴと並列だと上のBANIRAWORLDの横に表示されますが、メニュー独立を選んだため下側の赤枠の部分に表示されています。

これはやって見ると文字が入力されたり消したり出来るので超初心者でもすぐにわかると思います。

結構デフォルトのままでも問題なく表示されていますのでデフォルトで作ってみて、それから少しづつカスタマイズでも良いと思います。

ばにら営業部長
トップページのメインのところだから慎重に作ろうね

Diver投稿ページ

diver

ここは結構デフォルトで良いと思います。

公開日の表示や更新日を表示など投稿のページのカスタマイズですが’超初心者にはあまり良く分からないため変にカスタマイズするより、デフォルト行きましょう!

Diver基本カラー

diver

カラーは何度も色を変更して試しましょう。サイトの色を変更しても目立つとこならすぐに分かります。

しかし投稿内リンクやマウスオン時など色を変更してもどこが変わったかがすぐには分かりません。

何度も色の変更をするとどこの色が変わったかが分かるようになります。

背景や文字の色はすぐに分かりますが、マウスオン時などはサイトの上をマウスで触って初めて設定した色に変わるため何度もしないと超初心者には分からないかもしれません。

設定時は薄い似たような色よりも、赤や黒、白といったはっきりした色の方が分かりやすいと思います。

ばにら営業部長
はっきりした色の方がマウスオンしたことがはっきりわかるよ

Diverサイズ設定

diver

サイズも基本的にデフォルトのままで良いと思います。

実際何度かサイズを変更してカスタマイズしてみましたがデフォルトの方が良かったので戻しました。

ばにら営業部長
管理人は最初の頃はサイズを何度も変更したよ

Diverレイアウト設定

diver

レイアウトはサイトのイメージを決める為に非常に重要だと思います。

見やすさや、どこに何を配置するかなど人気ブログなどを参考にしてレイアウトすると良いと思います。

しかし超初心者には記事のリスト表示?グリッド表示って何?ミニリストって?となるかもしれません。

色々と変更してレイアウトを変更してみましょう。

心配しなくてもしばらくは誰も見るひとはいないから何度でも変更しましょう。

何度も試して自分の見やすいレイアウトを試してみてください。

ばにら営業部長
心配は不要だよ!初心者のサイトは誰も見ていないので失敗をしても大丈夫!

Diverデザイン設定①

diver

デザインの設定①では記事ブロックの要素やニューラベルなどのデザインを設定出来ます。

サムネイルのズーム機能などを設定出来ます。ここは超初心者でも簡単に設定出来るのでどんどん挑戦しましょう。

ばにら営業部長
簡単な事は躊躇せずどんどんやろう

Diverデザイン設定②

diver

このデザイン②の設定は記事の見出しの文字色は基本色などの設定になります。

超初心者にも優しいカスタマイズが出来ます。

最初はどこの色が変わったか分かりませんが極端な色、例えば赤や青などにして投稿記事を書くと設定した色で文字が表示されていますので、どこを設定したか分かります。

ばにら営業部長
多少変な色になっても心配はいらないよ。だって初心者のブログは誰も見ていないからね

Diverカテゴリー設定

diver

カテゴリーはタイトル表示や関連タグ、カテゴリーの色を設定します。

DIVERの記事に表示されるカテゴリーの色などを設定できます。

何度でも色を変えてみてどのイメージに合うか試してみましょう。

ばにら営業部長
ブログを見るたび色が変わっていても心配不要。最初はブログを誰も見ていないので失敗を恐れずガンガンとカスタマイズしよう!

Diverサイトロゴ・アイコン

diver

サイトロゴやアイコンはサイトのイメージには大事なのでかっこよくデザインしましょう。

先ほどもサイト基本設定でも言いましたがアイコンを作成してダウンロード出来るアメリカの会社があるのでそこでロゴを作ってかっこよくサイトをデザインしましょう。

もちろん日本の会社などもありますが私はアメリカのCool Textと言う会社からダウンロードしました。会員登録不要で無料です。超初心者でもここは頑張りましょう。

ばにら営業部長
ここは管理人も頑張っていたよな

Diverメニュー

メニューについては画像が100万ブログのトップページですが赤枠の部分がメニューです。

メニューの設定は上記で説明したナビゲーションメニューの設定です。

ここはメニューの設定も大事ですが、お問い合わせやプロフィールなど固定ページの作成も必要になる為、何をメニューに設定するかも重要になってきます。

初心者のころに管理人もお問い合わせメニューは作りましたが、クリックしてみたら、お問い合わせタイトルしか記載されてない固定ページが表示されたりしました。

ひとつひとつ完成させていけばブログを公開しても恥ずかしくありません。

ばにら営業部長
初心者の気持ちは誰しも自分の初心者丸出しのブログが恥ずかしいと思っている!でも1つずつ完成させていけば大丈夫だよ

Diverのウィジェット

diver

ウィジェットは検索ボックスやカテゴリー表示などサイドバーやサイト下部などに表示するものです。

レイアウト設定でサイドバーを設定しましたが右側や左側に表示させて、そこに検索窓やカテゴリーリストなどを設置可能です。

それ以外にもビッグフッターやスマホのドロワーメニューなどもここで設定出来ます。

スマホを見ればサイドバーなどどのように表示されているかも確認できます。

スマホで見なくてもカスタマイズページの左下のコントロールと記載されたところにPCやタブレット、スマホから見た表示に出来ますのでそこを見ても良いです。

ばにら営業部長
スマホから見たブログは大事だからよーくチェックした方がいいよ

diverのホームページ設定

ここは超初心者はデフォルトで良いと思います。デフォルトでは最新の投稿にチェックが入っています。

いずれはカスタマイズすることもあるかもしれませんね。

diver

diverの追加CSS

ここは超初心者にはあまり関係ないかと思います。なぜならカスタマイズもままならないのにサイトのレイアウト自体をカスタマイズなんて無理ですから。

それよりもっと通常のカスタマイズを勉強して良い記事を書きましょう。

ばにら営業部長
じゃあ、みんな頑張って良い記事を書いてね〜

アフィリエイター収益最大化!最新SEO対策済み!wordpressテーマ「Diver」

まとめ

初心者でもワードプレステーマdiverのカスタマイズに慣れれば問題なく出来る事をこのブログで確認して下さい。

WordPressでブログを始めるにあたりカスタマイズが必要ですがDiverはなるべく短時間でカスタマイズできてブログを書くことに集中できるテーマですね。

Diverは設定も簡単なので覚えればスムーズにカスタマイズできます。

Diverの使い方がわからない場合はカスタマイズ記事も多いし、問い合わせができる事が最大のメリットです。

diverの入力補助機能について詳しくまとめた記事を準備しました。diverでブログ作成するときにとても便利で捗ります。詳しくは下記の「diver入力補助まとめ」から読むことができます。

Twitterでフォローしよう

おすすめの記事