はい、それでは今回はWordPressのカスタマイズ講座というテーマで解説を進めます。
この動画でわかることですね。 メニュー、括弧グローバルメニューの設定法がわかります。
ビジットですね、サイドバーの設定法がわかります。 最後にページ内のレイアウトを組む方法がわかります。
こういった内容で解説を進めていきます。 はい、WordPressのカスタマイズとは一体どういうことなのかと言いますと、
カスタマイズの方法というのはいくつかあります。 一つ目、標準でついているもの、できるものですね。
標準機能だけでできるもの。 あとはWordPressテーマを使用して初めてできるものですね。
あとはWordPressプラグインを使用して初めてできるものになります。 今回はですね
標準でできるものに絞ってお伝えします。 これをメインとしてお伝えします。
最近ですとこのテーマの割合というものが結構大きくなっています。 テーマでできる設定ですとか
できるレイアウト、デザインだったりとか そういうものが結構
大きく占めてるんですけど、トレンドとか ハイアリストリがあるので
まずここを押さえてですね、標準機能の部分を押さえてからそういうのに手を出してください。 プラグインも同様ですね。
開発が止まってしまったりとか、これも ずっと続くものかわからないので、まずはここから
覚えていただきたいと思います。 これを知っていればですね、テーマ独自の機能ですとか設定とか
そういったものも 使えるようになりますので
そのように進めてください。 標準機能でできることですね、これをまとめてみました。
まずメニューですね。 メニュー盤の設定、ビジットサイト盤の設定
最近ですとこういったものもあります。 ブロックエディターというものですね。
以前のものがクラシックエディターと言います。 プラグインを使うことによって以前のエディターで編集ができるんですけど
最近標準だとこれですね。 クラシックエディターも
慣れている方は編集がしやすいんですけど、 このブロックエディターを覚えることによってですね
レイアウトを組めたりとか、そういうことができるようになります。 これからこっちを覚えた方が
何かといいと思いますので、これをお伝えします。 あとは設定の中に表裏設定というものがあるんですけど、それの
流れですね。これも覚えておくと結構 編集の幅が広がるというので、任意のページをですね、トップページに設定することができます。
トップページを任意のページに設定することが可能です。
これでしたらテーマに依存せずですね、 できますし
当然プラグインにも依存しないといった形になりますね。 なので
これを覚えていきましょう。特にこのブロックエディターですね。 ブロックエディターを中心に
編集方法をお伝えしていきたいとおもいます。
メニューの設定方法ですね。 これをお伝えします。
基本的なところなんですが、この動画から初めて知るという方もいると思うので、
ちょっとお伝えしていきたいとおもいます。 まずこれっていうのはカニ画面上の外観というとこから
項目からメニューというものがありますので、そこをクリックして設定画面に進むという そういった設定方法になります。
具体的な設定方法は実際の画面は後ほどお見せします。
配置の例としまして、こういうものですね。 メニューバーのとこなんで、こういうものがあると
いいかなというとこなんですが、まず会社名とはというページに移動する項目。 理念とかそういうものが記載されたページですね。
まずその会社の実態とかコンセプトなんかを確認して、 その上で
なぜ選ばれるのか、そういう理由を述べて確認してもらって、 具体的な商品サービスを知ってもらって、
ブログ記事ですね、こういう情報発信もしてるんですよっていうのも信頼なので、 見てもらって、その上で
お客様の声ですね、実際に関わった人の声を聞いて、 信頼できるんだなというところですね、確認してもらう。
よくある人も疑問点を払拭してもらって、 CTA としてお問い合わせですね。
というのがメジャーな配置例になります。 当然この中に
CTA としまして無料オファーですね。 そういったものを紹介するページ、リード獲得ページなんかを配置する
というのもいいわけなんですが、 メジャーな配置をちょっとお伝えしました。
設定方法さえわかってしまえば、これも自由にカスタマイズができるので、 あくまで一例だと思ってください。
ということで実際の画面をお見せします。 では実際の画面を解説していきたいと思います。
こちらの今カーソルで動かしている箇所が メニューバーが表示される位置になります。
これも覚えておいてほしいのが、 WordPress テーマによってはこっちに
表示することもできるものがあります。横ですね。 あとはこのサイトのタイトルですね、上に
表示される、表示してくれるテーマもあります。 ということなので基本的にはこのヘッダーの部分ですね。
ブログ記事一覧ですね。これはちょっとゴミった操作になってくるので、 この後お見せします。
あとはよくある質問、問い合わせ、こういったところですね。
お客様の声ですね。 この間にブログ記事一覧が入ってくるという感じです。
注意してほしいのはここですね。 だいたい反映されませんという方、
ここにチェックが入ってないです。 この項目自体もですね、ワードプレステーマによって微妙に変わってくるので、
なのでよく読んでください。ヘッダーとかフッターとか、 必ず文言の中に含まれていると思いますので、
その意味合いとかですね、だいたいわかると思います。 ヘッド、頭の部分ですね。フッターですね。
下の部分。
というように、 よく読んでいただければOKです。チェックを入れてください。
保存ですね。出ないと反映されないです。 というのがあるあるなので覚えておいてください。
反映されるとどうなるかと言いますと、 こうなりますね。会社名とはですね、
選ばれる理由、商品サービス、お客様の声、 よくある質問、お問い合わせ。ちゃんと反映されてますね。
あとここの文言がですね、結構長くなってしまうと 賑やに改良されてしまって、ここの幅が
ちょっと広がってしまって、すごくダサい デザインになってくるので、それは下げたほうがいいです。
なのでここの文言は、 極力短めにするっていう感じですね。
もし長くなってしまう場合は、 このナビゲーションラベルですね。ここももしかしたら
テーマにて違う可能性もこれから出てくると思うので、 ここだけですね、ラベルを設定するっていうことを
具体的に覚えるっていうよりとは、 ざっくりと覚えていただいて、ここを編集すれば
こっちにも反映されますよっていうことを覚えておいてください。 例えば、このように設定することによって
こっちにもこのように反映されますねっていうものです。 あとフッターもですね、設定できます。
フッターとしましては、会社がいいよとかそういったものを設定してください。 設定方法は同じなので割愛します。
その場合はこのように新しいメニューを追加してください。 今回フェッターだったんですけど、フッターですねにして
この会社名とはに、カスタマイズした内容を配置していきます。
ということで、これがトップになるわけですね。 このホームページっていうところに
作成した固定ページのタイトルを設定することによって、 それがトップになって配置されます。
投稿ページというところを選択で、 先ほど作ったブログ記事一覧ですね。
にすると、これメニュー設定ですね。 外観からメニュー。
ここで全て表示。 ブログ記事一覧にチェック。メニューに追加ですね。
メニューを保存ですね。 ここにブログ記事一覧というのが表示されました。
するとここが、 先ほどトップにあったものがですね、メニューとして追加されるっていうものになります。
ちょっとややこしいんですけど、 先ほど説明したトップですね。
これ固定ページになっていまして、 固定ページになっていますね。
ただそれだとブログ記事が表示されなくなってしまうので、 メニューに追加しました。
先ほどの操作をすると、このように メニューの方に配置されます。
最新の記事は一覧となって表示されるっていうものですね。 これをやらないと、このしかりに
トップページにですね、こういったオリジナルのページを設定した場合にですね、 ブログ記事がなくなってしまうので、
このようにしました。最近ですと、 ホームページとブログっていうのは一体型になっているので、
情報発信をしていないと、なかなか選ばれにくかったりするので、 こういう設定をしています。
一緒になって解除してしまいましたが、 表裏設定のとこから
ホームページ、2のページのタイトルを選択で保存で、
トップに設定できます。 ということですね。
これで必要な要素ですね、あった方がいい要素はすべて揃いましたね。 まとめると、
概言からメニューで設定ができます。
要素をどの固定ページか追加していってください。 このブログ記事一覧っていうのがちょっと
込み入った操作になったぐらいですね。 あと2種類作成しました。ヘッダー用、フッター用ですね。
これっていくつか作成できますので、といってもヘッダー、フッターぐらいですね。
このチェックを必ず入れるようにしてください。 これが入ってないと反映されないです。
ここいくらクリックしてもですね。 ということだけ覚えておいてください。
以上がメニューの設定になります。 次はビジットの設定法ですね。
これはサイドバーの設定法になります。 先ほどのメニューと同じように外観の項目の中に
管理画面移動できるものがあります。 これを配置の例としまして、
検索窓ですね。
あとCTA、リード獲得ページとかメルマガ登録ページに移動させます。
カテゴリーアーカイブとかですね。 他にも
これワードプレスのテーマに依存してしまう部分なので、今回省略したんですけど、プロフィールですね。
こういう要素があったら使いましょう。 プロフィールがあると見栄えも良くなります。
他にも人気記事とかですね。プラグインに 依存してしまったりとか、そもそもテーマに標準で付いているというものもあります。
はい。 なので、
あったらでいいですが、
はい。 こういうのがあるとより良いですねというので、標準でできるものだとこういうものですね。
これだけも必要十分ですが、あるとより良いというのがこういうものですね。
ということでこれも実際の画面をお見せしていきます。 では、Visitの方の
実際の画面をお見せしていきます。 この外観の中にVisitという項目があります。
これが設定画面ですね。 このサイドバーという箇所が、Visitというのはサイドバーの設定なので、他にも
フッターとかそういったものの要素があります。設定ができます。
サイドバーがここ、フッターは先ほどのメニューとはちょっと違って、こういったところに
いろいろ配置ができる。例えばバナー画像を配置したりとかもできますよというものですね。
これも覚えておくと便利かなといったところで、この項目自体もですね
結構テーマによってバラツキがあります。
もっとたくさんあったりとか、要素がたくさんあったりとか
そういったものです。 大体はサイドバーとフッター
他にも、こういう広告とかですね
アドセンスとかそういったものの設定ができます。
主にサイドバーの設定ができるということだけ覚えておいてください。フッターまで考えてしまうと結構
難しく感じるかなと思うので、サイドバーだけで ok です。 ということで主に設定配置の例としましてはこういうものですね。
検索窓、CTAですね。バナー画像をクリックすると
ページに移動する。 これあったらでいいんですけどプロフィールですね。
他にもカテゴリーアーカイブとかですね。 設定方法なんですけど、この利用できるビジットからですね
例えば テキストだったらクリックすると
このようにサイドバー、配置場所を選択してビジットに追加ですね。設定ができます。
削除はこちらからできます。といった感じでかなり簡単に設定ができます。ここをクリックするだけですね。
ドラッグ&ドロップでもできるんですけど、操作に自信がない方はこれで ok です。
あとはこういうふうに、ちゃんと検索窓が一番上にあって、
テキストというのがCTAですね。これからご紹介します。 プロフィール、順番に反映されているのがわかりますね。
はい。 検索窓というのはこの中から探していただいて
配置してください。 CTAですね。CTAは一旦消してご紹介します。
このテキストをサイドバーに追加して、2番目ですね。
最近ですと、Visualのテキストモードがあります。 以前はテキストしかありませんでした。
これによってかなり編集がしやすくなっています。 まず画像を追加します。
例えばこれはバナー画像としていただいて、 フルサイズだと少し大きいので
これを中ぐらいのサイズにします。 配置は中央ですね。
リンク先ですね。 カスタムURLに
ページの飛び先を設定してください。 例えばこの画像とちょっと関連性はないんですけど、
こういうページですね。 リード獲得ページを指定してください。
ページのURLをコピー。 コピーしたらこちらに貼り付けですね。
更新ですね。この鉛筆マークから先ほどの画面に移動します。 保存。
するとですね、こちらに反映がされます。 実際にページにも
はいと言います。これは設定したものですね。
こういうふうにバナー画像は設定してください。 するとサイト側にCTが設定できます。
プロフィールに関しては、これ
テーマに あったりなかったりしますので、その場合はですね
あったら設定してください。共通して設定できるのは この検索テキスト、あとカテゴリーアーカイブですね。
名前だけでも覚えておいてください。 あとはボタンとかグループですね。グループ化できるって言いますね。 例えば見出しと段落っていう要素はそれぞれ
独立してるんですけど、グループ化することによってこれを 一つにできます。
よくパワーポイントとかですね、キーノートとかそういうもので
あるものなんですけど、 これも見てもらったほうがわかりやすいと思います。
こういうグループっていうものがあるっていうことだけ覚えておいてください。 それではブロックエディターの使い方を実際にお見せします。
はい、次ブロックエディターの編集方法をご紹介します。 これは編集画面がこういった感じですね。
固定ページで解説します。 投稿ページも同じので。
これもワードプレステーマによってはこの画面が微妙に違がったりするんですが、
ほぼ同じですね。共通している部分もあるのでそちらに絞ってお伝えします。
はい。 違いがあるっていうことだけ覚えておくと焦らないかなっていう感じで。
ブロックエディターの使い方はここですね。 ブロックの追加、もしくはこちらですね。
基本的にこちらでいいと思うんですが、たまにですね、 たまにというかそのカーソルの動かし方によってはこの
こっちの方ですね、小さい方が表示されないのでその場合はこっちをクリックするようにしてください。
はい、ということでブロックの追加ですね。 基本的に使うものとしましては先ほどご紹介したようなものです。
段落、見出しですね。あとは画像ですとか、カラム、ボタン、
あとはショートコード、これは他のプラグインとかで使ったりしますね。
埋め込みとかですね。 そういったものが頻繁に使うものです。あとカスタムHTMLですね。これも埋め込みで使いますね。
先ほどの埋め込みよりはこっちの方が 使う頻度があるかなと思います。
あとグループ化ですね。このブロックをグルーピングすることができます。 よくあるPowerPointとかKeynoteでもあるようにグループ化するっていう概念ですね。
よくわかんないですよって方は一緒にするぐらいでOKです。 それぐらいですかね。あとリストっていう感じで。
こういう基本的なものですね。全部は使わないので基本的なものに絞ってお伝えします。
これでこのページ、トップページにしてありますので、 これをですねちょっと編集していきたいなと思います。
そこを設定するって言いますね。主に 固定ページですね。投稿ページというか固定ページを
トップに持ってきて、そこに これを見せたい、特に見せたいものを配置する
といった形になります。 これを知っておくとですね、例えば会員制のサイトですとか
デジタルコンテンツの専用サイトとかですね。 他にもなんかサービスでお客さん専用のサイトを用意するとか
そういう時に使います。 これもテーマによって異なっていくの一概ではありませんが、多くの場合は
ブログが一覧となっているケースがあったりとかですね。 あとはそのテーマ独自のレイアウトですね
になっていたりとかですね、トップページが。 まあそういうものがあったりするので
自由にカスタマイズした方がですね、何かと
サイトを作る上で良かったりするので、これも覚えておくといいです。 特に記事ですね、記事がバーっと一覧で並んでいるようなものは
個人のブログとかだったらいいんですけど、 会社で利用する場合はですね、それだと
うまく伝わらない。いきなり記事がトップページに表示されるっていうのもあまり伝わらないので
なんかこう任意の1枚もののページですね、これを設定した方がいいですねっていう形になりますね。
これも覚えておくとカスタマイズの幅が広がりますので実際に見ていきましょう。
ではこのページをですね、先ほど編集したこのページをトップページに配置したいと思います。
先ほどはメニューのところでも少し解説したんですが、この設定の中の表示設定ですね。
この固定ページにチェックを入れてホームページ、ここで
トップページ上に編集したものを選択してください。で変更保存ですね。
するとこのようにトップに配置されます。
だいたいこちらをクリックすればトップに移動しますので、それで確認してください。
このカスタマイズ方法を覚えておけば、今回ホームページ
ホームページ型で解説したんですけど、他のものでも応用できます。
例えばデジタルコンテンツのサイトを作ったりとか、会員専用のサイトですね。
そういうものを作ったりとか、プログラムとかですね、そういったものに応用できます。
あとはこのサイト全体にパスワードを書けるか書けないかの違いです。
なのでぜひこのやり方ですね。 ブロックエディターとかですね。
今回メインでお伝えしたかったのは主にブロックエディターなので、
あんな感じで直感的に操作ができますので、ぜひやってみてください。
最後まとめですね。 WordPress のカスタマイズというのは、メニューだったりとかビジットを自由に設定できて、