意外と簡単!ホームページ作成 その3

DX

wordpress(テーマ:lightnig)で実際にホームページを作成し、何とか完成が見えてきました。といっても、今回の目的は最低限のクオリティで良しとしています…というのも、今後、財務諸表や重要事項説明書などをホームページに掲載するなどの対応が迫られる中で、古くなったホームページを廃止し、自ら作ることで、情報更新がスムーズ且つコストも抑えられると考えたからです。(以前のホームページは、古かったせいか、情報更新も手間が掛かっていました。)前回に引き続き、また困ったことがいくつかあったのでその解決策を紹介していきます。ホームページ作成にお役に立てば幸いです。

1.地図の埋め込み

Googlemapを埋め込むメリット

ホームページを作成していく中で、介護事業所へのアクセス方法を掲載します。その際に、便利なのがGooglemapの埋め込みです。Googlemapを埋め込むことで、所在地はもちろん、ルート情報を提供できます。埋め込むことで、常に最新の情報に更新され、またスマホアプリとの連携により利便性が高まります。

WordPressにGoogleマップを設置する手順

Googleマップを設置する手順は、以下の通りです。

①Googleマップで地図を表示する

②「共有」から埋め込みコードをコピーする

③表示したいWordPressページにブロックエディタのカスタムHTMLからコードを貼り付ける

【手順1】Googleマップに設置したい地図を表示させる

Googleマップを起動し、Webサイトに設置したい場所を表示します。Googleマップ左上にある検索ボックスに、場所(施設名)を入力し、地図上に場所の情報が表示させる。

【手順2】埋め込みコードをGoogleマップでコピーする

Googlemapで表示された場所にある「共有」をクリック。「地図を埋め込む」タブをクリックします。

*もし、「共有」がアクティブでなければ、アプリでGooglemapを起動させて下さい。(私は、web検索からGooglemapを起動したところ、「共有」がクリックできず苦労しました)

「共有」をクリックしすると、埋め込み用のタグが表示されるので、埋め込み用のタグを選択。選択後「HTMLをコピー」をクリックします。

*HTMLの左側のプルダウンでmapのサイズ設定が可能ですので、必要な大きさに設定して下さい。

【手順3】表示させるWordPressページにコードを貼り付ける

ブロックエディタでのコード貼り付け

Googlemapを表示させたい場所(行)で、ウィジェットカテゴリの中にある「カスタムHTML」ブロックを選択。予めコピーしていたHTMLコードのコピーを貼り付けます。プレビューで正しく表示されることを確認する。

コメント

タイトルとURLをコピーしました