ページガジェットをブログに追加する

ページガジェットを追加することでブログに作成したページへのリンクが表示されるようになります。ページガジェットは追加した位置によって表示される形状が変わります。ここではブログにページガジェットを追加してページへアクセスできるようする方法について解説します。

(2022 年 04 月 12 日公開 / 2022 年 05 月 30 日更新)

ページガジェットを見出し下に追加する

ページは記事のようにブログのメインページには表示されません。作成したページをブログからアクセスできるようにするには「ページ」ガジェットを利用すると便利です。「ページ」ガジェットをブログに追加するには、管理画面の左側に表示されている「レイアウト」をクリックしてください。

ページガジェットを見出し下に追加する(1)

「レイアウト」画面が表示されます。

ページガジェットを見出し下に追加する(2)

今回はまずページタイトル下に「ページ」ガジェットを追加してみます。現在使用しているテーマの場合、「ヘッダー」ブロックの下に「ページリスト(先頭)」ブロックが用意されており、そのブロックの中に既に「ページ」ガジェットが追加されています(ただし非表示に設定されているのでブログでは表示されていません)。

ページガジェットを見出し下に追加する(3)

それでは「ページ」ガジェットの右側に表示されている鉛筆アイコンをクリックしてください。

ページガジェットを見出し下に追加する(4)

「ページ」ガジェットの設定画面が表示されます。

ページガジェットを見出し下に追加する(5)

最初に「このウィジェットを表示する」の右側にあるスイッチをクリックして有効にしてください。「ページ」ガジェットが表示されるようになります。

ページガジェットを見出し下に追加する(6)

ページガジェットを見出し下に追加する(7)

続いて「ページ」ガジェットに表示するページまたは外部リンクを設定します。デフォルトで「ホーム」アイテムが追加されており自分のブログの URL へのリンクが設定されています。この URL が最初にブログを作成したときの URL になっており、このブログでは URL を変更しているため間違った URL が設定されていました。最初に「ホーム」アイテムに設定されている URL を変更します。「ホーム」アイテムのところに表示されている「このアイテムを編集する」をクリックしてください。

ページガジェットを見出し下に追加する(8)

「ホーム」アイテムの編集画面が表示されます。「ページのURL」を正しいブログの URL に変更しました。変更が終わりましたら「保存」をクリックしてください。

ページガジェットを見出し下に追加する(9)

「ホーム」アイテムの編集が完了しました。

ページガジェットを見出し下に追加する(10)

次にアイテムを追加してページへのリンクを設定します。「新しいアイテムを追加」をクリックしてください。

ページガジェットを見出し下に追加する(11)

新しいアイテムを追加する画面が表示されます。

ページガジェットを見出し下に追加する(12)

「ページ名」と表示されているところをクリックしてください。

ページガジェットを見出し下に追加する(13)

「ページ」ガジェットに外部リンクを追加する場合は任意の名前を入力できます。作成済みのページを追加する場合は、表示された作成済みのページ一覧から追加するページ名をクリックしてください。今回は「自己紹介」をクリックしました。

ページガジェットを見出し下に追加する(14)

作成済みのページを選択した場合は URL が自動的に入力されます。最後に「保存」をクリックしてください。

ページガジェットを見出し下に追加する(15)

新しいアイテムが追加されました。

ページガジェットを見出し下に追加する(16)

同じようにアイテムを追加して作成済みの「変更履歴」ページを追加しました。

ページガジェットを見出し下に追加する(17)

ページガジェットを見出し下に追加する(18)

最後に「保存」をクリックしてください。

ページガジェットを見出し下に追加する(19)

「ページ」ガジェットの設定が更新されました。

ページガジェットを見出し下に追加する(20)

それではブログへアクセスしてください。ページタイトル下に「ページ」ガジェットが表示されています。今回のようにページタイトル下に「ページ」ガジェットを追加した場合は「タブ」形式で表示されます。

ページガジェットを見出し下に追加する(21)

それでは「ページ」ガジェットの中の「自己紹介」をクリックしてください。「自己紹介」ページが表示されました。

ページガジェットを見出し下に追加する(22)

ページガジェットを見出し下に追加する(23)

このように「ページ」ガジェットをブログに追加すると、作成済みのページへのリンクを表示することができます。

ページガジェットをサイドバーに追加する

先ほどはもともと用意されていた「ページ」ガジェットを表示するように変更して利用しましたが、任意の位置に「ページ」ガジェットを追加することもできます。ここではサイドバーに「ページ」ガジェットを追加する方法を試してみます。

先ほどと同じ手順で管理画面の左側に表示されている「レイアウト」をクリックして「レイアウト」画面を表示してください。

ページガジェットをサイドバーに追加する(1)

今回は「サイドバー(下)」に追加します。「サイドバー(下)」のブロックにある「ガジェットを追加」をクリックしてください。

ページガジェットをサイドバーに追加する(2)

追加するガジェットを選択するウィンドウが表示されます。

ページガジェットをサイドバーに追加する(3)

「ページ」ガジェットをクリックしてください。

ページガジェットをサイドバーに追加する(4)

「ページ」ガジェットの設定画面が表示されます。

ページガジェットをサイドバーに追加する(4)

今回はサイドバーに追加するので「タイトル」を設定してみます。(省略しても構いません)。「タイトル」のところに「ページ」ガジェットのタイトルを入力してください。

ページガジェットをサイドバーに追加する(5)

またデフォルトで追加されている「ホーム」は今回不要なので削除します。「ホーム」アイテムの右側に表示されている「このアイテムを削除」をクリックしてください。

ページガジェットをサイドバーに追加する(6)

「ホーム」アイテムが削除されました。

ページガジェットをサイドバーに追加する(7)

新しいアイテムとして作成済みのページを追加します。新しいアイテムとしてページを追加する方法は見出し下に「ページ」ガジェットを追加したときと同じなので、詳しい手順はこのページの最初の方を見てください。

ページガジェットをサイドバーに追加する(7)

最後に「保存」をクリックして下さい。

ページガジェットをサイドバーに追加する(8)

「ページ」ガジェットの設定が更新されました。

ページガジェットをサイドバーに追加する(9)

それではブログへアクセスしてください。サイドバーに「ページ」ガジェットが表示されています。今回のようにサイドバーに「ページ」ガジェットを追加した場合は「リスト」形式で表示されます。

ページガジェットをサイドバーに追加する(10)

それでは「ページ」ガジェットの中の「自己紹介」をクリックしてください。「自己紹介」ページが表示されました。

ページガジェットをサイドバーに追加する(11)

ページガジェットをサイドバーに追加する(12)

-- --

それではブログへアクセスしてみます。すると右サイドバーにリンクのリストが表示されています。リンクのタイトルは先ほどページガジェットに表示するようにチェックしたページのタイトルがそれぞれ表示されています。

ページガジェットをサイドバーに追加する(7)

それではリストに表示されているページタイトルをクリックしてみます。するとクリックしたリンクに対応するページが表示されます。

ページガジェットをサイドバーに追加する(8)

ページガジェットをサイドバーに追加する(9)

他のページタイトルをクリックした場合は対応するページが表示され、「ホーム」をクリックした場合は通常の投稿した記事の一覧が表示するページを表示されます。

このようにブログのサイドバーにページガジェットを追加することで、作成したページを表示するためのリンクをリンクリストの形式で表示することができました。

----

ブログにページガジェットを追加してページへアクセスできるようする方法について解説しました。

( Written by Tatsuo Ikura )

広告
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。