Q&A
それぞれの画面に遷移したときにサーバーサイドで「このページ」というのは取得できているのでしょうか。
そもそもPythonに詳しいわけでないのでコードで示せるわけではないのですが、考え方くらいは示せます。
なんか見た感じ静的ページになってるように見えなくもないですが・・
前提・実現したいこと
python djangoでウェブサイトを作成しています。
こちらの解説動画を真似てHTML&CSSのテンプレートを使用しました。（動画とは別デザインを選びました。）
https://www.youtube.com/watch?v=rjxpL89BEX4
私が使用したテンプレートはnavbarにある開いているところ文字の下に緑線が入るデザインとなっています。
この時はこの緑線は正常に表示されていました。
blog.htmlを開くと"BLOG"の下に移動します
しかし、このテンプレートを適用したあとnavbarの”HOME"をクリックするとindex.htmlが表示され"page not found 404"のエラーが出ます。
解説動画でも同様のエラーが発生しているのでここまでは手順通りです。
動画ではこのnavvarのリンクを正しく通すために新たにbase.htmlを作成し、
home.htmlにあるヘッダー部分(navbar)を切り取りbase.htmlに貼り付け
home.htmlに{% extends 'base.html' %}{% block content %}{% endblock %}とすることで
base.htmlに繋がるようにしています。
そして同じ作業をabout.html, blog.html, contact.html, portfolio.htmlにすることで、
navbarのHOMEボタンのリンクが正しく動作するようになりました。
そのかわりnavbarの緑線がどのページを開いても"HOME"の下に固定されてしまいました。
発生している問題・エラーメッセージ
本来は緑線は固定されず、表示しているページに対応するのですが・・ base.htmlにhome.htmlのnavbarを貼り付けたためにこのようになっていると思われます。 そこで質問です、 ⇒⇒どうすれば、正常な緑線の表示かつリンクが通るのでしょうか・・？ アドバイスを頂けるととても助かります。
該当のソースコード
html
1{% load static %} 2 3<!DOCTYPE html> 4<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 5<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 6<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> 7<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 8 <head> 9 <meta charset="utf-8"> 10 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 11 <title>Ambient — </title> 12 <meta name="viewport" content="width=device-width, initial-scale=1"> 13 <meta name="description" content="Free HTML5 Website Template by FreeHTML5.co" /> 14 <meta name="keywords" content="free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" /> 15 <meta name="author" content="FreeHTML5.co" /> 16 17 <!-- 18 ////////////////////////////////////////////////////// 19 20 FREE HTML5 TEMPLATE 21 DESIGNED & DEVELOPED by FreeHTML5.co 22 23 Website: http://freehtml5.co/ 24 Email: info@freehtml5.co 25 Twitter: http://twitter.com/fh5co 26 Facebook: https://www.facebook.com/fh5co 27 28 ////////////////////////////////////////////////////// 29 --> 30 31 <!-- Facebook and Twitter integration --> 32 <meta property="og:title" content=""/> 33 <meta property="og:image" content=""/> 34 <meta property="og:url" content=""/> 35 <meta property="og:site_name" content=""/> 36 <meta property="og:description" content=""/> 37 <meta name="twitter:title" content="" /> 38 <meta name="twitter:image" content="" /> 39 <meta name="twitter:url" content="" /> 40 <meta name="twitter:card" content="" /> 41 42 <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 43 <link rel="shortcut icon" href="{% static 'website/favicon.ico' %}"> 44 45 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet"> 46 47 <!-- Animate.css --> 48 <link rel="stylesheet" href="{% static 'website/css/animate.css' %}"> 49 <!-- Icomoon Icon Fonts--> 50 <link rel="stylesheet" href="{% static 'website/css/icomoon.css' %}"> 51 <!-- Bootstrap --> 52 <link rel="stylesheet" href="{% static 'website/css/bootstrap.css' %}"> 53 <!-- Flexslider --> 54 <link rel="stylesheet" href="{% static 'website/css/flexslider.css' %}"> 55 <!-- Theme style --> 56 <link rel="stylesheet" href="{% static 'website/css/style.css' %}"> 57 58 <!-- Modernizr JS --> 59 <script src="{% static 'website/js/modernizr-2.6.2.min.js' %}"></script> 60 <!-- FOR IE9 below --> 61 <!--[if lt IE 9]> 62 <script src="js/respond.min.js"></script> 63 <![endif]--> 64 65 </head> 66 <body> 67 <div id="fh5co-page"> 68 <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a> 69 <aside id="fh5co-aside" role="complementary" class="border js-fullheight"> 70 71 <h1 id="fh5co-logo"><a href="home.html">Ikebukuro Taiwan Church</a></h1> 72 <nav id="fh5co-main-menu" role="navigation"> 73 <ul> 74 <li class="fh5co-active"><a href="home.html">Home</a></li> 75 <li><a href="blog.html">Blog</a></li> 76 <li><a href="portfolio.html">Portfolio</a></li> 77 <li><a href="about.html">About</a></li> 78 <li><a href="contact.html">Contact</a></li> 79 </ul> 80 </nav> 81 82 <div class="fh5co-footer"> 83 <p><small>© 2016 Blend Free HTML5. All Rights Reserved.</span> <span>Designed by <a href="http://freehtml5.co/" target="_blank">FreeHTML5.co</a> </span> <span>Demo Images: <a href="https://unsplash.com/" target="_blank">Unsplash</a></span></small></p> 84 <ul> 85 <li><a href="#"><i class="icon-facebook2"></i></a></li> 86 <li><a href="#"><i class="icon-twitter2"></i></a></li> 87 <li><a href="#"><i class="icon-instagram"></i></a></li> 88 <li><a href="#"><i class="icon-linkedin2"></i></a></li> 89 </ul> 90 </div> 91 92 </aside> 93 94 {% block content %} 95 96 {% endblock %}
試したこと
自分としてはbase.htmlを使わなければいいのかと思ったのですが、そうとなるとどのように"HOME"ボタンのリンクを通すのかがわかりませんでした。
動画通りにリンクは通っているのでコードは間違っていないの思います。
補足情報（FW/ツールのバージョンなど）
python django==3.1
少なくとも、下記３つのソースを示して頂けると、回答を得られやすいと思いますよ。
①home.html
②base.html （おそらく、navbar が含まれるソース）
③blog.html
必要に応じて、Python（Django）のコードも開示してみましょう。
url は、入力欄のリンクの挿入（クリップのアイコン）を使用すると、読む人に親切です。
回答1件
0
おそらく、<li class="fh5co-active"> が現状、「Home」に固定されてしまうことが原因です。
"fh5co-active"の部分が、緑色の下線を引くための目印だと思われます。
緑色の下線で、現在表示しているページに指し示すような Script が、参考にしたページに使用されているはずです。
その記述を、daichan021 さんのHTMLファイル（base.htmlが良いと思います）に、追記してあげることで解消できるかと思います。
※念のため、<script>タグで指定されているJavaScriptのほか、<link>タグで指定されているcssについても確認してみてください。
HTML
1 <nav id="fh5co-main-menu" role="navigation"> 2 <ul> 3 <!-- "fh5co-active" が、下線が引かれている場所を指し示している --> 4 <li class="fh5co-active"><a href="home.html">Home</a></li> 5 <li><a href="blog.html">Blog</a></li> 6 <li><a href="portfolio.html">Portfolio</a></li> 7 <li><a href="about.html">About</a></li> 8 <li><a href="contact.html">Contact</a></li> 9 </ul> 10 </nav>
投稿2021/01/11 00:48
総合スコア1305
あなたの回答
tips
プレビュー
