【Webサイト作成】パララックスサイトのテンプレートを作成　その９

こんにちは朱夏です。

今回はフッター部分を作っていこうと思います。
実装するのは次の3つです。

テキスト
GoogleMAPの埋め込み
Twitterの埋め込み

それではやっていきたいと思います。

コード

先ずはコードです。
HTMLから。

   <!-- フッターメニュー -->
   <div class="bg-footer mt-5">
      <div class="row m-0 p-0">
         <div class="col-xl-4 col-12 my-3 border-right">
            <h4>おすすめキャンプ場</h4>
            <div class="bg-light my-2 p-2 map">
               <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25928.96542422888!2d137.9657492996984!3d35.674030432525036!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601c8ea1009e9ab3%3A0xc3ad714283745a76!2z6Zmj6aas5b2i5bGx!5e0!3m2!1sja!2sjp!4v1577786739500!5m2!1sja!2sjp" width="350" height="300" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
            </div>
         </div>
         <div class="col-xl-4 col-12 my-3 border-right">
            <h4>自己紹介</h4>
            <p>初めまして朱夏と申します。<br>
            フリーランスとして独立を目指し、プログラミングを勉強しつつ、先ずは副業でwebコーディングで月5万を目指しています。</p>
            <p>実績</p>
            <ul>
               <li>WordPressテーマ作成</li>
               <li>WordPressで個人ブログ50日以上継続中</li>
               <li>パララックスサイトテンプレート作成</li>
            </ul>
            <p>趣味</p>
            <ul>
               <li>キャンプ、登山</li>
               <li>CGイラスト</li>
               <li>ゲーム</li>
            </ul>
         </div>
         <div class="col-xl-4 col-12 my-3">
            <h4>Twitter</h4>
            <a class="twitter-timeline" data-width="320" data-height="350" data-theme="dark" href="https://twitter.com/syunatsu1?ref_src=twsrc%5Etfw">Tweets by syunatsu1</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
         </div>
      </div>
      
   </div>
   <!-- フッターメニュー END -->

</div>
<!-- エリア２ END -->

<!----- メインコンテンツ END ----->

<!----- フッター ----->
<footer class="bg-dark">
   <p class="text-light text-center">(c)test.com</p>
</footer>
<!----- フッター END ----->

<h4>おすすめキャンプ場</h4>

</div>

<p>初めまして朱夏と申します。<br>

フリーランスとして独立を目指し、プログラミングを勉強しつつ、先ずは副業でwebコーディングで月5万を目指しています。</p>

<ul>

<li>WordPressテーマ作成</li>

<li>WordPressで個人ブログ50日以上継続中</li>

<li>パララックスサイトテンプレート作成</li>

</ul>

<ul>

<li>CGイラスト</li>

</ul>

</div>

<h4>Twitter</h4>

<a class="twitter-timeline" data-width="320" data-height="350" data-theme="dark" href="https://twitter.com/syunatsu1?ref_src=twsrc%5Etfw">Tweets by syunatsu1</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</div>

</div>

</footer>

次にCSSです。

.bg-footer {
    background-color: #00000099;
    color: snow;
}

.map {
    width: 370px;
    height: 320px;
}

.bg-footer {

background-color: #00000099;

color: snow;

}

.map {

width: 370px;

height: 320px;

}

解説

それでは解説していきます。

埋め込みに関しては、それぞれ公式が提供している共有方法で埋め込み用のコードを生成して貼り付けています。

GoogleMAP

埋め込み方法はこちらのサイトを参考にさせていただきました。

やまぎわさんち

googlemapをサイトやブログに埋め込む方法【2019年版】

https://yamagiwasanchi.com/googlemapin

当記事ではGooglemaps(グーグルマップ)をサイトやブログに埋め込む方法を図解を入れながら分かりやすく解…

ルートを表示させた状態でコードを取得することもできるようです。
今回私はサンプルとして適当な場所を指定していますが、実際には会社の所在地などを指定して埋め込むといった使い方になるかと思います。

webサイトで地図が必要な時はこれ一択でいい気がしますね。

Twitter

こちらのヘルプで埋め込み方法を説明してくれています。
ここを利用して自分のプロフィールページのURLを入力して、生成したコードを張り付けるだけで完了です。

help.twitter.com

タイムラインを埋め込む方法

https://help.twitter.com/ja/using-twitter/embed-twitter-feed

ウェブサイトにタイムラインを埋め込みたい場合の方法について説明します。

タイムラインを埋め込むか、フォローボタンや@ツイートボタンを埋め込むかを選択できるほか、表示サイズなど細かいオプション設定も出来るので、使い勝手はかなりいいと思います。

あとがき

一通り作れたかと思うので、今回はこれにて完成としたいと思います。
完成したテンプレートは下のボタンからダウンロードできるようにしておきますので良かったら見てください。

template

今回はここまでです。
次回もよろしくお願いします。