見出し画像

Googleサイトでポートフォリオ制作 【備忘録#2】URLを美しく表示する。

Webサイトのグロナビ(グローバルナビゲーション)の設定をした時に、必ず確認しておいた方がよいと思っていることがあります。それは、各ページのURLが、わかりやすく美しい表示になっているかどうかです。

今回は、勉強会に参加して教えていただいた、GoogleサイトでのURLの表示の確認と調整方法について、Google サイトのテンプレートを利用して書いてみます。


Googleサイトは、Google アカウント(個人ユーザー向け)または Google Workspace アカウント(ビジネス ユーザー向け)をお持ちであれば、どなたでも無料で簡単に利用できるWebサイト作成ツールです。


◆ 日本語メニューの時は要注意!(URLの確認)

まず、Googleサイトのテンプレートギャラリーにある「レストラン」というテンプレートを開きます。グロナビは、[ホーム][お問い合わせ][シェフ][メニュー]という日本語のナビゲーションが設定されています。

スクリーンショット 2021-09-27 191551


そのまま、ツールバーの【公開】ボタンをクリックして下記の画面の[ウェブアドレス]欄に、適当な文字列を入力して公開します。(Googleサイトは、公開するとURLが付与される仕組みなので「公開」作業が必要です。作成したWebサイトは、後ほど簡単に削除出来ます。)

スクリーンショット 2021-09-23 161559


続けて、ツールバーの【公開サイトのリンクをコピー】をクリックして、Webサイトのトップページ[ホーム]のURLを確認します。

スクリーンショット 2021-09-28 104330


URLの後ろが % なんちゃら~表示になっています。名刺やチラシに、WebサイトのURLアドレスを表記するなら、このままだとちょっと面倒ですし、恥ずかしいかもしれません。

スクリーンショット 2021-09-27 205827


念のため、左下の【リンクをコピー】をクリック、こちらにペーストして確認すると、

https://sites.google.com/view/fuminotest/%E3%83%9B%E3%83%BC%E3%83%A0

という長------いアドレスになってしまっています!!!


実際のWebサイトで[ホーム]画面を開いている時のアドレスは、下記のような表示なので、こちらが好みな方もいらっしゃるかもしれませんが、今回は[home]と表示するための方法をご説明します。

https://sites.google.com/view/fuminotest/ホーム


◆ メニューを英語表記にする。(解決方法1)

グロナビの表記を、英語に変更してもう一度「公開」してみましょう。

【ページ】⇒【ホームの横の縦の ⁝ 】⇒【プロパティ】をクリックし、開いた「プロパティ」画面にて、[ホーム]を「Home」に変更します。

スクリーンショット 2021-09-27 191836

スクリーンショット 2021-09-30 074711

スクリーンショット 2021-09-27 192010


表記の変更後、【完了】をクリックしてプロパティ画面を閉じ、再度【公開】ボタンをクリックします。

ツールバーの【公開サイトのリンクをコピー】をクリックし、リンクの確認します。スッキリ美しいURLとなりました。

スクリーンショット 2021-09-27 211911


◆ それでも、やっぱりグロナビは日本語にしたい!(解決方法2)

もちろん、あります!グロナビは日本語、URLはスッキリ英語表記の設定方法を説明します。

先ほど[Home]に変更したプロパティの上段には日本語で[ホーム]、下段の詳細(カスタムパス)に、英語で[home]を入力します。(英字の大文字小文字は、どちらでもよいですが、登録時に自動変換で小文字になるようですので、小文字入力しておいた方がシステムには親切かもしれません。※ 補足 参照)

スクリーンショット 2021-09-27 192103


設定後、URLを確認してみると、スッキリ英語表記となっています。

スクリーンショット 2021-09-28 131217

補足:グロナビの文字が大文字を含む英語表記の場合でも、URLは自動変換されて小文字となるようですので、「プロパティのカスタムパス」には何も入力しなくて大丈夫です。


お時間があれば、ぜひ他のメニューでも試してみて下さい。

Webサイト制作では、ちょっとした手間や丁寧な作業によって細部も機能的で美しいサイトに出来ることがあります。これからも、簡単に美しく出来る方法を見つけたら書いていきたいと思います。

最後まで読んでいただきありがとうございます。


◇◆ よろしければ、こちらもどうぞ ◆◇


この記事が気に入ったらサポートをしてみませんか?