1. ホーム
  2. ホームページの作り方
  3. 無料で使えるデモサイト
  4. コピーライトとSNSリンクの設置

コピーライトとSNSリンクの設置

コピーライトとSNSリンクの設置

トップページの最後の項目のfooter（フッター）を仕上げていきましょう。ヘッダーとフッターは全ページで共通なので「お問い合わせ」ページでも同じデザインで設置します。

フッターには「コピーライト」を記述します。必ずしもコピーライトを記述しなければいけないというわけではないですが、必要性と書き方もしかっり見ていきましょう。

こちらの「デモサイト」から実際のページを確認して頂けます。

目次 [閉じる]

フッターをHTMLで構築する

それではフッターのHTMLをコピペしておきましょう。

index.html

                	
    
                        
  1. <footer>
    2. 
                        
  2.   <div class="inner">
    3. 
                        
  3.     <div class="snsWrap">
    4. 
                        
  4.       <ul>
    5. 
                        
  5.         <li><a href="https://twitter.com/chepirare" target="_blank"><img src="./img/icon_twitter_w.png" alt="Twitter"></a></li>
    6. 
                        
  6.         <li><a href="https://www.facebook.com/Chepirare" target="_blank"><img src="./img/icon_facebook_w.png" alt="Facebook"></a></li>
    7. 
                        
  7.         <li><a href="https://www.instagram.com/chepirare/" target="_blank"><img src="./img/icon_instagram_w.png" alt="Instagram"></a></li>
    8. 
                        
  8.       </ul>
    9. 
                        
  9.     </div>
    10. 
                        
  10.     <div class="copyright">
    11. 
                        
  11.       <small>© 2021 いやしのカレー サンプル.</small>
    12. 
                        
  12.     </div>
    13. 
                        
  13.   </div>
    14. 
                        
  14. </footer>
    15.

コピーライトのマークを表示する時は特殊文字を使って記述しましょう。HTMLで「&copy;」と書くと画面上では「©」と表示されます。

そもそもコピーライトとは何か？というお話なんですが、コピーライトとは「著作権」を意味しています。

ホームページの情報や画像などを含めたすべてのものは当サイトの著作物ですよ、という事を明確に示すためにコピーライトを記述します。

厳密に言うとコピーライトの記載がなくても法的には創作物には創作した時点で著作権が発生するので、コピーライトを記載したくなければ記載しなくても良いです。

ただし、商品の写真や情報などを他のサイトで無断使用されたくない場合は、コピーライトを記載する事によって著作権の侵害を未然に防ぐ抑止力の効果があります。

コピーライトの書き方は、「Copyright © 2021 ○○. All rights reserved.」と「© 2021 ○○.」が多いです。チェピレアではシンプルな後者の形で表記しています。

「○○」の部分にサイト名もしくは店舗名・会社名を記述します。

あとデモサイトではコピーライトを「small」タグで記述しています。これは日本の仕様なんですかね？僕もかなり前からコピーライトはsmallタグで記述していました。

ですが、最近になって調べてみると海外大手の「Apple」や「Microsoft」のサイトではdivタグやliタグで記述しています。なのでsmallタグを使いたくない場合は他のタグにしてもらっても構いません。

竹馬

ちなみにですがHTML4以前のコピーライトは「address」タグが主に使われていました。しかし、HTML5以降に著作権などは「small」タグで定義するように変更されたんです。

フッターをCSSで調整する

次はフッターのCSSですが難しくないですね。余裕があれば各プロパティの意味も確認してみてください。

style.css

                	
    
                    	
  1. /* ------ footer ------ */
    2. 
                    	
  2. footer {
    3. 
                    	
  3.   width: 100%;
    4. 
                    	
  4.   background: #000
    5. 
                    	
  5. }
    6. 
                    	
  6. footer .inner {
    7. 
                    	
  7.   width: 1200px;
    8. 
                    	
  8.   padding: 0 10px;
    9. 
                    	
  9.   margin: 0 auto
    10. 
                    	
  10. }
    11. 
                    	
  11. footer .snsWrap {
    12. 
                    	
  12.   margin-top: 17px;
    13. 
                    	
  13.   float: right
    14. 
                    	
  14. }
    15. 
                    	
  15. footer .snsWrap ul { font-size: 0 }
    16. 
                    	
  16. footer .snsWrap li {
    17. 
                    	
  17.   width: 26px;
    18. 
                    	
  18.   vertical-align: middle;
    19. 
                    	
  19.   display: inline-block
    20. 
                    	
  20. }
    21. 
                    	
  21. footer .snsWrap li + li { margin-left: 20px }
    22. 
                    	
  22. footer .copyright small {
    23. 
                    	
  23.   color: #fff;
    24. 
                    	
  24.   font-size: 1.3rem;
    25. 
                    	
  25.   line-height: 60px;
    26. 
                    	
  26.   letter-spacing: 0.09em
    27. 
                    	
  27. }
    28. 
                    	
  28. @media screen and (max-width: 768px) {
    29. 
                    	
  29.   footer .inner {
    30. 
                    	
  30.     width: 100%;
    31. 
                    	
  31.     text-align: center;
    32. 
                    	
  32.     padding: 40px 4% 0
    33. 
                    	
  33.   }
    34. 
                    	
  34.   footer .snsWrap {
    35. 
                    	
  35.     margin-top: 0;
    36. 
                    	
  36.     float: none
    37. 
                    	
  37.   }
    38. 
                    	
  38.   footer .copyright { margin-top: 20px }
    39. 
                    	
  39. }
    40.

今までCSSのコードを見てきてもらったので気付いてる方もおられるかも知れませんが、僕は最後のプロパティには「;（セミコロン）」は付けてないです。

CSSの指定は「margin-top:20px;」のように「プロパティ」「:（コロン）」「値」「;（セミコロン）」の順番で記述します。

ですが、最後のプロパティに関しては「margin-top:20px」のようにセミコロンを省略する事ができるんです。正直、付けても付けなくてもどっちでも良いです（笑）。

僕がセミコロンを付けなくなった理由は、ファイルを軽くすればページの表示速度も速くなるので少しでもファイルを軽くするために省ける記述を省いていった結果です。

ただ、このセミコロンを省いたぐらいじゃページの速度はそんなに変わらないのでどちらで記述してもらっても構いません。今となってはこれは僕のクセですね（笑）。

記述したHTMLとCSSの確認

それではフッターのHTMLとCSSを確認しておきましょう。これでトップページが完成です。

index.html

                	
    
                    	
  1. <!DOCTYPE html>
    2. 
                        
  2. <html>
    3. 
                        
  3. <head>
    4. 
                        
  4. ～head内の記述省略～
    5. 
                        
  5. </head>
    6. 
                        
  6. <body>
    7. 
                    	
  7. <header>
    8. 
                     	
  8. ～headerの記述省略～
    9. 
                    	
  9. </header>
    10. 
                        
  10. <main>
    11. 
                        
  11.   ～スライダーの記述省略～
    12. 
                        
  12.   ～お知らせの記述省略～
    13. 
                        
  13.   ～メニューの記述省略～
    14. 
                        
  14.   ～お店情報の記述省略～
    15. 
                        
  15. </main>
    16. 
                        
  16. <footer>
    17. 
                        
  17.   <div class="inner">
    18. 
                        
  18.     <div class="snsWrap">
    19. 
                        
  19.       <ul>
    20. 
                        
  20.         <li><a href="https://twitter.com/chepirare" target="_blank"><img src="./img/icon_twitter_w.png" alt="Twitter"></a></li>
    21. 
                        
  21.         <li><a href="https://www.facebook.com/Chepirare" target="_blank"><img src="./img/icon_facebook_w.png" alt="Facebook"></a></li>
    22. 
                        
  22.         <li><a href="https://www.instagram.com/chepirare/" target="_blank"><img src="./img/icon_instagram_w.png" alt="Instagram"></a></li>
    23. 
                        
  23.       </ul>
    24. 
                        
  24.     </div>
    25. 
                        
  25.     <div class="copyright">
    26. 
                        
  26.       <small>© 2021 いやしのカレー サンプル.</small>
    27. 
                        
  27.     </div>
    28. 
                        
  28.   </div>
    29. 
                        
  29. </footer>
    30. 
                        
  30. ～JSファイルの読み込み省略～
    31. 
                        
  31. </body>
    32. 
                        
  32. </html>
    33.

style.css

                	
    
                    	
  1. ～共通デザイン省略～
    2. 
                    	
  2. ～headerデザイン省略～
    3. 
                    	
  3. ～navデザイン省略～
    4. 
                    	
  4. ～スライダーデザイン省略～
    5. 
                    	
  5. ～お知らせデザイン省略～
    6. 
                    	
  6. ～メニューデザイン省略～
    7. 
                    	
  7. ～お店情報デザイン省略～
    8. 
                    	
  8. /* ------ footer ------ */
    9. 
                    	
  9. footer {
    10. 
                    	
  10.   width: 100%;
    11. 
                    	
  11.   background: #000
    12. 
                    	
  12. }
    13. 
                    	
  13. footer .inner {
    14. 
                    	
  14.   width: 1200px;
    15. 
                    	
  15.   padding: 0 10px;
    16. 
                    	
  16.   margin: 0 auto
    17. 
                    	
  17. }
    18. 
                    	
  18. footer .snsWrap {
    19. 
                    	
  19.   margin-top: 17px;
    20. 
                    	
  20.   float: right
    21. 
                    	
  21. }
    22. 
                    	
  22. footer .snsWrap ul { font-size: 0 }
    23. 
                    	
  23. footer .snsWrap li {
    24. 
                    	
  24.   width: 26px;
    25. 
                    	
  25.   vertical-align: middle;
    26. 
                    	
  26.   display: inline-block
    27. 
                    	
  27. }
    28. 
                    	
  28. footer .snsWrap li + li { margin-left: 20px }
    29. 
                    	
  29. footer .copyright small {
    30. 
                    	
  30.   color: #fff;
    31. 
                    	
  31.   font-size: 1.3rem;
    32. 
                    	
  32.   line-height: 60px;
    33. 
                    	
  33.   letter-spacing: 0.09em
    34. 
                    	
  34. }
    35. 
                    	
  35. @media screen and (max-width: 768px) {
    36. 
                    	
  36.   footer .inner {
    37. 
                    	
  37.     width: 100%;
    38. 
                    	
  38.     text-align: center;
    39. 
                    	
  39.     padding: 40px 4% 0
    40. 
                    	
  40.   }
    41. 
                    	
  41.   footer .snsWrap {
    42. 
                    	
  42.     margin-top: 0;
    43. 
                    	
  43.     float: none
    44. 
                    	
  44.   }
    45. 
                    	
  45.   footer .copyright { margin-top: 20px }
    46. 
                    	
  46. }
    47.

スマホのハンバーガーメニューでSNSのアイコン画像をダウンロードしてもらいましたが、フッターも色違いのアイコンがありますので下記からダウンロードしてください。

「Twitterアイコンのダウンロード」「Facebookアイコンのダウンロード」「Instagramアイコンのダウンロード」

デモサイトの階層

はい、こちらの画像も「img」フォルダに入れておきます。これで「favicon.ico」と「apple-touch-icon.png」以外の計14枚の画像が「img」フォルダにあるはずです。

それではトップページが完成です。お疲れ様でした！ちゃんと表示されていますか？

次からはお問い合わせページを制作していきます。フォームはPHPで作られたシステムを使っていきます。これはちょっと複雑な部分もあるのでゆっくり覚えていってください。

お店情報にGoogleマップを埋め込む フォームシステムを導入する

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記