5.モール別ランキングのフッター要素(footer.php)のソース内容

「モール別ランキング」アプリのソース解説5回目です。前回は「ヘッダー要素」のプログラムの流れについて解説しました。今回は「footer.php(フッター要素)」のプログラムソースの流れを簡単に解説します。

 

前回の記事

4.モール別ランキングのヘッダー要素のソース内容

アプリURL
モール別ランキング – 大手通販サイトのランキングを比較

 

footer.php(フッター要素)

 

画像

 

ソース内容

<div class="well">
        <div class="text-right">
        <a href="https://affiliate.amazon.co.jp/gp/associates/join/landing/main.html" target="_blank">Amazon.co.jpアソシエイト</a> /

        <a href="https://affiliate.amazon.co.jp/gp/advertising/api/detail/main.html" target="_blank">Amazon Product Advertising API</a> /

        <!-- Rakuten Web Services Attribution Snippet FROM HERE -->
        <a href="http://webservice.rakuten.co.jp/" target="_blank">Supported by 楽天ウェブサービス</a> /
        <!-- Rakuten Web Services Attribution Snippet TO HERE -->
        <!-- Begin Yahoo! JAPAN Web Services Attribution Snippet -->
        <span><a href="http://developer.yahoo.co.jp/about" target="_blank">Webサービス by Yahoo! JAPAN</a></span>
        </div>
        <!-- End Yahoo! JAPAN Web Services Attribution Snippet -->
    </div>
    <div class="text-center">Copyright © Mall Ranking. All rights reserved.</div>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- bxslider -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>


</body>
</html>

 

プログラムの流れ

2行目:

各APIのクレジット表記をbootstrapのクラス要素を指定し右寄せに表示します。

 

3行目、4行目:

Amazon APIのクレジット表記です。

 

8行目:

楽天Webサービスのクレジット表記です

 

11行目:

Yahoo Webサービスのクレジット表記です

 

15行目:

Copyright(コピーライト)をbootstrapのクラス要素を指定し中央寄せに表示します

 

18行目:

jQueryライブラリをCDN(Contents Delivery Network)から読み込みます

 

20行目:

bootstrapのライブラリをCDNから読み込みます

 

23行目:

画像のスライドが出来るbxsliderライブラリをCDNから読み込みます

 

次回はsearch.php(検索フォーム)のソース内容を紹介します

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です