- このトピックには5件の返信、1人の参加者があり、最後に
により1年、 11ヶ月前に更新されました。
-
投稿
-
こんばんは
みやこと申します。
下記のNINAさんのコードを貼り付けて
https://ninawas.me/2019/controlfreak/code.html
デモページの様な見た目にしたかった
https://ninawas.me/2019/controlfreak/index.html
のですが、
下記ページのようにヘッダに設定した画像がものすごく大きく表示されてしまいます。
https://endofwinter.sakura.ne.jp/tenji/index.html
記述は、太字のところを編集しました。
<div id=”Top”></div>
<img src=”http://sample.jp/tenji/rogo.png” />
<header>
<link rel=”stylesheet” href=”css/style.css”>
<h1>サークル名</h1>そもそもcssに関するヘッダーに書くcssのパスがなかったので、記述したのですが（記述しないとcssが反映されなかった）のですが、それが間違っていたのでしょうか・・
どうぞよろしくお願いします。
ロゴのことで焦ってらっしゃるかもしれませんので、取り急ぎぱっと見て分かることを書いておきます。
見当違いでしたら申し訳ありません。1.HTML記述
ページソースを見たところ、もしかしたらHTMLの基本的な構造を勘違いをされているかもしれません。念のため基本の形をまずご確認ください。（こちらの環境のせいかもしれませんが、ドキュメントタイプやタイトルなどが確認できませんでした。）その基本構造の中で、該当のテンプレートは簡単に書くと
（略）
<head>（headerとは違います）
（略）
上部テキストエリアのスタイルシート（外部ファイル呼び出しでも大丈夫です）
</head>
<body>
下部エリアのHTMLなど
</body>
（略）こういう形でコピーをする形になっているかと思います。
見たところサイトのファーストビューはheader内の要素が表示されています。そのため、サイトの名前のところ、もしくは上に画像を置きたい場合は<header>の後、<h1>の前に画像を置いてください。その際、おそらくサイズの指定をしていないと思うのですが、
のようにサイズの指定をしていただけたらその指定サイズになると思います（適当にいれたのでお好きなサイズにしてください）。
2.そもそものロゴの画像サイズがとても大きい
おそらく印刷が可能なロゴをお作りいただいたのだと思いますが、サイトにアップするには画像サイズがとても大きいと思います。
元のファイルは残しておいていただいて、サイトアップ用に解像度やサイズ自体を調整してロゴをご用意いただくと、読み込み速度も改良されると思います。
（あまり小さすぎると画質が悪くなるので、ある程度の大きさのロゴをご用意していただいて、前述の通りサイズの指定をするのがおすすめです）3.見出しh1背景画像の欠如
スタイルシート内の「大見出し」の72行目の見出し背景用の画像（大見出しの文字の形に切り抜くという指定がされた画像です。デモサイトでは、コードのページの一番上にある画像を使用しているようです）のURLが欠如しているか、もしくは読み込みの不具合が起きていると思うので、使いたい画像のURLを改めて書き直した方がいいかと思います。あとは要素間のmarginやpaddingの調整、サイズの調整などをしていただけばいいかなと思います。
蛇足ですが、フォーラムはこちら側では編集や削除はできないと思います。
また、ガタガタ様も毎日見ているとは限らないため、フォーラムに気付かず、書き込みが削除されない可能性などもあるかもしれない思いますということを念のため書いておきます。
ごめんなさい！
自分も同じようにうっかりそのまま画像要素書いてしまいました。img src=”画像のURL” width=”100px” height=”100px”
前後の<>は抜いていますがサイズ指定はこのような感じで書きました
佐高様、ご回答ありがとうございます。
補足ですが、画像のサイズはご利用のテンプレートだとロゴの部分は横600px程度で十分かと思います。要素の横幅の確認の仕方については、デベロッパーツールを使うのが早くて確実です。使い始めは慣れないかと思いますが、使いこなせるようになればCSS/HTML編集の強力な味方になるので気が向いたら使ってみてください。
またご提示されたHTMLを拝見したところ、タグの入れ子構造が間違っている部分がありましたので、何か変だな、うまくいかない、と思ったら元のテンプレートのタグと見比べてみることをオススメします。
<nav>
<ul>
<h1>end of winter</h1>
<li><a href=”#info”>info</a></li>
（中略）
</ul>
</nav>となっていましたが、<h1>タグは<nav>の直前に出すのが正しいようです。
佐高様、ガタガタ様
お世話になっております。みやこです。
ご返信ありがとうございます。
ご指摘いただいた内容でやってみます。
みやこ
佐高様、ガタガタ様
お世話になっております。みやこと申します。
ご指摘いただいた内容で想定通りの内容が反映されました！！！
本当にありがとうございます。
編集箇所と元の記述を比較するというご指示も大変助かりました。
みなさま、本当にありがとうございました
