こんにちは朱夏です。
今回はフッター部分を作っていこうと思います。
実装するのは次の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 ----->
次にCSSです。
.bg-footer {
background-color: #00000099;
color: snow;
}
.map {
width: 370px;
height: 320px;
}
解説
それでは解説していきます。
埋め込みに関しては、それぞれ公式が提供している共有方法で埋め込み用のコードを生成して貼り付けています。
GoogleMAP
埋め込み方法はこちらのサイトを参考にさせていただきました。
ルートを表示させた状態でコードを取得することもできるようです。
今回私はサンプルとして適当な場所を指定していますが、実際には会社の所在地などを指定して埋め込むといった使い方になるかと思います。
webサイトで地図が必要な時はこれ一択でいい気がしますね。
こちらのヘルプで埋め込み方法を説明してくれています。
ここを利用して自分のプロフィールページのURLを入力して、生成したコードを張り付けるだけで完了です。
タイムラインを埋め込むか、フォローボタンや@ツイートボタンを埋め込むかを選択できるほか、表示サイズなど細かいオプション設定も出来るので、使い勝手はかなりいいと思います。
あとがき
一通り作れたかと思うので、今回はこれにて完成としたいと思います。
完成したテンプレートは下のボタンからダウンロードできるようにしておきますので良かったら見てください。
今回はここまでです。
次回もよろしくお願いします。
