【お寺のホームページ作成講座23】へようこそ!
【講座23】では、ウィジェットという機能を使ってページ内の細かいところを設定していく作業をします。
ウィジェットというのは、ページ内の特定の位置に画像や文章、パーツなどを設置できる機能のことです。
ウィジェットを使いこなせるようになるとページの中で告知をしたり、広告のバナーを貼ったりできるようになりますよ。
ウィジェットの設定の仕方
ワードプレスにログインした状態で、ダッシュボードから「外観」→「ウィジェット」へ入ります。
ウィジェットの画面はこんな感じです。
![ウィジェット編集画面](https://temple-hp.com/wp-content/uploads/2021/06/946cc4628518e1e14bfdaa808392edf6-1024x784.jpg)
画面左側がウィジェットの要素、右側が表示するエリアや場所を表しています。
ここでサイドバーなど、メインコンテンツ以外の画面表示の設定や編集をおこないます。
- メインサイドバー(PC・スマホそれぞれ設定)
- ハンバーガーメニュー(PC・スマホ共通)
- スクロール領域(PCサイドバーで画面スクロールに追従)
- 記事タイトル上(PC・スマホ共通)
- 記事タイトル下(PC・スマホそれぞれ設定)
- 記事コンテンツ下(PC・スマホそれぞれ設定)
- トップページ上部(PC・スマホそれぞれ設定)
- トップページ下部(PC・スマホそれぞれ設定)
- フッター(PC・スマホそれぞれ設定)
- CTA設定(PC・スマホ共通)
PCはパソコンでサイトを見たときに表示されるエリアです。
SPは(SmartPhone)の略でスマホでサイトを見たときに表示されるエリアを意味しています。
ウィジェットを追加する方法
ウィジェットを追加するときは画面左側のウィジェットをクリックして、追加したい場所を選択しましょう。
![ウィジェットを追加する方法](https://temple-hp.com/wp-content/uploads/2021/07/471fa06a82c30b8ee99e074d72ebc5da-1024x608.png)
マウスでドラッグ&ドロップでもウィジェットを追加することができます。
ウィジェットで表示される場所の説明
メインサイドバー(PC・スマホそれぞれ設定)
メインサイドバーは以下の部分を設定するエリアです。
![サイドバーの表示](https://temple-hp.com/wp-content/uploads/2021/06/957f055c3667f89c9e74e8626b5072f6.jpg)
ハンバーガーメニュー(PC・スマホ共通)
ハンバーガーメニューは画面左上にでてくる三本線のメニューのことです。
【講座20】サイトタイトルロゴの設定と作り方でヘッダーロゴの位置を中央に配置してPCで表示した時と、スマホでサイトを表示したときに画面左上に表示されます。
![ハンバーガーメニューの表示](https://temple-hp.com/wp-content/uploads/2021/07/hambarger.jpg)
このメニューをタップしたときに表示するものを設定します。
スクロール領域(PCサイドバーで画面スクロールに追従)
サイドバーの下に表示されるエリアです。
サイドバーは画面のスクロールと同じように動きますが、スクロール領域はスクロールに追従したあと、画面の一番上に固定されるように表示されます。
![スクロール領域の表示](https://temple-hp.com/wp-content/uploads/2021/07/daa5197a628d474ef07c216d41a88bd7-1024x797.png)
記事タイトル上(PC・スマホ共通)
記事タイトル上は「投稿」で作った各ページのタイトルの上のエリアになります。
![記事タイトル上の表示](https://temple-hp.com/wp-content/uploads/2021/07/e29a0d5f6aef957d661437e59ce45090.jpg)
記事タイトルやアイキャッチ画像よりも上に表示されます。
記事タイトル下(PC・スマホそれぞれ設定)
記事タイトル下はPCとスマホをそれぞれ表示設定できます。
アイキャッチ画像やSNSシェアボタンと本文の間にコンテンツを追加することができます。
![記事タイトルしたの表示](https://temple-hp.com/wp-content/uploads/2021/07/b46a9ce9bc41071b0323d96a10035cdb.jpg)
記事コンテンツ下(PC・スマホそれぞれ設定)
記事コンテンツ下は本文の終わりの位置にコンテンツを追加できます。
![記事コンテンツ下の表示](https://temple-hp.com/wp-content/uploads/2021/07/f58f046fa53f9928df8d4ffbbcc376b4.jpg)
トップページ上部(PC・スマホそれぞれ設定)
トップページ上部は【講座22】トップページの作成方法で固定ページをトップページに設定した場合は表示されません。
固定ページでのトップページ作成をせずに、初期状態で表示してある場合のみトップページの上部にコンテンツを追加することができます。¥
![トップページ上部の表示](https://temple-hp.com/wp-content/uploads/2021/07/22f28a0376a56fe1e3becd6df28fdbf2-1024x868.jpg)
トップページ下部(PC・スマホそれぞれ設定)
こちらのトップページ下部も【講座22】トップページの作成方法で固定ページをトップページに設定した場合は表示されません。
固定ページでのトップページ作成をせずに、初期状態で表示してある場合のみトップページの下部にコンテンツを追加することができます。
![トップページ下部の表示](https://temple-hp.com/wp-content/uploads/2021/07/4592695ab25428d3ba769acd8ed3ec5b.jpg)
フッター(PC・スマホそれぞれ設定)
フッターは画面下部のエリアです。
PC表示の場合は3つの要素を入れると均等割りされて、4つ目が下に回り込みます。
![PCのフッター表示](https://temple-hp.com/wp-content/uploads/2021/07/2aebf755ec2d4387d16f6285b8bffb16.jpg)
スマホの場合は下に一列に長く表示されます。
![スマホのフッター表示](https://temple-hp.com/wp-content/uploads/2021/07/IMG_0477.jpeg)
PCとスマホを分けて設定できますので、PCは3つのコンテンツ(例:ロゴ・メニュー・問い合わせボタンなど)を設定。
スマホは1つか2つ(ロゴと問い合わせボタンなど)を設定して、冗長にならないように設定してみてください。
CTA設定(PC・スマホ共通)
CTAはCall To Actionの略で、各ページの最後に行動を促すことを目的にしたエリアです。
お寺のホームページでも特別見てもらいたいページがあればCTAにリンクを用意するのが良いかもしれません。
CTAには「カスタムHTML」というウィジェットをいれて、以下のコードをコピペしてください。
[cta_in]
[cta_ttl]ここにキャチコピーやタイトルを記入[/cta_ttl]
説明の文章をここに入力サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
[cta_btn link="ここにリンク先アドレスを入力"]ボタン内に表示するテキストを入力[/cta_btn]
[/cta_in]
コンテンツ下のSNSシェアボタンの下に特別なエリアが表示されます。
![CTAの表示](https://temple-hp.com/wp-content/uploads/2021/07/ad56462fcc70b0cccf9be25c28741a02.jpg)
文章の内容はそれぞれご自身の必要な文章になおしてご利用ください。
ウィジェットの設定まとめ
ストーク19の機能によってここまで説明したような場所にコンテンツを表示させることができます。
ウィジェットの使い方に関しては本家ストークのウィジェットの使い方ページでも詳しく解説されているのでこちらもごらんください。
![](https://fukyo-shi.com/wp-content/uploads/2021/05/tamon-seihoukei2.jpg)
それではこのウィジェットの機能を使ってサイドバーをカスタマイズしてみましょう。
次の【お寺のホームページ作成講座24】でサイドバーの設定を実際に変更してみましょう。
ここまでの講座でホームページの重要な部分はほぼ完成していますが、よりクオリティの高いサイトにするために細部を設定していく方法です。